---
sourceDocument: Australia Build or modify applications
sourceDocumentLink: https://servicenow-prod.fluidtopics.net/r/pt-BR/application-development

 Release :

    - australia

ft:locale :

    - pt-BR

ft:publication_title :

    - Australia Build or modify applications

ft:clusterId :

    - cadev

bundleId :

    - cadev

workflow :

    - Development, Data, and Analytics


---

# Event payloads in UI Builder

# Event payloads in UI Builder {#ariaid-title1}

* Versão de lançamento: Australia
* 
* Atualizado 12 de mar. de 2026
* 
* ![](https://www.servicenow.com/docs/portal-asset/ico-clock) 2 min. de leitura

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.

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)`.

## Create an event with payloads to share information between components {#ariaid-title2}

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

### Antes de Iniciar

Role required: ui_builder_admin

### Procedimento

1. Navigate to AllNow Experience FrameworkUI Builder.
2. Open an experience to work in or create an experience by selecting CreateExperience.  
   For more information, see [Configure how users interact with your applications in UI Builder](https://servicenow-prod.fluidtopics.net/dUVGdKGQs6AbFNSw~vNKcQ "Learn what an experience is in UI Builder. Understand what an experience contains.").
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](https://servicenow-prod.fluidtopics.net/SclXrv5libg5iBN91G7scQ "Create a page in UI Builder for a portal, workspace, or custom application so that you can build a web experience for your users.").
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](https://servicenow-prod.fluidtopics.net/cbYaV7wlkZDBulAnOqnPNA#add-components "Learn how to add components to your page in UI Builder. A page is built by adding 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](https://servicenow-prod.fluidtopics.net/Y5leQ9qVqkR74MzO1XKbGg "Learn how to work with events so that you can add actions to components, pages, data resources, and declarative actions in UI Builder.").
   1. To start the process of setting up an event handler for your component, click Add event mapping.  
   2. Select the event mapping that you want to configure from the list.  
   3. Select Continue.
   4. From the Event handler preview section, select an event handler to bind to your component.  
   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.  
   11. Select the value you would like to bind to the triggered event.  
   12. Select Apply.
   13. Select Add.  
       The data handler will appear below the event mapping in the events tab.

   {#create-event-with-payloads__substeps_v3n_xw3_znb}
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.  
8. Select Client states.
9. Select the arrow next to the client state parameter you want to bind.  
10. Select Apply.
11. Select Save.
12. Select Preview to test your the event you just configured.