Client Script to load the retrieved data from data resource into a JSOn format schema - UI Builder

[JohnDF]

Hi everyone,

I've created a data resource and receive results in this format.

{
      "_row_data": {
        "displayValue": "Configuration Management",
        "uniqueValue": "39c4df00dbc93e00cca1f3361d9619ff"
      },
      "active": {
        "__typename": "GlideRecord_FieldType_Glide_Boolean",
        "canCreate": true,
        "canRead": true,
        "canWrite": true,
        "displayValue": "false",
        "internalType": "boolean",
        "isArray": false,
        "isChoice": false,
        "isMandatory": false,
        "isObject": false,
        "label": "Active",
        "value": false
      },
      "end_date": {
        "__typename": "GlideRecord_FieldType_String",
        "canCreate": true,
        "canRead": true,
        "canWrite": true,
        "displayValue": "15.02.2017 15:35:06",
        "internalType": "glide_date_time",
        "isArray": false,
        "isChoice": false,
        "isMandatory": false,
        "isObject": true,
        "label": "Planned end date",
        "value": "2017-02-15 14:35:06"
      },
      "parent": {
        "__typename": "GlideRecord_ReferenceFieldType_task",
        "canCreate": true,
        "canRead": true,
        "canWrite": true,
        "displayValue": null,
        "internalType": "reference",
        "isArray": false,
        "isChoice": false,
        "isMandatory": false,
        "isObject": false,
        "label": "Parent",
        "value": null
      },
      "short_description": {
        "__typename": "GlideRecord_FieldType_String",
        "canCreate": true,
        "canRead": true,
        "canWrite": true,
        "displayValue": "Configuration Management",
        "internalType": "string",
        "isArray": false,
        "isChoice": false,
        "isMandatory": true,
        "isObject": false,
        "label": "Short description",
        "value": "Configuration Management"
      },
      "start_date": {
        "__typename": "GlideRecord_FieldType_String",
        "canCreate": true,
        "canRead": true,
        "canWrite": true,
        "displayValue": "15.02.2017 15:35:07",
        "internalType": "glide_date_time",
        "isArray": false,
        "isChoice": false,
        "isMandatory": false,
        "isObject": true,
        "label": "Planned start date",
        "value": "2017-02-15 14:35:07"
      },
      "state": {
        "__typename": "GlideRecord_ChoiceListFieldType",
        "canCreate": true,
        "canRead": true,
        "canWrite": true,
        "displayValue": "Completed",
        "internalType": "integer",
        "isArray": false,
        "isChoice": true,
        "isMandatory": false,
        "isObject": false,
        "label": "State",
        "value": "3"
      }

I need help mapping this JSON format to the following format using a client script.

{
"id":"39c4df00dbc93e00cca1f3361d9619ff",
"_expanded":false,
"parent":"null",
"text":{"value":"Configuration Management",
"displayValue":"Configuration Management"
},
"startDate":{"value":"2017-02-15 14:35:07",
"displayValue":"15.02.2017 15:35:07"
},
"endDate":{"value":"2017-02-15 14:35:06",
"displayValue":"15.02.2017 15:35:06"
},
"active":{
"__typename":"GlideRecord_FieldType_Glide_Boolean",
"canCreate":true,
"canRead":true,
"canWrite":true,
"displayValue":false,
"internalType":"boolean",
"isArray":false,
"isChoice":false,
"isMandatory":false,
"isObject":false,
"label":"Active",
"value":false
},
"end_date":{
"__typename":"GlideRecord_FieldType_String",
"canCreate":true,
"canRead":true,
"canWrite":true,
"displayValue":"15.02.2017 15:35:06",
"internalType":"glide_date_time",
"isArray":false,
"isChoice":false,
"isMandatory":false,
"isObject":true,
"label":"Planned end date",
"value":"2017-02-15 14:35:06"
},
"short_description":{
"__typename":"GlideRecord_FieldType_String",
"canCreate":true,
"canRead":true,
"canWrite":true,
"displayValue":"Configuration Management",
"internalType":"string",
"isArray":false,
"isChoice":false,
"isMandatory":true,
"isObject":false,
"label":"Short description",
"value":"Configuration Management"
},
"start_date":{
"__typename":"GlideRecord_FieldType_String",
"canCreate":true,
"canRead":true,
"canWrite":true,
"displayValue":"15.02.2017 15:35:07",
"internalType":"glide_date_time",
"isArray":false,
"isChoice":false,
"isMandatory":false,
"isObject":true,
"label":"Planned start date",
"value":"2017-02-15 14:35:07"
},
"state":{
"__typename":"GlideRecord_ChoiceListFieldType",
"canCreate":true,
"canRead":true,
"canWrite":true,
"displayValue":"Completed",
"internalType":"integer",
"isArray":false,
"isChoice":true,
"isMandatory":false,
"isObject":false,
"label":"State",
"value":3
}
}

This is needed for the records list of the Gantt chart component.

I've created the following client script

function handler({api, event, helpers, imports}) {
var targetDataArray = [];
var sourceDataArray = [];
sourceDataArray = api.data.look_up_multiple_records_1.results;
  for (var i = 0; i < sourceDataArray.length; i++) {
    var sourceData = sourceDataArray[i]; 
    var targetData = {};

    targetData.id = sourceData.uniqueValue;
    targetData._expanded = false;
    targetData.parent = sourceData.parent.value || "null"; 
    targetData.text = {
      value: sourceData.displayValue,
      displayValue: sourceData.displayValue
    };
    targetData.startDate = {
      value: sourceData.start_date.value,
      displayValue: sourceData.start_date.displayValue
    };
    targetData.endDate = {
      value: sourceData.end_date.value,
      displayValue: sourceData.end_date.displayValue
    };
    targetData.active = sourceData.active; 
    targetData.end_date = sourceData.end_date; 
    targetData.short_description = sourceData.short_description; 
    targetData.start_date = sourceData.start_date; 
    targetData.state = sourceData.state; 


    targetDataArray.push(targetData);
  }

  return targetDataArray;
}

and bound it as an event to the data resource.

When I bind this resource, the mapping doesn't work as expected when I map it statically. It simply uses the first record.

static -> working

dynamic via data resource and mapped client script, -> not working

My mapping isn't working correctly. I suspect the problem lies either in my understanding of the mapping process itself or in the client script code. Could you please help me identify the issue?

Providing examples of the input JSON, the desired output JSON, and the client script code would be extremely helpful.

[Dibyaratnam]

As you want to map it dynamically, have you created any state parameters to store the result from the client script which you can use to map the config in the gantt chart. I can see you have mapped the lookup data broker/resource in the record list config property.

[JohnDF]

@Dibyaratnam 

Hi, thank you for your feedback.

Yes, I'm trying to map it dynamically. There are about 700 records so far from which a Gantt hierarchy is created. And later new products and releases will be created as records and these should also be recorded dynamicly in the Gantt. I haven't created a state parameter. What would that look like approximately and how do I connect it to the client script or data source? I connect the state parameter to the record list config property. I know I need an id, parent, start and end date for the Gantt chart. Can you maybe show me a simple scenario setup with guidance from screenshots or precise code snippets? An example would be very helpful, you can't find anything in the documentation on how to build this exemplarily. What you find doesn't fit and is only static.

I'm now also working on another way, but that's even more complicated. That I transform the results from the multiple lookup data source with a transform data broker server script which are connected and then bind it into the record list config property of the Gantt chart. But I haven't found any documentation yet on what the output schema has to look like so that I can build the structure as I have posted as a screenshot for the Gantt chart.

[Brad Tilton · Accepted solution]

Rather than using a client script, you should create a new scriptlet data resource and use that. The entire purpose of a scriptlet data resource is to take the output of one data resource and transform it into a different format. You would just bind the output of your first data resource to a property on your scriptlet data resource. Here are a couple of resources that may help:

• All about data resources in UIB 
• Creating Data Resources - A little outdated but still directionally correct.

[JohnDF]

@Brad Tilton 

Thank you for your feedback.

I found help in other components that I can adapt for the gantt.