UI Builder Enhancement: Create New Button List with Popup

KrisShar · ‎02-09-2026

Opening a Dialog on Button Click in a List (UI Builder)

Configuration Steps

Create the following records via configuration:

1. Action Assignment

Table: sys_declarative_action_assignment

Create a new Action Assignment record.
Populate the fields as shown in the reference screenshot.

2. UX Add-on Event Mapping

Table: sys_ux_addon_event_mapping

List: CSM/FSM Workspace → List Sys ID

Payload: List Action Event Payload

Payload: List Action Event Payload:

{
    "container": {
        "external": {
            "binding": {
                "address": [
                    "external"
                ]
            },
            "type": "EVENT_PAYLOAD_BINDING"
        },
        "fields": {
            "binding": {
                "address": [
                    "fields"
                ]
            },
            "type": "EVENT_PAYLOAD_BINDING"
        },
        "multiInstField": "sysId",
        "params": {
            "binding": {
                "address": [
                    "params"
                ]
            },
            "type": "EVENT_PAYLOAD_BINDING"
        },
        "passiveNavigation": {
            "binding": {
                "address": [
                    "passiveNavigation"
                ]
            },
            "type": "EVENT_PAYLOAD_BINDING"
        },
        "redirect": {
            "binding": {
                "address": [
                    "redirect"
                ]
            },
            "type": "EVENT_PAYLOAD_BINDING"
        },
        "route": {
            "binding": {
                "address": [
                    "route"
                ]
            },
            "type": "EVENT_PAYLOAD_BINDING"
        },
        "size": {
            "type": "JSON_LITERAL",
            "value": "md"
        },
        "title": {
            "binding": {
                "address": [
                    "title"
                ]
            },
            "type": "EVENT_PAYLOAD_BINDING"
        }
    },
    "type": "MAP_CONTAINER"
}

3. Action Payload Definition

Table: sys_declarative_action_payload_definition

Configure the payload.
Route should reference the new page variant that opens inside the dialog.

4. UX App Route

Table: sys_ux_app_route

Parent Macrocomponent: CSM/FSM Workspace – List Sys ID

5. Action Configs

Table: sys_ux_action_config

Add the created Declarative Action under List Actions.

6. Page Variant Creation

Create a Page Variant at the CSM/FSM Workspace level.
Add a Form component to the page.
Configure Data Resources → Form Controller.

Result

A custom List Action button appears in the CSM/FSM Workspace list.
Clicking the button opens the configured page variant in a dialog with the form loaded.

HarpreetS940603

We are trying to achieve this on regulatory alert within Compliance however unable to follow instructions completely. Could you please add clear screenshots and elaborate more on the steps followed to achieve the functionality?

patriciomoy

Step 1: Declarative Action Assignment

Table: sys_declarative_action_assignment
What to do: This is where you create the physical button.
Key detail: In the Table field, you must select your Regulatory Alerts table (likely sn_grc_reg_alert or similar). Set the Action Model to List. Make sure the Format field is set to display a button or icon as desired.

Step 2: UX Add-on Event Mapping

Table: sys_ux_addon_event_mapping
What to do: This tells the system what action to fire when the button is clicked on a specific list.
Key detail: In the Source element field, instead of "CSM/FSM Workspace", locate the list component ID for your Compliance Workspace. The Target Event is usually a routing or Open Modal event. Paste the JSON payload provided in the original post into the Payload field. Note that this JSON is responsible for passing the selected record's sysId to the popup.

Step 3: Action Payload Definition

Table: sys_declarative_action_payload_definition
What to do: Defines the data structure that travels from the list to the popup.
Key detail: Create a new record and ensure the Key matches your defined action. The critical part here is the route property in the JSON; it must perfectly match the route we create in Step 4.

Step 4: UX App Route

Table: sys_ux_app_route
What to do: Registers the internal URL/path for your new popup modal within the workspace.
Key detail: The Parent Macroponent needs to be your Compliance Workspace. Create a new route (e.g., reg-alert-modal). This is the route that the Payload from Steps 2 and 3 will reference.

Step 5: UX Action Configurations

Table: sys_ux_action_config
What to do: This links the button (Step 1) so it actually renders within the Compliance Workspace.
Key detail: Find the Action Configuration record that governs the lists in your Compliance Workspace. In the Declarative Actions related list, add the action you created in Step 1.

Step 6: Page Variant Creation in UI Builder

Where: UI Builder (UIB)
What to do: Build the actual visual interface of the popup.
Key detail: Open your Compliance Workspace in UI Builder. Create a new Page Variant. In the setup, ensure it is configured to open as a Dialog/Modal rather than a full page. Drop a Form component onto the canvas. Go to Data Resources, add a Form Controller, and bind the sysId parameter (passed from the event Payload) so the form knows exactly which Regulatory Alert record to load.