Styling a Search box

From PegaWiki
Styling a Search Box with magnifying glass icon from a text box / This is the approved revision of this page, as well as being the most recent.
Jump to navigation Jump to search

Styling a Search box

Description Style a search box to look like standard search boxes
Version as of 8.x
Application 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
Configuration

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 https://community.pega.com/knowledgebase/articles/user-experience/85/configuring-text-input-control.