how to create a table dynamically on catalog item form, to display JSON output in a tabular view, and be able to modify it through script whenever needed.

[fisfreak]

Hi All,

I have catalog item called VM Properties, and on click of that, I want to make Rest Call and get JSON response. Now i want to display this JSON response in a table, where VM_Name, OS_Type, Resource_Groupe etc will by my column names and rows will be added dynamically depending on the number of VMs.

So i have to write a onClick event and make a Rest call and pass data from catalog client script to catalog item form and show it in a table.

Its very easy to show data on a single line text by using g_form.setValue() function.

Any suggestion on how to create a table dynamically and display my JSON data in a table.

[fredflintstone · Accepted solution]

The way I typically do this is to loop though the JSON response and build the html table in a string variable, then set the g_form field value to the variable that has the html table.   Something like below should get you close...

Assuming the JSON response you're getting is something like this:

{
         "results": [{
                   "vmName": "test01",
                   "resourceGroup": "SNOW-0001",
                   "osType": "Linux",
                   "status": "Running",
                   "size": "standard"
         }, {
                   "vmName": "test02",
                   "resourceGroup": "SNOW-0002",
                   "osType": "Windows",
                   "status": "Shutdown",
                   "size": "standard"
         }]
}

...build a string value with html code then set the variable that string

// start by defining the html table with desired style...
var strTable = '<table style="align:center; border-collapse: collapse;">';


// add header rows
strTable += '<tr><th>VM Name</th><th>Resource Group</th><th>OS Type</th><th>Status</th><th>Size</th></tr>';


// parse JSON and put results into table
var parsedResults = JSON.parse(jsonString).results;
for (var i = 0; i < parsedResults.length; i++) {
         strTable += '<tr>';
         strTable += '<td>' + parsedResults[i].vmName + '</td>';
         strTable += '<td>' + parsedResults[i].resourceGroup + '</td>';
         strTable += '<td>' + parsedResults[i].osType + '</td>';
         strTable += '<td>' + parsedResults[i].status + '</td>';
         strTable += '<td>' + parsedResults[i].size + '</td>';
         strTable += '</tr>';
}         


strTable += '</table>';


// then set value to the dynamic table string
g_form.setValue('variable', strTable);

[fisfreak]

@fredflintstone thanks for your reply. I am now able to generate the table dynamically using the above code, And now my catalog item looks this.

I want to keep only the table and remove everything else around it. is that possible to achieve ??

Like this

Thanks,

Krishna

[fredflintstone]

It looks like it is an HTML variable?   If so, you can edit the "create roles" and "write roles" fields on the variable and add the 'nobody' role to them.   That way it will display just the table (only users with the 'nobody' role will be able to edit/create content in the variable, and nobody has that role ).   This works for HTML and macro variables, if I recall correctly.

[fisfreak]

fredflintstone thank you so much, it really helped me