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
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.

A business solution that automates workflows in your organization. Multiple, unrelated applications can be hosted in the same system. You create an application by running the New Application wizard.

The building blocks of your user interface, sections can use design templates for their structure and contain such interactive UI elements as fields, buttons, lists, and so on. A section creates a functional chunk of a user interface, and can be reused throughout your application for improved consistency and efficient development.

For example, your application may need to display user data as a list of ID cards. You can create a section for the contents of a card, and then reuse that section so that the design of every card is consistent.