logo

NJP

Open an new UI Builder Tab from Workspace Record page Using Declarative Action

Import · Jul 18, 2022 · article

This is a practical walkthrough, of how to create a button on a Workspace Experience Record.In real world, be sure to create the artifacts in the appropriate scope.

Please note this is based on my experience and this article is not part of what the COE team publishes.

Video

I recommend you watch the video. If you watch it on YouTube, you can use the time markers.

Also, take good notice of the guidance and remarks in this article!

Example Result

Clicking the button should open a new UI Builder Page in a new tab, as shown in the below screenshot

image

Tables and relations

Due to the modularity of the Next Experience framework, there are a few steps to take, in order to wire things together. Below is a view of the involved tables. The number indicates the recommended order to create or review the artifact.

image

I recommend filtering the navigator by Actions and Events.

To learn more about the used Declarative Actions and the involved tables, I recommend reading @Ashley Snyder's great article Next Experience - Declarative Actions

Step details and remarks

1. Action Assignment sys_declarative_action_assignment

Access via menu Action Bar Declarative Actions. The recommended convention for action name is lowercase with dashes, for example, action-name. Before saving, create step 2. Action Payload Definition2. Action Payload Definition sys_declarative_action_payload_definition

The convention here is UpperCase Underscore, ie: PAYLOAD_DEFINITION
A sample payload is:

{

"route":"my-uib-page",

"fields":{

    "table":"{{table}}",

    "sysId":"{{sysId}}" 

    }

}

Be sure to change the route to match the name of the (to be created) UI Builder page.

After submitting the record, you save the Action Assignment record, started in step 1.

3. UX Form Action sys_ux_form_action

Be sure to set the Action Type as Declarative Action and select the appropriate table.

4. UX Actions Configuration sys_ux_action_config
If you're working on an existing Workplace Experience, there probably already is a record you can leverage. For example for CSM / FSM Configurable workspace open the CSM/FSM Configurable Workspace Action Config record.

If you create your own Action Configuration, you must copy the sys_id of the newly created record.

Open the UX Page Registry of the experience and in the related list, UX Page Properties create or update actionConfigId with this value.

image

5. UX Action Configurations (M2M) sys_ux_m2m_action_assignment_action_config
From the Action Configuration record, you can create this m2m record via the related list

image

7. UX Form Action Layout Item sys_ux_form_action_layout_item
This is accessible from the related list

Parent macroponent: Record (search the one used in your experience)

Target event: RECORD#NAV_ITEM_SELECTED
Target payload mapping:

Note: if you want to open the tab as a subtab of your current record, use the payload snippet @Ashley Snyder shared in the comments, using the "targetRoute": "current" notation.

{
    "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"
                ]
            }
        }
    }
}

UI Builder page

After this, all is finished you can check if everything works, if you already have the UI Builder page ready, or start working on that if not.

If things don't work as expected, go through the setup, check the tables and check if you're not referencing records used for other experiences.

I also found that running cache.do and reloading the page may help if the events are not emitted after creating them.

Good luck and leave a comment if this helped, or when you have questions!

image

View original source

https://www.servicenow.com/community/next-experience-articles/open-an-new-ui-builder-tab-from-workspace-record-page-using/ta-p/2331927