Styling controls at run time in Pega Express
You can style many types of controls at run time in Pega® Express, rather than switching to Designer Studio to modify the application skin in order to change their styling. When you style controls directly in Pega Express, you can save development time and reduce maintenance work.
Changes are applied to all controls that use this style throughout the application. For example, when you change the border color for a text input control called Issue, your styling changes are applied to all text input controls using this format throughout your application.
The following example illustrates how to style controls at run time:
- Open the application in Pega Express and click Turn editing on.
- From the + New menu, select the Service Request case type.
The Service Request form initially looks like the following example:
Service Request form before styling changes
- Click Configure this view.
- Hover over a control of the appropriate type and click the Pencil icon for the control.
For example, to change the styling for all text input controls, click the Pencil icon for the Issue field.
Sample properties panel
Beside the Control format field on the properties panel, click the Edit button.
Sample styling panel
On the styling panel, set options such as border type, width, and color. Styling options vary, depending on the type of control. The theme that you select for your application on the Theme form ( > ) determines the colors that are listed under Standard in the Choose a color dialog box.
Choose a color dialog box
- On the styling panel, click Apply, and then close the panel.
- On the properties panel, click Apply, and then close the panel.
- On the Configure form panel, click X.
Your styling changes are reflected throughout the application. In the following example, all the text input fields now have purple borders.
Service Request form after styling changes