Dynamic single score component question

[Robert Kelly]

Hello,

I'm trying to get a single score data visualization component to display the sum of an integer field based on a filtered data source that updates when options in a dropdown menu are selected.

When I add the data source to the single score as dynamic data binding I can no longer select anything in the metric field.  I believe I am failing to structure the data needed for the metric to visually display it in the component when the data source is filtered based on previous selections.

I know I'm close since I can switch the metric over to a script and output the records to the console using:

var hours = 0;

  for(var i = 0; i < api.data.requirement_lookup.results.length; i++) {
    hours += api.data.requirement_lookup.results[i].estimated_hours.value;
  }
  console.log(api.data.requirement_lookup.results);
  console.log(hours);

I'm think the way to go about this is to return an object to the metric section so it can display based on the properties listed under the developer references for single score components.

function evaluateProperty({api, helpers}) {
  
  var myObj = {};
  myObj.datasource = 'requirement_lookup';
  myObj.id = 'Estimated hours';
  myObj.aggregateFunction = 'SUM';
  myObj.aggregateField = 'estimated_hours';
  return myObj;

}

Any help with this would be greatly appreciated.

Thank you,

Robert

[Brad Tilton]

I think you're probably going to need some sort of transform between the results of the data resource and the data property. If you look at the example JSON in the component you'll get an idea of exactly what format it's expecting the results in. What does the structure of your data resource results look like now?

[Robert Kelly]

I'm a bit new with UI Builder.  Where does that example JSON exist and how do you directly modify with through scripts on the components?

As far as the data structure goes:

[
    {
        "_row_data": {
            "displayValue": "VREQ0001004",
            "uniqueValue": "9cc577b81bf02d906e22ea41f54bcb8b"
        },
        "number": {
            "value": "VREQ0001004",
            "displayValue": "VREQ0001004"
        },
        "estimated_hours": {
            "value": 66,
            "displayValue": "66"
        }
    },
    {
        "_row_data": {
            "displayValue": "VREQ0001003",
            "uniqueValue": "d8a573b81bf02d906e22ea41f54bcbf6"
        },
        "number": {
            "value": "VREQ0001003",
            "displayValue": "VREQ0001003"
        },
        "estimated_hours": {
            "value": 55,
            "displayValue": "55"
        }
    }
]

The goal here being to add the values of all returned "estimated_hours" fields and display that as the single score.

I think I have everything setup to do the calculations, I'm just fumbling a bit in terms of mapping that data back to the component.  My thought was I needed to do something like:

api.elements.single_score_1.<name of property> = hours;

This is definitely not the case but just an example of what I thought would map the data to the right property.  If it's a case where I need to bring in the entire component, replace the value, and return the JSON back to the component then I'm a bit lost on how to do that.

[Johns Marokky]

Hi @Robert Kelly ,

Do you still need help with this?. I had found an alternative way to do it.

Let me know if you need help with UI Builder.

Regards,

Johns

[Sri Ram1]

Hi @Johns Marokky 

   Can you please share the solution I got stuck with the same requirement