Use custom components to create a custom Workspace interface to fulfill the specific need of your company's agents.

Communicating with customers through multiple channels can be time consuming. To be efficient in these omni-channel interactions, your agents need a single view of customer information to reduce context switching between multiple tools. By developing custom components for Workspace, your team can bring communications from multiple channels into one interface.

Adding components to a Workspace

Once deployed to your instance, you can add components to Workspace in these ways.

Add a component to a Workspace modal
Use a UI action to launch a custom component in a modal so an agent doesn't have to navigate to a different screen to accomplish a task. For more information, see Render a component in a modal.
Add a component to a Workspace landing page using UI Builder

Use the UI Builder to create custom landing pages for your agents. UI Builder is a drag-and-drop tool that lets you visually arrange workspace components. For more information, see Creating custom landing pages for workspaces.

Configure properties in the now-ui.json file to use deployed components in the UI Builder. See Add a component to UI Builder.

Add a component to a Workspace record view
You can add custom or standard components to the component area in the Workspace record view. For more information, see Setting up Record View in workspace.

Add a component to UI Builder

Set properties in a configuration file to add your component to the UI Builder in your instance.

Before you begin

Procedure

  1. In your project directory, open now-ui.json.
  2. Add the components.[component-name].uiBuilder object to the file.
    This object adds the component to the UI Builder.
    This object includes these key-value pairs:
    {
      "components": {
        "card": {
          "uiBuilder": {
            "label" : "Card",
            "icon" : "chat-fill", 
            "description" : "A visual card format for a record.",
            "associatedTypes": ["global.core"]
          },
  3. If your component includes properties, add the components.[component-name].properties array to the file.
    This adds the properties as configuration options for the component in UI Builder.
    This object includes these key-value pairs:
    {
      "components": {
        "properties": [
    		    {
    			"name": "backgroundColor",
    			"label": "Background Color",
    			"description": "Background Color",
    			"readOnly": false,
    			"required": false,
    			"defaultValue": "lightgray"
    		    },
    		    {
    		       "name": "cardType",
    			"label": "Type of card",
    			"description": "Type of card",
    			"readOnly": false,
    			"required": false,
    			"defaultValue": ""
    		    }
    			]
  4. Save the file.

What to do next

Deploy a component to an instance.