---
sourceDocument: Yokohama Build or modify applications
sourceDocumentLink: https://servicenow-prod.fluidtopics.net/r/yokohama/application-development

 Release :

    - yokohama

ft:locale :

    - en-US

ft:publication_title :

    - Yokohama Build or modify applications

ft:clusterId :

    - cadev

bundleId :

    - cadev

workflow :

    - Development, Data, and Analytics


---

# Bind an event to a component

# Bind an event to a component {#ariaid-title1}

* Release version: Yokohama
* 
* Updated January 30, 2025
* 
* ![](https://www.servicenow.com/docs/portal-asset/ico-clock) 3 minutes to read

Bind data elements within UI Builder so that you can add event
actions to your components.

## Before you begin

Role required: ui_builder_admin

## About this task

Each component has specific events that it binds to. For example, a button component
has only a button-clicked event, while other components can have multiple events
that are associated with them.

Some components do not have an event action that is applied to them. An example is
the heading component. Many components require that you map an event to your
component to make it perform an action, such as loading data.

To add actions to components, pages, and data resources on your page, you can add an
event handler. A button component that you add to a page is static. By binding an
event action to the button, you can link it to a web page.

## Procedure

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/nDWg0NsWQpdF_OppvTVe5g "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/qg0Cc5eGfpImb71VJtmSew "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 to which it can bind to your page, such as a button.  
   For more information about adding components to a page, see [Add and configure components](https://servicenow-prod.fluidtopics.net/J6n1ilCnrc90JWEGwzeCiA#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/AaUhb8SxjN3p6v8m~liNsw "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. Configure the payload for the event.  
      You configure each event handler differently, depending on the action of the event. For example, if you add an event handler for a button component, you can choose what that button action performs.
   7. Select Add.
   {#bind-event-component__substeps_v3n_xw3_znb}
6. **Optional:** If you want a modal to pop up for your event, add the modal to the page before you bind your event to the component.  
   A modal is a confirmation pop-up that appears when you click the component. For example, if you add a button component that deletes a record, you add a modal to ask the user to confirm that the user wants to delete the record. For more information, see [Add modal to component](https://servicenow-prod.fluidtopics.net/nNvYB5dTOSmoQMeEAaFA6g "Learn how to add a modal in UI Builder. A modal is a window that appears when you click a component. For example, a modal might display when a delete button component is clicked, prompting the user to confirm deleting a record.").
   1. Select the + icon in the content tree next to Modals.  
   2. Choose a modal type such as Confirm.  
   3. Configure the modal.  
      You can change the text in the modal, the names of the buttons in the modal, and the size of the modal screen. You can also set actions for the modal. When you finish configuring the modal, close it. Notice that the modal you created sits above the body of your page structure in the content tree.
   {#bind-event-component__substeps_fhn_l3b_snb}
7. Bind an event to a button component.  
   You bind an event to the button to trigger an action. Select the button component to highlight it again, either in the content tree, or on the page.
   1. Select + Add content in the content tree.
   2. Select the Button component in the toolbox.
   3. Select None when asked to choose a preset.
   4. In the Configuration pane, click Events.
   5. Select Add handler.  

      The button component only has the button-clicked event associated with it. Other components can have more than one event.
   6. Select an handler that you want assigned to the button.  
      For example, to add an event handler for the button component, you could link it to another destination and add alert notifications. In this example, you can choose Open or close modal dialog
      to make the button open the modal that you created earlier. In this button scenario, select the Confirm and destroy modal dialog event handler that you created earlier.
   7. Select Continue.
   8. Select a modal from the drop-down.
   9. Select Add to add the modal event handler to your button component.
   {#bind-event-component__substeps_mrb_rrf_zzb}
8. Click Save.
9. Test the modal by selecting Preview.
10. To trigger the modal that you created, click the button on the page.

*[\>]: and then