Search Properties
Description
If a TabbedUI component has a large number of items, it can be difficult for a user to find the item that they want. The search feature allow users to quickly find the items in the Tabbed UI interface. As the user types into the search box a filtered list of the matching items is displayed.
- Name
- Description
- Enable search
When you have a large number of items in your TabbedUI, finding a particular item can be difficult. The search feature allows the user to easily filter the list of items.
- Label
Specify the label that appears above the search control. You can use text or language tags.
- Watermark
Specify the watermark text (if any) to appear in the search input. You can set the 'Label' to an empty string and specify a watermark to save space on the TabbedUI menu panel
- Search part class
(Optional) Specify the CSS class name for the div that contains the search part.
- Search results class
(Optional) Specify the CSS class name for the div that contains the search results
- Search input class
(Optional) Specify the CSS class name for the input control where the user types the search string.
- Search results button class
(Optional) A button is displayed for each item found by the search. You can specify an class to add to this button.
- No results found message
If there are no results for the search, specify the message to show in the search results area.
In the image below the search feature has been turned on, but the user has not yet typed into the search box.
In this image the user has typed a string into the search box and all of the matching items are displayed.
To turn the search feature on, go to the TabbedUI Properties pane in the TabbedUI builder and check the Enable search property.
Once you have turned on the search feature, there are a number of other properties you can set.
Videos
Adding a Search Feature to the TabbedUI
It is not uncommon for developers to create TabbedUI components with a very large number of items. Users may then struggle to find a particular item in the list of available menu items. Adding a search feature to the TabbedUI component makes it very easy for users to find the menu item they want.
In this video we show how the search feature is added to the TabbedUI component.