Community Alums
Not applicable

Bonjour Community,

Recently I had received a requirement to display a read only table of the assets that are currently assigned to  the current logged in user. Something like this:

find_real_file.png

This can be achieved using HTML type of variable in Catalogs. In the below video, I have explained in detail how can we implement it and can bring data from any table.

Please mark this article HELPFUL if it helped you.

Cheers,

Hardit Singh

Please connect with me on:

YouTube

LinkedIn

Comments
gconway
Tera Contributor

If i set the field to read-only the HTML is not showing at all. I can confirm data is being added when not in read-only mode. Any thoughts why this is happening? 

Build name: Utah
Build date: 12-11-2023_1645
Build tag: glide-utah-12-21-2022__patch9-hotfix1-11-21-2023

rianayala78
Tera Contributor

Hello @gconway   I got through the same issue moving the read-only condition from the variable to a  catalog UI policy

rianayala78
Tera Contributor

Hello @gconway  I got through the same issue moving the read-only condition from the variable to a  catalog UI policy

gconway
Tera Contributor

Hi @rianayala78 

 

thanks for this idea. However it didn't work with these settings: 

gconway_0-1708355574284.png

 

gconway
Tera Contributor

Hi @rianayala78 

 

Thanks again, I got it working now. I had to add a condition for this to work

gconway_0-1708355765372.png

 

gconway
Tera Contributor

Hi all,
Does anyone know, how to make this table dynamic? So if I have dropdown field before this HTML table, and the user changes the selection, the HTML table results should be changed and filtered based on this previous selection? 
Thank you in advance!

gconway
Tera Contributor

My script include: 

 

 

var workspaceId;

function onLoad() {
    workspaceId = getParameterValue("workspace_id");
    if (workspaceId !== null) {
        getUserAssets(workspaceId);
		// prevent changing the selected AB2.0
        g_form.setDisabled('workspace_name', true);
    }

    // hide fields in vNet MRVS
    g_form.setDisplay('virtual_networks.cmdb_ci_vnet_sys_id', false);

    // register custom onChange handler to workspace_name 
	g_form.onUserChangeValue(handler);
}

var handler = function(fieldname, originalValue, newValue) {
    if (fieldname === 'workspace_name') {
        getUserAssets(newValue);
    }
};

var getAssetDetails = Class.create();
getAssetDetails.prototype = Object.extendsObject(AbstractAjaxProcessor, {
    getUserAssets: function (workspaceId) { // Accept workspaceId as parameter
        // Initialize a variable to store HTML table string
        var ci_tb = '<table style="width:75%" border="1px" cellspacing="1"><tr><th style="width:22%">Name</th><th style="width:22%">Region</th><th style="width:22%">Stage</th><th style="width:22%">FlowLogs Enabled</th><th style="width:22%">CI (intern)</th></tr>';
        
        // Query cmdb_ci_ip_network table with the selected workspace name
        var gr = new GlideRecord('cmdb_ci_ip_network');
        gr.addQuery('u_parent_ab', workspaceId); // Use workspaceId parameter
		//gr.addQuery('install_status', 1);
        gr.orderBy('name'); // Order the results by 'name'
        gr.query();
        
        // Loop through the query results and append data to the HTML table string
        while (gr.next()) {
            ci_tb += '<tr><td>' + gr.getValue('name') + '</td>';
            ci_tb += '<td>' + gr.getValue('u_azure_region') + '</td>';
            ci_tb += '<td>' + gr.getValue('u_azure_stage') + '</td>';
            ci_tb += '<td>' + gr.getValue('u_azure_flow_logs_enabled') + '</td>';
            ci_tb += '<td>' + gr.getUniqueValue() + '</td></tr>';
        }

        // Close the HTML table tag
        ci_tb += '</table>';
        
        // Return the HTML table string
        return ci_tb;
    },
    type: 'getAssetDetails'
});


function getParameterValue(name) {
    var url = top.location.href;
    var value = new URLSearchParams(url).get(name);
    if (value) {
        return value;
    }
    if (typeof GlideURL !== 'undefined' && !value) { // run only if GlideURL is available
        var gUrl = new GlideURL();
        gUrl.setFromCurrent();
        value = gUrl.getParam("sysparm_id");
        return value;
    }
    return null;
}

 

The Catalog Item Section in Question:

 

selection_vnet_html_table.png

 

Version history
Last update:
‎11-03-2021 12:49 AM
Updated by:
Community Alums