LinkedIn
Copied!

Table of Contents

Configuring actionable icon controls

Version:

Only available versions of this content are shown in the dropdown

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.
Icons might not be accessible to users with disabilities. For more information, see Best practices for accessibility.
Add an Image control to the layout.

For more information, see Adding controls.

  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:

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

  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.

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

Did you find this content helpful?

Have a question? Get answers now.

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