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

gowthamaa_mohan
Tera Contributor

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.

8 REPLIES 8

Dibyaratnam
Tera Sage

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. 

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.,

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.

@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;
}