# WXCC Notes
Node v 12.16.3
NPM v6.14.4
Yarn v1.22.4
### Loading Widgets
In order to load the local config and not the server config you must edit `DesktopLayoutUtils.ts`.
on line 26:
```javascript=
export const getLayoutConfigFromCache = (): Store.Dynamic.ConfigJson | undefined => {
// const configStr = localStorage.getItem(LAYOUT_CONFIG_CACHE_KEY);
// return configStr ? JSON.parse(configStr) : null;
return undefined;
};
```
and on line 211, add the `!` before `STORE`:
```javascript=
if (!STORE.app.featureFlags.isDynamicDesktopLayoutEnable) {
// const isCached = getLayoutConfigFromCache() ? true : false;
const isCached = false;
const desktopLayoutConfig: Service.Cms.DesktopLayoutAuxiliaryDataAttributes | undefined = await fetchDesktopLayout(
orgId,
teamId
);
```
### For CJaaS Profile Widget Testing
Make the edits to `DesktopLayoutUtils.ts`, drop your widget into 'dynamic-widgets' directory, and then paste this config into `config.js`, replacing the script path as needed:
```javascript=
{
"version": "0.0.7",
"appTitle": "Contact Center Desktop",
"logo": "",
"dragDropEnabled": false,
"notificationTimer": 8,
"maximumNotificationCount": 3,
"browserNotificationTimer": 8,
"wxmConfigured": false,
"area": {
"header": {
"id": "dw-header",
"widgets": { "comp1": { "comp": "div" } },
"layout": { "areas": [["comp1"]], "size": { "cols": [1], "rows": [1] } }
},
"headless": {
"id": "dw-headless",
"widgets": { "comp1": { "comp": "div" } },
"layout": { "areas": [["comp1"]], "size": { "cols": [1], "rows": [1] } }
},
"panel": {
"comp": "md-tabs",
"attributes": { "class": "widget-tabs" },
"children": [
{
"comp": "md-tab",
"attributes": { "slot": "tab", "class": "widget-pane-tab" },
"children": [{ "comp": "slot", "attributes": { "name": "IVR_TRANSCRIPT_TAB" } }],
"visibility": "IVR_TRANSCRIPT"
},
{
"comp": "md-tab-panel",
"attributes": { "slot": "panel", "class": "widget-pane" },
"children": [{ "comp": "slot", "attributes": { "name": "IVR_TRANSCRIPT" } }],
"visibility": "IVR_TRANSCRIPT"
},
{
"comp": "md-tab",
"attributes": { "slot": "tab", "class": "widget-pane-tab" },
"children": [{ "comp": "span", "textContent": "CJaaS Profile" }]
},
{
"comp": "md-tab-panel",
"attributes": { "slot": "panel", "class": "widget-pane" },
"children": [
{
"comp": "cjaas-profile-view-widget",
"script": "./dynamic-widgets/index.js",
"properties": {
"customer": "98033-Yana",
"timelineType": "journey-and-stream",
"authToken": "st=demoassure&so=sandbox&ss=stream&sp=w&se=2021-04-06T07:38:17Z&sk=sandbox&sig=qnKHkG1aAZryxbBfgTLG1XR8jLFbztQ4xKyn5APjdSY=",
"template": {
"Name": "Test Template 2",
"DatapointCount": 100,
"Attributes": [
{
"Version": "0.1",
"Event": "Quote",
"Metadata": "email",
"DisplayName": "Email",
"AggregationMode": "Value",
"type": "tab",
"Limit": 1,
"tag": "email"
},
{
"Version": "0.1",
"Event": "Quote",
"Metadata": "Make",
"DisplayName": "Make",
"AggregationMode": "Value",
"Limit": 1,
"type": "table"
},
{
"Version": "0.1",
"Event": "Quote",
"Metadata": "Model",
"DisplayName": "Model",
"AggregationMode": "Value",
"Limit": 1,
"type": "table"
},
{
"Version": "0.1",
"Event": "Quote",
"Metadata": "ltv",
"DisplayName": "LTV",
"AggregationMode": "Value",
"Limit": 1,
"type": "table"
},
{
"Version": "0.1",
"Event": "Quote",
"Metadata": "License Plate",
"DisplayName": "License Plate",
"AggregationMode": "Value",
"Limit": 1,
"type": "table"
},
{
"Version": "0.1",
"Event": "Quote",
"Metadata": "firstName",
"DisplayName": "First Name",
"AggregationMode": "Value",
"tag": "name",
"Limit": 1,
"type": "inline"
},
{
"Version": "0.1",
"Event": "Entered ZipCode",
"Metadata": "zipCode",
"DisplayName": "Zip Code",
"AggregationMode": "Value",
"Limit": 1,
"type": "table"
},
{
"Version": "0.1",
"Event": "Quote",
"Metadata": "street",
"DisplayName": "Street",
"AggregationMode": "Value",
"Limit": 1,
"type": "table"
},
{
"Version": "0.1",
"Event": "Quote",
"Metadata": "apt",
"DisplayName": "Apt",
"Limit": 1,
"AggregationMode": "Value",
"type": "table"
},
{
"Version": "0.1",
"Event": "Quote",
"Metadata": "city",
"DisplayName": "City",
"Limit": 1,
"AggregationMode": "Value",
"type": "table"
},
{
"Version": "0.1",
"Event": "Quote",
"Limit": 1,
"Metadata": "lastName",
"DisplayName": "Last Name",
"AggregationMode": "Value",
"tag": "name",
"type": "inline"
}
]
}
},
"wrapper": {
"title": "Customer Journey as a Service Profile View",
"maximizeAreaName": "app-maximize-area"
}
}
]
},
{
"comp": "md-tab",
"attributes": { "slot": "tab" },
"children": [{ "comp": "slot", "attributes": { "name": "WXM_JOURNEY_TAB" } }],
"visibility": "WXM_JOURNEY"
},
{
"comp": "md-tab-panel",
"attributes": { "slot": "panel", "class": "widget-pane" },
"children": [
{
"comp": "agentx-wc-cloudcherry-widget",
"properties": {
"userModel": "$STORE.app.userModel",
"spaceId": "",
"metricsId": "",
"ani": "$STORE.agentContact.taskSelected.ani",
"isDarkMode": "$STORE.app.darkMode"
},
"wrapper": { "title": "Customer Experience Journey", "maximizeAreaName": "app-maximize-area" }
}
],
"visibility": "WXM_JOURNEY"
},
{
"comp": "md-tab",
"attributes": { "slot": "tab", "class": "widget-pane-tab" },
"children": [{ "comp": "slot", "attributes": { "name": "CONTACT_HISTORY_TAB" } }]
},
{
"comp": "md-tab-panel",
"attributes": { "slot": "panel", "class": "widget-pane" },
"children": [{ "comp": "slot", "attributes": { "name": "CONTACT_HISTORY" } }]
},
{
"comp": "md-tab",
"attributes": { "slot": "tab", "class": "widget-pane-tab" },
"children": [{ "comp": "slot", "attributes": { "name": "SCREEN_POP_TAB" } }],
"visibility": "SCREEN_POP"
},
{
"comp": "md-tab-panel",
"attributes": { "slot": "panel", "class": "widget-pane" },
"children": [{ "comp": "slot", "attributes": { "name": "SCREEN_POP" } }],
"visibility": "SCREEN_POP"
}
]
},
"navigation": [
{
"nav": {
"label": "Customer Experience Analytics",
"icon": "/app/images/wxm.bcd45cc3.svg",
"iconType": "other",
"navigateTo": "wxm-metrics",
"align": "top"
},
"page": {
"id": "wxm-metrics",
"widgets": {
"comp1": {
"comp": "agentx-wc-cloudcherry-widget",
"attributes": {
"metrics": true
},
"properties": {
"userModel": "$STORE.app.userModel",
"spaceId": "",
"metricsId": "",
"isDarkMode": "$STORE.app.darkMode",
"agentId": "$STORE.agent.agentId"
}
}
},
"layout": {
"areas": [["comp1"]],
"size": {
"cols": [1],
"rows": [1]
}
}
},
"visibility": "WXM_METRICS"
}
]
}
}
```
Google Drive
Gist
Clipboard
Sign in with Wallet
