Navigation (Custom Pages)

nav > label

This property indicates the page navigation identifier. The screen reader reads this property and it appears in the tooltip.

These parameters are necessary to display your custom page on the navigation bar.

type Navigation.Item = {
    label: string;
    iconType: "momentum" | "other";
    icon: string;
    align: "top" | "bottom";
    navigateTo: string;
    iconSize ? : number;
    iconActive ? : string;
    isResponsive ? : boolean;
};

The label property is the title of the custom page.

nav > iconType

This property represents the type of icon that displays in the navigation bar for the custom page.

The following types of icons are available:

• Momentum: You can choose any available icons in the collection: https://momentum.design/icons. The advantage of using Momentum is that it provides a few icons with an “active” version.

  Use case of an active version:

  For example, if you choose a Momentum icon type "announcement", you can see the default icon on the navigation bar. When you navigate to the custom page (linked to the icon), the icon changes to the "announcement-active" version automatically. Ensure that you verify whether it has an "active" version of this same icon in the icon library.

• Other: You can provide a custom image URL (hosted on a CDN) that appears on the navigation bar. If you use a black or white custom icon, the icon isn't visible when you switch between light and dark modes.

nav > icon

This property represents the name of the icon in the Momentum library or the CDN URL.

type Navigation.Item ={
   icon:“announcement”;
}; 
// OR //
type Navigation.Item ={
   icon:“https://my-cdn.com
   /my-navigation-icon.png”;
};

nav > align

This property helps you align the icon to the top or bottom of the navigation bar.

nav > isDefaultLandingPage

This property specifies the default landing page for the agents in Agent Desktop. Set this property to true to make the navigation bar page the default Landing page that appears for the agents after signing in to the Agent Desktop. If more than one navigation bar page has this property set to true, the system considers the first navigation bar page to become the default Landing page.

nav > navigateTo

This property specifies the name of the custom page. This name appears in the address bar when the agent navigates.

type Navigation.Item = {
    navigateTo: “my - custom - page”;
};

In "page" property, you specify the custom page (dynamic widget) object.

The "id" property represents a unique page identifier. For example, my-custom-page-1. Agent can’t see this identifier on the Desktop.

type DynamicWidgets.Page = {
    id: string;
    widgets: Record < string,
    DynamicWidget.Options > ;
    layout: Layout;
};

Helps you define your custom widgets. To place multiple widgets, specify widget options in sequence. Ensure that you give each widget a unique area name. Use it in the layout section later.

"widgets": {
    "comp1": {
        ...
    }
    "comp2": {
        ...
    }
}

This property represents the name of the custom HTML element (known as a Web Component or any other element - if you want to use it as a wrapper). For more information, see Sample Use Case Examples. Enter your custom element name here without angular brackets (“<” or “>”). For example, “my-custom-element.”

Each entry under the widgets section supports the following format:

type Options = {
    comp: string;
    script ? : string;
    properties ? : Record < string,
    any > ;
    attributes ? : Record < string,
    string > ;
    children ? : Options[];
    textContent ? : string;
    style ? : Partial < CSSStyleDeclaration > ;
    wrapper ? : {
        title: string;
        maximizeAreaName: string;
    };
};

(Optional) This property is required only when you load the widget or component from a remote location such as a CDN.

"comp1": {
    "comp": "widget-one",
    "script": "http:/my-cdn.com /
        dynamic - widgets / widget - one.js ",
}

You can specify properties that you must pass for the Web component.

"properties": {
    "user": "admin",
},

Determines whether a web component or an iFrame based widget that is added in the custom layout at the page level or the comp level is responsive. Responsive web components make your web page visually appealing on all devices and are easy to use. You must use responsive iFrame widgets.

Configure this property with one of the following values:

• True: Enables responsiveness of the widget. By default, all widgets are responsive based on the progressive screen sizes, orientation, and viewing areas of the device in use.

• False: Disables responsiveness of the widget. If the widgets do not support viewing on different devices, mark them as nonresponsive.

{
    "comp": "md-tab",
    "responsive": true,
    "attributes": {
        "slot": "tab",
        "class": "widget-pane-tab"
    },
    "children": [{
        "comp": "slot",
        "attributes": {
            "name": "SCREEN_POP_TAB"
        }
    }],
    "visibility": "SCREEN_POP"
}, {
    "comp": "md-tab-panel",
    "responsive": false,
    "attributes": {
        "slot": "panel",
        "class": "widget-pane"
    },
    "children": [{
        "comp": "slot",
        "attributes": {
            "name": "CALL_GUIDE"
        }
    }],
    "visibility": "CALL_GUIDE"
},

You can specify the Web component attributes in this section.

"attributes": {
         "disabled": "false",
},

Specifies whether the Cisco-offered widgets added in the custom layout at the page level or the comp level are visible or not.

Cisco-offered widgets are Contact History, Cisco Webex Experience Management, IVR Transcript, Preview Campaign Call Guide, and Screen Pop.

This property is the core part of the layout. In the "children" section, you can nest as many levels as required if the Web Component-based widget allows you to pass children. To make that possible, the developer must programmatically handle the "slotted" content. For more information, see Cisco Webex Contact Center Desktop Developer Guide.

To know about passing STORE values as properties, see Share Data from Desktop to Widgets.

"children": [{
        "comp": "div",
        "textContent": "Test"
    },
    {
        "comp": "div",
        "textContent": “Test”
    },
    {
        "comp": "div",
        "textContent": "Test"
    },
    {
        "comp": "div",
        "textContent": "Test"
    },
    {
        "comp": "div",
        "children": [{
                "comp": "div",
                "textContent": “Test”
            },
            {
                "comp": "div",
                "textContent": "Test"
            },
            {
                "comp": "div",
                "textContent": "Test"
            }
        ]
    }
],

The advantage of the “children” array section is that you can use existing Web Components in your layout specification, which is already part of the Desktop bundle. A few of the Desktop bundle Web Components include:

• agentx-wc-iframe: A widget that allows you to place any web page into an iFrame as a widget.

• dynamic-area: A component that allows you to enable the drag-and-drop feature for Agents in a place other than custom pages. The custom pages can also have this capability if you enable drag-and-drop by default.

• Any component in the momentum-ui-web-component library. For more information, see GitHub. For example:

  • md-tabs: Tabs container wrapper

  • md-tab: Single tab header

  • md-tab-panel: Single tab content

For more information on the attributes for the persistent tab, see Attributes for Persistent Tabs.

Helps you to add your text content.

"textContent": "My Text Content",

Helps you to assign a particular CSS style to your component.

"style": {
    "backgroundColor": "#CBD",
    "overflow": "scroll"
},

Widget wrapper allows you to add a toolbar on top of your widget. The toolbar can contain a title and the (Maximize) icon on top of the widget. When the widget has occupied a small space on the page, the maximize icon allows the agent to see the widget in full workspace.

Ensure that you use the default value as "app-maximize-area". Currently, only the default value is available.

"wrapper": {
    "title": My Widget Title ",
    "maximizeAreaName": "app-maximize-area"
}

(Optional) The web component widget wrapper allows you to update the dynamic widget title using a unique identifier. Enter the widget wrapper id property value as unique-id-to-update-title.

"wrapper": {
    "title": My Widget Title ",
    "id": "unique-id-to-update-title",
    "maximizeAreaName": "app-maximize-area"
}

To update the iFrame-based widget title, use the iFrame content from the same domain. The following is a sample example:

<
script type = "text/javascript" >
    var title = "";
window.addEventListener("update-title-event", function(e) {
    title = e.detail.title;
});
document.querySelector('#customEvent').onclick = function() {
    const e = new CustomEvent("update-title-event", {
        bubbles: true,
        detail: {
            title: "new title"
        }
    });
    window.parent.dispatchEvent(e);
}; <
/script> <
button id = "customEvent" > New Title < /button> <
    iframe src = "https://blog.logrocket.com/the-ultimate-guide-to-iframes/" > < /iframe>

Allows you to embed a web page in an iFrame that appears as a widget on the Desktop. You can use the iFrame widget called “agentx-wc-iframe”.

"comp1": {
    "comp": "agentx-wc-iframe",
    "attributes": {
        "src": "https://blog.logrocket.com /
            the - ultimate - guide - to - iframes / "
    },
    "wrapper": {
        "title": "AgentX iFrame",
        "maximizeAreaName": "app-maximize-area"
    }
},

Allows you to arrange the widgets on a page.

The following format represents a grid layout:

type Layout = {
    areas: string[][];
    size: {
        rows: number[];
        cols: number[];
    };
};

Here you can define the grid with the area names that you defined in the widgets section.

The following example shows how the layout of three rows and three columns is specified:

"layout": {
    "areas": [
        [
            "comp1",
            "comp1",
            "comp3"
        ],
        [
            "comp2",
            "comp2",
            "comp3"
        ],
        [
            "comp4",
            "comp4",
            "comp4"
        ]
    ],
    "size": {
        "cols": [1, 1, 1],
        "rows": [1, 1, 1]
    }
}

In the size section, numbers represent the fraction of space that a widget can occupy, relative to the other widgets. All three columns occupy equal 1 fraction of space. With 100% as available width, each widget occupies 33.33% of horizontal space.

Another use case example, if you set as "cols": [1, 2, 2], it means that overall space is divided by 5 (1+2+2) and the first widget occupies 20% of horizontal space. The second and third widgets take 40% each. For more information, see Basic Concepts of Grid Layout.

Nesting of layouts is called a sublayout. In case you have nested layouts in your layout configuration, you must have a single "ROOT" object as a parent for sublayouts. Otherwise, your layout configuration can be flat if no nesting is required.

This sublayout provides more control over the layout resize behavior. The page layout property must be of type Record<string, Layout>. The layout property allows you to arrange the widgets on a page.

{
    "id": "some-id",
    "widgets": {
        "c1": {
            "comp": "div",
            "textContent": "c1"
        },
        "c2": {
            "comp": "div",
            "textContent": "c2"
        },
        "c3": {
            "comp": "div",
            "textContent": "c3"
        },
        "c4": {
            "comp": "div",
            "textContent": "c4"
        },
        "c5": {
            "comp": "div",
            "textContent": "c5"
        }
    },
    "layout": {
        "ROOT": {
            "areas": [
                ["c1", "sub1"],
                ["c2", "sub2"],
            ],
            "size": {
                "cols": [1, 1],
                "rows": [1, 1]
            }
        },
        "sub1": {
            "areas": [
                ["c3", "c4"]
            ],
            "size": {
                "cols": [1, 1],
                "rows": [1]
            }
        },
        "sub2": {
            "areas": [
                ["c1"],
                ["c5"]
            ],
            "size": {
                "cols": [1],
                "rows": [1, 1]
            }
        }
    }
}

This setup creates a grid in the ROOT layout with two subgrids that you can resize independently.

Resizing a component affects the components within that sublayout.

Infinite loop: If you include ROOT layout as a sublayout of ROOT, it causes a "call stack exceeded" error and runs into an infinite loop.

{
    "layout": {
        "ROOT": {
            "areas": [
                ["c1", "c2"],
                ["c3", "ROOT"],
            ],
            "size": {
                "cols": [1, 1],
                "rows": [1, 1]
            }
        }
    }

Same Sub-Layout (N) times: If you include the sublayout into your grid more than once with the same name, and if you resize one of them, all the sublayouts get resized automatically.

If this is not the desired behavior, rename each of the sublayouts with a unique name.

{
    "layout": {
        "ROOT": {
            "areas": [
                ["c1", "sub1"],
                ["c2", "sub1"],
            ],
            "size": {
                "cols": [1, 1],
                "rows": [1, 1]
            }
        },
        "sub1": {
            "areas": [
                ["c3", "c4"]
            ],
            "size": {
                "cols": [1, 1],
                "rows": [1]
            }
        }
    }
}

persist-selection

To set md-tabs to be persistent. The default value is true.

tabs-id

Unique identification for all the tabs together in the container.