Applicable to Hybrid mode applications
Define how your users interact with a layout by creating an action set that links
a user behavior to an action in the UI.
For example, your shopping application might include a shopping cart icon control that is
paired with a currency control that indicates the price of the items in the cart. When
you click on either control, the application opens the shopping cart section
ShoppingCart. Because both controls have a common purpose, you
can simplify the design by applying the action to the layout that holds the
Note the following accessibility best practices:
- Use the Click event for most actions, especially for links, buttons, icons, and
- For keyboard-only users, add an Enter key event for every Click event.
- Use the events in the Other events category carefully, for example, Change, and test
them with keyboard navigation.
- Use visibility conditions on the client side if possible, and apply them below the
control that triggers the change.
- Avoid Hover and Right-click events.
Before you begin: Create or identify a section to which you want to add an
action. For more information, see Layouts.
- In Dev Studio, search for and open an existing Section
- If the section is based on a template, in the header of the section editor,
click convert to full section editor, and then confirm
- In the header of the layout to which you want to add an action, click the
View properties icon.
- In the Layout properties window, on the
Actions tab, define the action set:
- Click Create an action set.Result: A table with a new action set appears.
- In the action set table, click Add an event, and
then select the user behavior that triggers the action set.For example: Create a layout that you can click to open the shopping cart, by
selecting Click as the event.
- In the action set table, click Add an action,
and then select the action that the user triggers when interacting with
the control.For example: Assign the action of opening the shopping cart to the layout, by
- If the action that you select requires additional configuration,
complete the configuration form.For example: Define the section that holds the shopping cart interface and set
the main container as the target in which you want to display the
shopping cart with the Section action:
- In the Section field, enter
- In the Target list, select
- Optional: To add more action sets, repeat 4.b through
for every additional action set.
Note: Although Pega Platform does not limit the
number of actions that you can add to a layout, adding too many
might result in a confusing and crowded UI. You must also carefully
consider the sequence of actions, and ensure that, for example,
actions that post values to a clipboard precede actions that use
that clipboard value in a data transform.
- Click Submit.
- On the section form, click Save.