Pop-ups can play a crucial role in enhancing user experience — guiding users through complex operations, capturing inputs, or providing context within the ServiceNow platform.
When we need to trigger a pop-up from a UI Action in Workspace, the first thing that comes to mind for many developers is the good old g_modal API.
While g_modal works perfectly for simple use cases (like capturing a reason or a quick choice from the user), it quickly shows its limitations when the requirement becomes more interactive or complex — limited field types, rigid layouts, and no support for UI Pages in Workspaces.
That’s where Declarative Actions come to the rescue! 🎯
With Declarative Actions, you can design custom, dynamic pop-ups directly in UI Builder and trigger them seamlessly from form buttons in Workspaces — all with no custom script hacks.
Follow these steps along to configure declarative actions:
- Design the pop-up modal on UI Builder Record page.
- Create a custom event.
- Map the event to the modal.
- Create a Declarative Action.
- Map the Declarative Action and the event.
- Design the pop-up modal on UI Builder Record p:
- Open the Record Page in UI Builder.
- From the left panel, expand Overlays → Modals, and click Add New.
- Give your modal a name and design it according to your use case — you can add text, fields, or even form components.
- Your modal is now created and ready to be triggered by an event.
- Create a custom event:
- In the same Record Page, open the Events Configuration for the Body of the page.
Under Handled Events, click + Add.
- Name the event (for example, open_custom_modal).
- Define the payload format that your event should expect.
- Click Apply to save your new event.
- This custom event will be used to open the modal when the Declarative Action is triggered.
- Map the event to the modal:
- Go to Events Configuration again for the Body of the Record Page.
- Under Page Event Mappings, click Add Event Mapping.
Select your custom event from the list.
In Add Handler, choose “Open or close modal dialog” as the action.
Select the modal you created earlier.
4. Create a Declarative Action:
From the Navigation menu, go to Form Actions → Declarative Actions.
Create a new Action Assignment.
Fill in key details:
Action Name
Label
Table
Implemented as: UXF Client Action
Click on the Specify Client Action Reference field and create a new Client Action.
Set Applicable To = Form
Ensure the payload format matches the event payload you defined earlier.
- Submit and save
- Navigate to the Form Action Layouts related list and add a layout to make your Declarative Action visible on the record page.
5. Map the Declarative Action and the event:
- Now, switch to Advanced view on Action Assignment form.
- (Optional) Add any conditions under the Conditions section.
- Scroll to the UX Add-on Event Mappings related list and click New.
Fill out the following:
Source Element ID → the component holding the Declarative Action (usually ui_action_bar).
The Source Declarative Action will populate automatically.
Parent Macroponent → your Record Page.
Target Event → select your custom event.
Target Payload Mapping → define the payload according to your event.
The general format would be:
{
"container": {
"your_field_in_payload": {
"binding": {
"address": [
"your_field_in_payload"
]
},
"type": "EVENT_PAYLOAD_BINGING"
}
}
}- Click on submit.
Following these steps would configure the Declarative actions to open a pop-up designed in UI Builder.
Using Declarative Actions for pop-ups in ServiceNow Workspaces offers a scalable and maintainable way to enhance user interactions. It enables developers to create dynamic, configurable modals through UI Builder—reducing custom scripting while ensuring alignment with platform best practices.
