Configuring icon controls

Use 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.
Before you begin: 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 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 actions 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 actions 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 actions 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 actions 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.