Skip to main content


         This documentation site is for previous versions. Visit our new documentation site for current releases.      
 

Styling controls at run time

Updated on November 15, 2021
Applicable to Theme UI-Kit applications

You can style many types of controls at run time in App Studio, rather than switching to Dev Studio and modifying the application skin. For example, for drop-down controls, you can specify text color, background fill and color, and border width and color. When you style controls directly in App Studio, 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 style a drop-down control called Status, your styling changes are applied to all the drop-down controls that use the Status format throughout your application.

  1. To create a case, select a case type name from the New menu.
  2. On the lower right corner of the screen, click the Open runtime toolbar icon, and then click Turn editing on.
  3. On the toolbar, turn on design mode by clicking the Toggle design mode icon (the square icon).
  4. On a form with the type of control that you want to style, click the Configure this view icon for the section that contains the control.
  5. Click the Edit this field icon for a control of the appropriate type.
  6. To specify the control format, complete the following steps:
    1. On the properties panel for the control, click Edit next to the Control format field.
    2. On the styling panel that is displayed, set the formatting options, click Apply, and then close the panel.
  7. To specify the label format, complete the following steps:
    1. On the properties panel, click Edit next to the Label format field.
    2. On the styling panel that is displayed, set the formatting options, click Apply, and then close the panel.
  8. On the properties panel, click Apply, and then close the panel.
  9. On the Configure form panel, click X to close the run-time configuration panel.
    Result: To see a step-by-step example, search for the article Styling controls at run time on Pega Community.

Have a question? Get answers now.

Visit the Support Center to ask questions, engage in discussions, share ideas, and help others.

Did you find this content helpful?

Want to help us improve this content?

We'd prefer it if you saw us at our best.

Pega.com is not optimized for Internet Explorer. For the optimal experience, please use:

Close Deprecation Notice
Contact us