Configuring actionable icon controls
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.- Open the view with the control that you want to
edit.For more information, see Accessing views in your application.
- In the configuration pane on the right side of the window, hover over the control, and then click the Edit icon.
- 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 - Select Standard icon.
- In the Standard icon field, select one of the
predefined icons.For a full list of predefined icons, see Standard actionable icons.
Image catalog - Select Image.
- Click Show image viewer, and then select the icon from the application catalog.
- In the Image size field, define the dimensions of your icon.
- Define how the icon responds to user actions by clicking Add
action sets.For more information, see Adding action sets to a control
Website - Select External URL.
- In the External URL field, enter the URL of the icon that you want to use.
- In the Image size field, define the dimensions for your icon.
- Define how your icon responds to user actions by clicking Add
action sets.For more information, see Adding action sets to a control
Property - Select Property.
- 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
- In the Image size field, define the dimension for your icon.
- 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 - Select Icon class.
- Click Open the icon class picker, and then select the icon from a class-based catalog.
- Define how your icon responds to user actions by clicking Add
action sets.For more information, see Adding action sets to a control
- Add a helper text for users who rely on assistive technology:
- In the Helper text list, select Overlay / Tooltip on hover.
- In the Helper text value field, enter the text that you want
to use with the control.
- 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.
- 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.
Previous topic Date properties Next topic Standard actionable icons