ButtonTextBox

Version: 9.0

A ButtonTextBox control is a combination of a text box and a button. Users can enter a text string in the text box part, and they can click on the button part. You use the ButtonTextBox control to create, for example, search boxes.

You can set a watermark or a default text that the ButtonTextBox control displays. A watermark is a non-editable text that the ButtonTextBox control displays when it is empty. You can enter a text that helps users to understand what they can enter. The watermark disappears as soon as the user enters a character, and it reappears if the user deletes all previously entered characters.

A default text is a text that the control displays, but users can change and delete this text. If you specify both a watermark and a default text, the ButtonTextBox control initially shows the default text, but if the user deletes all of this text, the watermark appears.

If you set the Type property to password, the ButtonTextBox control masks user input. Most browsers replace the characters that the user types with * (asterix) characters.

You use the ButtonType property to indicate what the button part looks like. This is only an indication: the styling that SPEAK applies will decide what the actual look is. You can choose Default, Primary, and Inverse.

You use the Click property to specify what happens when users click the button.

Properties

Name

Description

Default

Appearance

ButtonImageUrl

Set the Sitecore path of an icon (for example, Network/16x16/home.png for the icon shown for the /sitecore/content/home item).

ButtonText

Set the text you want to be displayed in the button part. You can enter a static text, set the text from PageCode, or you can bind this property to a property of another control.

ButtonType

Select Default, Primary, or Inverse.

Default

Text

Specify a default text that the control displays. Users can edit and delete this text.

Type

Specify either text or password.

text

Watermark

Specify a text that the control displays when it has no input from the user. The text is not editable, and it is not displayed if there is any user input.

WidthPolicy

Specify how SPEAK interprets the width of the control. You can specify:

  • Default: the default width of the control is used.

  • BlockLevel: the width is set relative to the width of the container. The control fills the container horizontally.

Default.

Behavior

IsReadonly

If True, the users cannot enter text.

False

IsRequired

If True, the ButtonTextBox control is marked as being “required”. There is no logical effect, but some browsers style the text box differently.

False

MaxLength

Specify the maximum number of characters users can input in the ButtonTextBox control. The control does not accept any more input when the number of characters reaches this number.

Events

Click

Specify JavaScript that SPEAK executes when a user clicks the button.

Configuration

You can create a configuration item for a ButtonTextBox control by creating an item based on the ButtonTextBox Parameters template.

The configuration item has these specific fields:

  • Text

  • Type

  • Watermark

  • ButtonImageUrl

  • ButtonText

  • ButtonType

It inherits these fields:

  • Click

  • IsEnabled

  • IsVisible

  • AccessKey

  • Tooltip

  • Behaviors

  • Id

Do you have some feedback for us?

If you have suggestions for improving this article,