anchorData Provider—Widget Properties and Attributes

Note: To receive real-time data through properties or attributes inside a custom widget, it has to be assigned appropriately in the layout JSON configuration by the administrator. For more information on JSON layout, see Create custom desktop layout in Webex Help Center.

In addition to accessing data through JavaScript SDK subscribers, you can request data to be passed also through properties or attributes. If your component is built to react to changes in property or attribute, you will always get updated data this way from the single source of truth, the Desktop. We call it a data provider.

Currently, we have a single data provider under the key STORE. Below, you will find a breakdown of all possible data and type definitions that is available through the STORE key:

• STORE.agent
• STORE.agentContact
• STORE.app
• STORE.auth
• STORE.generalNotifications
• STORE.dynamic

STORE.agent (Agent Profile Attributes)

Breaking change (granular state): STORE.agent.subStatus (global status) and STORE.agent.subStatusChangeTimestamp are not valid with granular state control. Start consuming agent state from STORE.agent.channelsStatesMap for status and stateChangeTimestamp per channel type. Listen to the eAgentChannelStateChanged event (instead of updated) for state changes when using the granular state APIs (for example, stateChangeV2).

STORE.agent.idleCodes

STORE.agent.wrapUpData

STORE.agent.wrapUpData.wrapUpProps.wrapUpReasonList

STORE.agentContact (Tasks/Interactions)

STORE.agentContact.chatConferenceData

STORE.agentContact.taskMap

STORE.agentContact.taskMap.Task.interaction

STORE.agentContact.taskMap.Task.interaction.callProcessingDetails

STORE.agentContact.taskMap.Task.interaction.media

STORE.agentContact.taskMap.Task.interaction.callFlowParams

STORE.agentContact.taskMap.Task.interaction.callAssociatedData

STORE.app (Application Level)

For more information on JSON layout, see Create custom desktop layout in Webex Help Center.

STORE.auth (Single Sign-On)

STORE.generalNotifications (Application Notifications)

STORE.dynamic (Connector View or Desktop View)

JSON Layout

{
"widgets": {
    "my-component": {
        "comp": "my-custom-component",
        "properties": {
            "agentDnNumber": "$STORE.agent.dnNumber",
            "channelsStatesMap": "$STORE.agent.channelsStatesMap",
            "teamId": "$STORE.agent.teamId"
        }
    }
}
}

Note: With granular state control, the global $STORE.agent.subStatus is not valid. Consume agent state from $STORE.agent.channelsStatesMap instead.

For more information on JSON layout, see Create custom desktop layout in Webex Help Center.

anchorUpdate Dynamic Widget Title

Updates the wrapper title using the JavaScript SDK for the dynamic web component widget.

Example

const e = new CustomEvent("unique-id-to-update-title", {
  bubbles: true,
  detail: {
    title: "new title"
  }
});
window.dispatchEvent(e);

In the CustomEvent, ensure that you use the same unique identifier (unique-id-to-update-title) specified in the JSON desktop layout. For more information on JSON layout, see Create custom desktop layout in Webex Help Center.

To update the iframe-based widget title, the iframe must share Desktop’s origin: the same scheme, hostname, and port.

Example

<button id="customEvent" type="button">New Title</button>
<script>
  // This iframe must have the same origin as Desktop.
  // Match the event name configured in the Desktop layout.
  const titleEventName = "unique-id-to-update-title";
  document.querySelector("#customEvent").addEventListener("click", () => {
    const event = new window.parent.CustomEvent(titleEventName, {
      bubbles: true,
      detail: { title: "new title" }
    });
    window.parent.dispatchEvent(event);
  });
</script>

anchorRelated Pages

• Agent Desktop overview
• Desktop SDK Reference

anchorVerify Data Bindings

Load the widget with the JSON layout and confirm that its configured properties receive the expected STORE values. Change a relevant agent or interaction value and confirm that the widget updates. If a binding stays empty, check the exact STORE path and property name. For title updates, confirm that the layout event identifier matches the event dispatched by the widget.