Theme UI-Kit-Styling a Search box

From PegaWiki
Theme UI-Kit - Styling a Search box / This is the approved revision of this page, as well as being the most recent.
Jump to navigation Jump to search

Theme UI-Kit-Styling a Search box

Description Style a search box to look like standard search boxes
Version as of 8.1
Application Pega Platform
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.

Search box Example

To style the search box:

  1. Configure a Text input control.
  2. In the Presentation tab, in the Control format field, enter Table search.
  3. In the Advanced Presentation Options section, define the Cell read-write classes and Cell read-only classes as label-height-0 border-0.
  4. Clear the Reserve space for label check box.

For more information about Text input controls, see