Add In-control Buttons to a TextBox
Description
You can place buttons inside a textbox control to clear entered text, search, filter, or run any number of customized actions or code.
To see a video explanation of the contents of this page watch this video.
Add a 'Clear' Button to a Textbox Control.
In the UX Builder on the UX Controls page open the Data Controls menu. Click on the [TextBox] option to add a textbox to the component.
Highlight the textbox. In the properties list under 'Textbox Properties' check the 'Custom in-control buttons' checkbox.
Click the
button next to the 'In-control buttons definition' property.
In the In-control Buttons Builder click on 'Pre-defined buttons'. Select the 'Clear textbox entry' option.
Give the clear button a name, like 'clear', click OK
Click the
button next to the Click action in order to see the Javascript that causes the
clear button to actually clear text. Click OK and OK again.{this}.value = '';
Run in 'Live Preview'. Write some text into the textbox and click the 'clear' button. By default this is a simple x icon.
Add a 'Search' Filter to a TextBox
In the UX Builder on the UX Controls page open the 'Data Controls' menu and click on [List] to add a list control to the component.
Highlight the List control. In the properties list on the right click on the
button next to the 'List properties' property, in the List Properties section.
In the List Builder's Data Source pane set the Data Source Type to 'SQL'.
Set the 'Connection string' property to be the 'Northwind' database.
From the 'Table name' property select the 'Customers' table.
Click on the
button next to the 'Field list' property. Check the ContactName,
Address, City, and Country fields.
Open the List Layout pane. Use the blue > arrow to move the four data fields from the Available Fields list to the Columns in List. Click OK to close the List Builder.
In the Data Controls menu click on [TextBox] to add a textbox control to the component
Highlight the textbox control. Use the blue up arrow in the Controls page toolbar to move the text box above the list control.
In the textbox control's properties list in the 'Textbox Properties' section check the 'Custom in-control buttons' property.
Click the
button next to the 'In-control buttons definition' property.
Click the 'Add' button in the In-control Buttons Builder. Name the new button 'search' and click OK.
In the Button Definition section set the 'Type' property to 'Text'.
Set the 'Button text' property to 'Search'.
Check the "Use 'button' style" checkbox.
Click the
button next to the 'Click action' property.
In the 'Edit Button Action' dialog click the 'Action Javascript' button. Choose the 'Create/Edit Javascript Option' action.
Click the 'Add New Action' button. Give the new action a name like 'searchList'.
Click the 'Edit Action' button.
Click the 'Add New Action' button.
From the 'Categories' list select 'UX Component'. In the Actions list select the 'Filter Record in a List Control' action.
In the 'Filter Records in a List Control' dialog set the 'List Control name' property to the list you defined, 'list1'
Check the 'Keyword search' property.
Set the 'Search input field' to the textbox control, 'textbox1'.
Click the
button next to the 'Search fields' property and
check the four data fields that were added to the List Control. Click OK, OK, OK, Save, and OK.
In the 'Edit Button Action' dialog click the 'Run a Javascript Action' button and select the action you defined, 'searchList' in this case. Click OK, OK, and OK again.
Run the component in Live Preview. Type something into the textbox control.
Click the Search button. The list control should filter to show any search results.
See Also