Has Anyone created a dynamic ricktext label for a catalog item that uses a catalog client script?

[Community Alums]

I have a need to build a dynamic table that will show up on a Catalog item.

I have a table that is used to populate the table.  I was looking at some information out on the web and found that this could be done, but not having any luck getting it to produce the results.

I have a Rich Text Label named: efc_access_table that I want the script to populate.

I am using the code here for the Catalog Client Script:  But it's not populating anything.  The Catalog client script is set for onLoad for the catalog item and I'm not sure why it's not populating

function onLoad() {
    // You can replace 'your_table_name' with the actual table you want to query
    var gr = new GlideRecord('u_efc_choice');
	gr.query();

    // Create the HTML for the table dynamically
    var tableHtml = '<style>';
    tableHtml += 'table { width: 100%; border-collapse: collapse; }';
    tableHtml += 'th, td { padding: 8px; text-align: left; border: 1px solid #ddd; }';
    tableHtml += 'tr:nth-child(even) { background-color: #f2f2f2; }';
    tableHtml += 'tr:nth-child(odd) { background-color: #ffffff; }';
    tableHtml += '</style>';
    tableHtml += '<table>';
    tableHtml += '<thead><tr><th>Security Group</th><th>Description</th><th>Approver1</th><th>Approver2></th><th>Approver 3</th></tr></thead>';
    tableHtml += '<tbody>';

    // Loop through the records and add rows to the table
    var rowCount = 0;
    while (gr.next()) {
        tableHtml += '<tr>';
        tableHtml += '<td>' + gr.getValue('u_security_group') + '</td>';
        tableHtml += '<td>' + gr.getValue('u_description') + '</td>';
        tableHtml += '<td>' + gr.getValue('u_approver1.name') + '</td>';
		tableHtml += '<td>' + gr.getValue('u_approver2.name') + '</td>';
		tableHtml += '<td>' + gr.getValue('u_approver3.name') + '</td>';
        tableHtml += '</tr>';
        rowCount++;
    }

    tableHtml += '</tbody>';
    tableHtml += '</table>';

    // Inject the table HTML into the Rich Text field (e.g., with document.getElementById)
    g_form.setValue('efc_access_table', tableHtml);  
}

 
Has anyone created one of these that could shed some light on this please?

[Community Alums]

Could you help me out with the code on this. I've never done this and am still learning. Would be a great opportunity to learn something 🙂

[Community Alums · Accepted solution]

I was able to solve me own problem, I was using the g_form.setValue() function but it ended up I needed g_form.setLabelOf() function.

[xiaix]

Amazingly brilliant.  Who'da thunk it.  I was using DOM to dynamically fill it in, but THANK YOU for finding g_form.getLabelOf() !!

Here's how I was doing it (notice where i commented out all the 'container' and used your setLabelOf()):

function onChange(control, oldValue, newValue, isLoading) {
    if (isLoading) {
        return;
    }

    function consoleWarn(msg) {
        /* eslint-disable-next-line no-console */
        console.warn(msg);
    }

    //var container = top.document.getElementById("current_access");
	g_form.hideAllFieldMsgs();
	g_form.setMandatory("extend_to_what_date", false);
	g_form.clearValue("extend_to_what_date");
	g_form.setVisible("extend_to_what_date", false);

    if (newValue == "") {
        //container.innerHTML = "";
		g_form.setLabelOf("current_access", "");
        return;
    }

    //container.innerHTML = "... loading current access";
	g_form.setLabelOf("current_access", "... loading current access");

    function _parseGlideAjaxAnswer_(response) {
        var answer = response.responseXML.documentElement.getAttribute("answer");
        try {
            var answerObj = JSON.parse(answer);
            if (!answerObj.u_access_granted || answerObj.u_access_granted.length === 0) {
                //container.innerHTML = "<em>No current access on file.</em>";
                g_form.setLabelOf("current_access", "<em>No current access on file.</em>");
                return;
            }
            var innerHTML = "The following access for " + answerObj.person_name + " will be extended:<br/><br/>" + "<ul>";
            answerObj.u_access_granted.forEach(function(item) {
                innerHTML += "<li>" + item.item_name + "</li>";
            });
            innerHTML += "</ul>";
            //container.innerHTML = innerHTML;
			g_form.setLabelOf("current_access", innerHTML);

			g_form.showFieldMsg('requested_for', answerObj.manager_name + ' will need to approve this request.', "info");
			g_form.setVisible("extend_to_what_date", true);
			g_form.setMandatory("extend_to_what_date", true);
			g_form.setValue("json_object", answer);
        } catch (e) {
            consoleWarn("Failed to parse access response: " + e.message);
            //container.innerHTML = "<em>Error loading current access.</em>";
            g_form.setLabelOf("current_access", "<em>Error loading current access.</em>");
        }
    }

    var ga = new GlideAjax('UserUtils');
    ga.addParam('sysparm_name', 'getSystemAccess');
    ga.addParam('sysparm_flag', 'extend_access');
    ga.addParam('sysparm_userSysID', newValue);
    ga.getXML(_parseGlideAjaxAnswer_);
}