Event payloads in UI Builder

Use event payloads to link data to an action.

Event payloads are pieces of data sent by a component when a selected event is triggered. The data sent by an event can include the type of event, timestamps, user actions, or resource data such as a SysID. You can use event payloads in UI Builder to share information between components on a page.

You can use this payload data when configuring an event handler so that the resulting interaction can be linked to the emitted data. For example, a SysID can be passed to other components on a page to display information related to a specified record.

[Omitted image “event-payloads-avaliable.png”] Alt text: Red box containing the available event payloads for the selected component.

Each component and event has a unique set of payload options. Event payloads may not be properly defined for each component. If that is the case, define a client script so that the console logs payloads such as console.log(event.payload).

Parent Topic:Manage actions in UI Builder pages

Create an event with payloads to share information between components

Use event payloads in UI Builder to share information between components on a page.

Before you begin

Role required: ui_builder_admin

Procedure

1. Navigate to All > Now Experience Framework > UI Builder.

2. Open an experience to work in or create an experience by selecting Create > Experience.

   For more information, see Configure how users interact with your applications in UI Builder.

3. Create or open a page.

   For more information about how to create a page in UI Builder, see Create a page in UI Builder.

4. Add a component that has events, such as the data visualization component.

   For more information about adding components to a page, see Add and configure components.

5. To add an event handler to your component, select the Events tab.

   For more information on how to add event handlers to your component, see Manage actions in UI Builder pages.

   1. To start the process of setting up an event handler for your component, click Add event mapping.

      [Omitted image "event-payloads-event-mapping-button.png"] Alt text: Arrow pointing to add event mapping option.

   2. Select the event mapping that you want to configure from the list.

      [Omitted image "event-payloads-select-event.png"] Alt text: List of available event mappings for the data visualization component.

   3. Select Continue.

   4. From the Event handler preview section, select an event handler to bind to your component.

      [Omitted image "event-handler-add-page-level.png"] Alt text: Clear alert notifications when a row is clicked in a list. [Omitted image "event-payloads-add-handler.png"] Alt text: Update client state parameter handler selected from the list.

   5. Select Continue.

   6. Select the Create a new client state parameter from the Client State Parameter Name drop-down.

   7. Enter a name in the Name field.

   8. Select the type of client state parameter from the Type drop-down.

   9. Enter a value in the Initial value field.

   10. Select the bind data icon in the Value to use after triggering event field.

       [Omitted image "event-payloads-select-bind-icon.png"] Alt text: Arrow pointing to the bind data icon in the Value to use after triggering event field.

   11. Select the value you would like to bind to the triggered event.

       [Omitted image "event-payloads-value-select-modal.png"] Alt text: Bind data modal

   12. Select Apply.

   13. Select Add.

       The data handler will appear below the event mapping in the events tab.

       [Omitted image "event-payloads-configured-handler.png"] Alt text: Arrow pointing to the configured event handler for the data visualization component.

6. Select the component you want to bind the client state parameter to, in this example we will be using a heading component.

7. Select bind data icon in the field you want to bind the client state parameter to.

   [Omitted image "event-payloads-bind-data-field.png"] Alt text: Arrow pointing to the bind data icon in the label field of the heading component.

8. Select Client states.

9. Select the arrow next to the client state parameter you want to bind.

   [Omitted image "event-payloads-bind-csp.png"] Alt text: Arrow pointing to the arrow that binds a client state parameter to the label field.

10. Select Apply.

11. Select Save.

12. Select Preview to test your the event you just configured.