---
sourceDocument: Zurich Build or modify applications
sourceDocumentLink: https://www.servicenow.com/docs/r/zurich/application-development

 Release :

    - zurich

ft:locale :

    - en-US

ft:publication_title :

    - Zurich Build or modify applications

ft:clusterId :

    - cadev

bundleId :

    - cadev

workflow :

    - Development, Data, and Analytics


---

# Bind an event to a declarative action

# Bind an event to a declarative action {#ariaid-title1}

* Release version: Zurich
* 
* Updated July 31, 2025
* 
* ![](https://www.servicenow.com/docs/portal-asset/ico-clock) 1 minute to read

Bind data elements within UI Builder so that you can add event
actions to a declarative action.

## Before you begin

Role required: ui_builder_admin

## About this task

Bind a handled event to a component so that an action is performed when a user
selects the component.

## 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://www.servicenow.com/docs/iNIKh5D0WTwLggJ~MxG1qQ "Learn what an experience is in UI Builder. Understand what an experience contains.").
3. Open or create a page.  
   For more information about how to create a page in UI Builder, see [Create a page
   in UI Builder](https://www.servicenow.com/docs/L3uxkn_s6l5qDdkDxGac3g "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 to your page that can have a declarative action, such as an action bar or related list.  
   For more information, see [Add and configure components](https://www.servicenow.com/docs/2TGg~O~VTqAhbPfHyQKG7A#add-components "Learn how to add components to your page in UI Builder. A page is built by adding components.").
5. To create a declarative action definition in a table in the ServiceNow AI Platform®, navigate to Workspace ExperienceActions \& ComponentsList actions.  
   Choose a table where you want the declarative action to be available in. For example, you could create a Complete my work action in an incident table or you could use an existing declarative action definition record.
   Figure 1. Platform declarative action definition record {#bind-event-declarative-action__step}
{#bind-event-declarative-action__step}
6. Select the Active check box, and then save or update the record.
7. Return to the UI Builder.
8. To invoke a handled event for the declarative action, go to the Configure panel and click Configure declarative action event mapping.  
9. Choose the declarative action that you created earlier.  
   To continue with the example in step [5](https://www.servicenow.com/docs/xQbtGUNzVV0lFHscHNTsJA#bind-event-declarative-action__step), the declarative action could be something like Complete my work.
10. To define what the declarative action does on your page, click + Add event handler.
    1. Give the event handler a name.  
       The name should describe what action you want the event handler to perform.
    2. **Optional:** Provide a description of the event handler.
    3. Choose the handled event that you want to invoke.
    4. **Optional:** Add payload values for your event handler.
    5. Select Save.
    {#bind-event-declarative-action__substeps_ick_3pt_cqb}
11. Select Done.
12. Select Save, and then select ![Preview button that opens the page variant.]().
13. Test the declarative action on your page by clicking Complete my work to see if it works.  
    ![Complete my work button in UI Builder.]()

*[\>]: and then