How to hide data visualization in UI builder if there is no data

gowthamaa_mohan
Tera Contributor

‎03-25-2024 10:31 PM - edited ‎03-25-2024 10:32 PM

I have a requirement in UI Builder -  I need to hide the data visualization component if there is no data in the component, Kindly help me with the scripting.

  • 1,311 Views
8 REPLIES 8

Dibyaratnam
Tera Sage

‎03-28-2024 10:51 PM

Can you share the Data Visualization component configuration as screenshot here. You need to set the Hide Component config property as true under Data VIz. component, then it'll hide the same.

You can make the property true or false using Data binding or script as per the required condition. 

0 Helpfuls

gowthamaa_mohan
Tera Contributor
In response to Dibyaratnam

‎04-01-2024 03:42 AM

Hello @Dibyaratnam  , Thanks for the reply!!

 

yes, I want to hide the component if the record count is zero and again i need to visible the component if the record count is more than zero. Only thing i don't know how to get the current record count of the current data visualization component.

I am attaching my data  visualization configuration here:

gowthamaa_mohan_0-1711968124652.png

 

I am using Data Sources Scripts to showing the records.,

0 Helpfuls

Dibyaratnam
Tera Sage
In response to gowthamaa_mohan

‎04-01-2024 04:14 AM

From the image, that you have shared. Can you share what you have configured in Data sources, Metric and Groupby scripts. That would help in setting the hide component property for the Data viz.

0 Helpfuls

gowthamaa_mohan
Tera Contributor
In response to Dibyaratnam

‎04-01-2024 04:19 AM

@Dibyaratnam  :  Please find the below scripts:

 

Data Sources: 

 

/**
  * @param {params} params
  * @param {api} params.api
  * @param {TransformApiHelpers} params.helpers
  */
function evaluateProperty({api, helpers}) {
     let conditionBuilder = api.state.FilterButton;
        var filter;
     if(api.state.FilterValue == false)
     {
     filter = "active=true^sys_created_on<=javascript&colon;gs.beginningOfLast90Days()^assigned_toDYNAMIC90d1921e5f510100a9ad2572f2b477fe"; 
     }
     else if(api.state.FilterValue == true)
     {
     filter = conditionBuilder;
     }
     var data = [
                {
                    "isDatabaseView": false,
                    "allowRealTime": true,
                    "sourceType": "table",
                    "label": {
                        "message": "Case older than 90days"
                    },
                    "tableOrViewName": "sn_customerservice_case",
                    "filterQuery": filter,                   
                    "id": "case90"
                }
            ];
    return data;
    
}
 
 
Metric: 
 

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

    var metric = [{
        "dataSource": "case90", //this should match the id in the datasource
        "id": "caseAssignedMetric", //this can be anything but should be unique
        "aggregateFunction": "COUNT", 
        "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": "case90",
            "groupByField": "state",
            "isRange": false,
            "isPaBucket": false
        }]
    }]
    return groupby;
}


0 Helpfuls