How to dynamically change single score data visualization component based off drop down component in UI builder.

[KushalT]

Hello,

I have a requirement to display a location drop-down at the top and all the single score data visualization components should get updated whenever a user will select any value in the drop-down component.

For instance: If a user will select Location as Albury then all the single score components should display tasks belonging to the Albury location only. I am able to dynamically update the simple list component based on the selection of drop-down values but I am not quite sure how to achieve this one. Any idea how to achieve this requirement?

Thanks in advance.

[Vasantharajan N]

Did you make your single score widget to follow the interactive filter? 

interactive filter will apply additional and condition to the condition there in the single score report. So please make sure the filter field location exist on the table.

Note: Unassigned Task count is 58 after adding interactive filter it changes based on the priority choosen.

[KushalT]

Well, I have to achieve it in workspace not in dashboard,

[Rahul Dev]

Hi @KushalT 
Were you able to achieve it ? 
If Yes can you guide me?

[Nootan Bhat]

Hi Kushal,

If all data visualizations uses same table you can use the parFilters. Refer: https://support.servicenow.com/kb?id=kb_article_view&sysparm_article=KB1156652. Tried it in PDI and it works.

Or else you can use the scripts in your data visualization.

Below are the sample script:

In your data resources use below script:

function evaluateProperty({api, helpers}) {
  var data = [
                {
                    "isDatabaseView": false,
                    "allowRealTime": true,
                    "sourceType": "table",
                    "label": {
                        "message": "LABEL OF YOUR DV"
                    },
                    "tableOrViewName": "TABLE_NAME",
                    "filterQuery": "YOUR_FILTER"+api.state.DROPDOWN_VALUE, //pass the dropdown value dynamically  
                    "id": "DVID"
                }
            ];
	return data;
}

Metric use below code:

function evaluateProperty({
    api,
    helpers
}) {
    var metric = [
                {
                    "dataSource": "DVID",
                    "id": "METRICID",
                    "aggregateFunction": "SUM",
                    "aggregateField":"FIELD_NAME",
                    "numberFormat": {
                        "customFormat": false
                    },
                    "axisId": "primary"
                }
            ];
    return metric;
}

In Group by use below code:

function evaluateProperty({
    api,
    helpers
}) {
    var groupby = [{
        "maxNumberOfGroups": "ALL",
        "numberOfGroupsBasedOn": "NO_OF_GROUP_BASED_ON_PER_METRIC",
        "showOthers": false,
        "groupBy": [{
            "dataSource": "DVID",
            "groupByField": "FIELD_NAME",
            "isRange": false,
            "isPaBucket": false
        } ] //can use multi 'group by' by adding another object 
    }];
    return groupby;
}

This way you can filter the data the way you want. For field, query etc use the state parameters to bind the data dynamically based on the value selection.

Please let me know if it worked for you.

Thanks