Styling a Search Box with magnifying glass icon from a text box
|Description||Style a search box to look like standard search boxes|
|Version as of||8.x|
|Capability/Industry Area||User Experience|
There is no out-of-the-box control in Pega Platform to implement a search box. Usually, it is implemented as a regular text field with a Search button next to it. However, it is much more intuitive to have a text field with a Search icon (a magnifying glass) for entering search criteria. This is in line with what is visible on most popular websites and apps. This document provides the steps for styling a search box that looks like the following screenshot.
To style the search box:
- Configure a Text input control.
- In the Presentation tab, in the Control format field, enter Table search.
- In the Advanced Presentation Options section, define the Cell read-write classes and Cell read-only classes as label-height-0 border-0.
- Clear the Reserve space for label check box.
For more information about Text input controls, see https://community.pega.com/knowledgebase/articles/user-experience/85/configuring-text-input-control.