Configure an event handler manually

Add an event handler to a page, component, data resource, or declarative action within UI Builder so that your user can trigger an action.

Avant de commencer

Role required: ui_builder_admin

Pourquoi et quand exécuter cette tâche

An event handler lets you configure an action, components, data resource, or declarative action on your page. For example, you can map an event to your page to add an alert notification when the page successfully loads or you can add an event handler for a button component to perform an action when a user clicks it. The event handler could also be a modal on your page that asks a user to verify that the user wants to delete the record. For more information, see Manage actions in UI Builder pages.

Remarque :

You can also use Now Assist in UI Builder to configure event handlers. For more, information, see Configure an event handler with Now Assist

Procédure

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. Open or create 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 to your page, such as a button.
   For more information about adding components to a page, see Add and configure components.
5. To add an event handler to your component's event, go to the configuration panel and select Events.
   An event handler lets you assign an event to a component. For example, if you add a button component to your page, you want it to perform an action when a user clicks it.
6. To start the process of assigning an event to a component select Add event mapping.

   Some components, such as the button component, only have one event mapping. Other components can have many events.

7. Select an event mapping that you want to configure from the list.
8. From the Event handler preview screen, select an action that you want assigned to the component.
9. Select Continue.
10. Select the handler you want to trigger from the event selected in the earlier step.
    
11. Select Continue.
12. Configure the payload for the event.
    
13. Select Add.
14. Select Save.
15. Test the event by selecting Preview in the header and trigger the action.

Résultats

The configured event handler displays in the events tab of the configuration panel.