Skip to main content


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

Configuring actionable icon controls

Updated on December 13, 2022
Applicable to Theme Cosmos applications

Use actionable icons to create a user interface that is more intuitive and quicker to localize for different audiences. By linking common operations to familiar icons, you can make the UI more friendly and reduce the time that is required to train new users.

For example, an application might use a floppy disc icon to trigger a save action. Because similar symbols appear in other software products, the users understand the icon even without a tooltip or a manual. Pega Platform provides a number of ready-to-use icons that have predefined action sets and tooltips.
Note: Icons might not be accessible to users with disabilities. For more information, see Best practices for accessibility.
Before you begin: Add an Image control to the layout.

For more information, see Adding UI components to a view.

  1. Open the view with the control that you want to edit.
    For more information, see Accessing views in your application.
  2. In the configuration pane on the right side of the window, hover over the control, and then click the Edit icon.
  3. On the General tab, in the Icon source list, select the repository from which you want to choose an icon:
    ChoicesActions
    Standard icon catalog
    1. Select Standard icon.
    2. In the Standard icon field, select one of the predefined icons.
      For a full list of predefined icons, see Standard actionable icons.
    Image catalog
    1. Select Image.
    2. Click Show image viewer, and then select the icon from the application catalog.
    3. In the Image size field, define the dimensions of your icon.
    4. Define how the icon responds to user actions by clicking Add action sets.
      For more information, see Adding action sets to a control
    Website
    1. Select External URL.
    2. In the External URL field, enter the URL of the icon that you want to use.
    3. In the Image size field, define the dimensions for your icon.
    4. Define how your icon responds to user actions by clicking Add action sets.
      For more information, see Adding action sets to a control
    Property
    1. Select Property.
    2. In the Property field, select the target property for the icon.
      The value of the property that you select must be the name of an image. At run time, the application displays the image
    3. In the Image size field, define the dimension for your icon.
    4. Define how your icon responds to user actions by clicking Add action sets.
      For more information, see Adding action sets to a control
    Folder arranged by CSS class
    1. Select Icon class.
    2. Click Open the icon class picker, and then select the icon from a class-based catalog.
    3. Define how your icon responds to user actions by clicking Add action sets.
      For more information, see Adding action sets to a control
  4. Add a helper text for users who rely on assistive technology:
    1. In the Helper text list, select Overlay / Tooltip on hover.
    2. In the Helper text value field, enter the text that you want to use with the control.
      Note: For accessibility purposes, ensure that the helper text is descriptive so that a screen reader can accurately present the icon.
  5. Optional: To define what the application does when the user clicks the icon, on the Presentation tab, configure the action:
    • To launch a website, select URL, and then provide the address of the target website.
    • To open the email composer, select Email, and then provide the address of the recipient.
    • To open a phone application, select Phone, and then provide the target phone number.
  6. Click Apply.
What to do next: Configure the remaining settings. For more information, see Configuring common control settings.
  • Standard actionable icons

    Standard variations of pxIcon are provided. Each is preconfigured with an icon, tooltip, and action. As a best practice, use these standard rules to ensure correct appearance and behavior.

  • Reviewing available icons

    Familiarize yourself with the icons that you can use in your application to make the UI cleaner and more intuitive.

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