Wiring a new visualization to My Work / My Team’s Work dropdown on Service Operations Workspace Landing page

In a previous post, we looked at adding a new visualization to the Service Operations Workspace landing page. One of the defects of that solution (or, should I say, backlogged stories) was that the visualization was not wired up to the My Work / My Team’s Work dropdown component. This post tackles that backlogged story.

This enhancement is pretty simple, it involves changing the data source on the new visualization from a static value to a scripted value.

1. Go to the new visualization and hover over the Data Source, click the <>

2. In the script block paste the code below and modify to your needs

/**
 * @param {params} params
 * @param {api} params.api
 * @param {TransformApiHelpers} params.helpers
 */
function evaluateProperty({
    api,
    helpers
}) {
    var filter;
    //api.state.groupMode is what gets updated with the My Work drop down
    if (api.state.groupMode){
        //this is when the drop down is My Teams Work
        //modify the encoded query for your needs
        filter = "active=true^assigned_toISNOTEMPTY^assignment_groupDYNAMICd6435e965f510100a9ad2572f2b47744";
    }
    else {
        //this is when the drop down is My Work
        //modify the encoded query for your needs
        filter = "active=true^assigned_toDYNAMIC90d1921e5f510100a9ad2572f2b477fe";
    }
    var datasource = [{
        "isDatabaseView": false,
        "allowRealTime": true,
        "sourceType": "table",
        "label": {
            "message": "Change Request"
        },
        "tableOrViewName": "change_request", //put your table here
        "filterQuery": filter,
        "id": "allChanges" //this must be unique
    }];
    return datasource;
}

3. Now do the same for the Metric and Group By

Metric:

/**
 * @param {params} params
 * @param {api} params.api
 * @param {TransformApiHelpers} params.helpers
 */
function evaluateProperty({
    api,
    helpers
}) {


    var metric = [{
        "dataSource": "allChanges", //this should match the id in the datasource
        "id": "allChangesMetric", //this can be anything but should be unique
        "aggregateFunction": "COUNT", //if your using a different aggregate function, the JSON may be different
        "numberFormat": {
            "customFormat": false
        },
        "axisId": "primary"
    }]
    return metric;
}

Group By

/**
 * @param {params} params
 * @param {api} params.api
 * @param {TransformApiHelpers} params.helpers
 */
function evaluateProperty({
    api,
    helpers
}) {
    var groupby = [{
        "maxNumberOfGroups": "ALL",
        "numberOfGroupsBasedOn": "NO_OF_GROUP_BASED_ON_PER_METRIC",
        "showOthers": false,
        "groupBy": [{
            "dataSource": "allChanges",
            "groupByField": "type",
            "isRange": false,
            "isPaBucket": false
        }]
    }]
    return groupby;
}

4. Finally, use a script for the chart title of the visualization:

/**
 * @param {params} params
 * @param {api} params.api
 * @param {TransformApiHelpers} params.helpers
 */
function evaluateProperty({
    api,
    helpers
}) {
    var title;
    if (api.state.groupMode) {
        title = 'Changes assigned to my team';
    } else {
        title = 'Changes assigned to me';
    }
    return title;
}