This is a handy guide on how to add Declarative Actions to a Related List in aWorkspace Experience. If you need to add a Declarative Action to a Form instead, I strongly recommend you have a look at this brilliant article: Open a new UI Builder Tab from Workspace Record page Using Declarative Action.

As an example, the following declarative action will open a custom page, created in UI Builder/UIB, to render a Visual Task Board through an iFrame component configured on that page accordingly. This custom route will be opened as a new tab inside the Agent Workspace App Shell of your Workspace Experience.

Below are the steps to follow:

1. Create a Declarative Action Assignment, via menu "Now Experience Framework" → "Action Bar Declarative Actions" (or via table sys_declarative_action_assignment). Most important attributes:

Implemented as: UXF Client Action

Specify client action: VTB_LIST (we will create it during the next step)

Table:

Enabling the Advanced view will allow you to add a condition. Even on the parent record, which is great because in our sample exercise we do not have a records selection from the list.

Example

where parent is the GlideRecord object of the parent record.

1. From the Declarative Action Assignment, create an Action Payload Definition with these sample values:

Key: VTB_LIST

Label: VTB_LIST

Applicable To: Related List

Payload:

{
  "route": "wds-vtb",
  "fields": {},
  "params": {
    "sysId": "{{parentRecordSysId}}"
  }
}

where in route we have the page ID of our created page in UIB, and in params the SysId of the parent record (from MRA attribute parentRecordSysId). Note: if the SysId parameter was added to the page as type required instead of optional, it would have been in fields.

1. Now we need to retrieve or create the UX Actions Configuration record (table sys_ux_action_config) used by our workspace experience. If you are working on an existing workspace experience, like the CSM/FSM Configurable Workspace, there is probably one already available.

So, before creating a new one, investigate this first: via menu "Now Experience Framework" → "Experiences", or directly from the table sys_ux_page_registry, retrieve the UX Page Registry configuration record of the current workspace experience. Then check if there is a property called actionConfigId and if its Value attribute/column contains a SysId.

The record looks like this:

Through the obtained SysId, select the UX Actions Configuration record (table sys_ux_action_config). Otherwise create a new one and then save the SysId back to the actionConfigId property.

1. Now, with the right UX Actions Configuration record, associate the newly created Declarative Action (in step 1) from the Related List Actions tab.

1. As a final step, create a UX Add-on Event Mapping record (table sys_ux_addon_event_mapping) with the following values:

Source element ID: record_page_tabs_1

Source Declarative Action: < the declarative action created in step 1 >

Parent Macroponent: Record

Target Event: < from the list of the events handled by the parent macroponent, select RECORD#NAV_ITEM_SELECTED >

Target Payload Mapping:

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

At this point, after refreshing the Workspace Experience page, you are able to see the declarative action in the specified Related List:

Hints:

• If you want to rename the tab title to something different from the page title, you can do it from within UI Builder → Page opened as a tab → an Event from where a Page Script will be called → the screen.updateStatus function from the helpers API in a Page Script.
• If, for some reason, you need to show a Visual Task Board within Workspace Experience, check first if you have a page configured to load it with the Kanban Board component (it is getting better and better).
• If you want to add actions to a Form: Open a new UI Builder Tab from Workspace Record page Using Declarative Action.