Workspace: Field Decorators open a URL

Creating a way to deep link to an external system is a great for avoiding lengthy & unnecessary integrations. Providing agents a way to get directly into a system without multiple clicks can be a huge time saver.

Prior to Workspace, adding a Field Decorator was accomplished by creating a UI Macro. To implement a UI macro a few steps were needed to getting your decorator on a form, including writing code.

Similarly, if you are using one of the Baseline Workspaces (SOW, ITAM, CSM/FSM, HR) or a custom workspace there are some steps to create a Field Decorator. Luckily no Jelly, HTML, or JS is involved. There is mostly no code, there is a bit of JSON to copy/paste, and the rest is all configuration driven.

These steps seems pretty simple/straightforward, but depending on your workspace configuration there may be a few additional steps to make your Field Decorator launch an external URL.

Creating the Field Decorator

1. Navigate to Now Experience Framework > Declarative Actions > Field Decorators
2. Fill in the following fields:
   1. Action label: Provide a descriptive label
   2. Implemented as: UXF Client Action
   3. Specify client action: Open URL
   4. Decorator applies to: Specific field
   5. Field Name: Select a field name to display the icon near
   6. Icon: Select an icon
   7. Table: Select table
3. Save the form
4. Click Related Links > Advanced view
5. Set URL:
   1. Action Attributes > Payload Map > URL
   2. Fill in your URL
   3. use {{actionModelField}}syntax for example notion.so/{{displayValue}}
6. Save the Form
7. Navigate to the Workspace:
   1. Select a Record from the table you configured on the Action Assignment
   2. Confirm your Icon appears next to your field

At this point if you click your field decorator icon, nothing will happen. One additional (undocumented) set of steps is required to make the decorator actually launch/open a URL.

Creating the UX Add-on Event Mapping

1. Navigate to the Action Assignment (Decorator) you created
   1. Related List > UX Add-on Event Mapping
2. Create a new UX Add-on Event Mapping
   1. Fill in the following fields:
      1. Event Mapping Name: Provide a unique name
      2. Source Component: Form
      3. Source Declarative Action: Action Assignment from previous steps
      4. Controller: UI Controller Record Page
      5. Target Event: [Record Page] Item Selected
      6. Target Payload Mapping: Use payload below:

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