Populate a Drop-Down from Catalog Client Script

appstorm
Tera Contributor

I am aware of a way to populate a single-line text variable using a catalog client script and SI.  However, is there a way to populate a drop-down choice dynamically using the same method?  We are wanting to eventually bring in data using an API and populate a drop-down on the fly with a list of courses, when a user logs-in.  Since a drop-down uses a list of multiple choices manually entered when the variable is created, I wasn't sure if this data could be populated dynamically or not.

1 ACCEPTED SOLUTION

Sandeep Rajput
Tera Patron
Tera Patron

@appstorm You can build the choices for your drop-down/select box on the fly using an onLoad Client script and GlideAjax call to a server side script include. You can use the following code to add Option in the client script.

g_form.addOption('priority', '6', '6 - Really Low');

 

Here is the link to official documentation https://developer.servicenow.com/dev.do#!/reference/api/washingtondc/client/c_GlideFormAPI#r_GF-AddO...

 

View solution in original post

10 REPLIES 10

ShubhamGarg
Kilo Sage

Hello @appstorm ,

Yes, this is possible.

Basis on the response you return from Script Include function, you can use addOption, removeOption & clearOptions function of GlideForm (g_form) to add, remove or clear the drop-down values of any given variable.

It will work.

 

If my response helps you in any way, kindly mark this as Accepted Solution/Helpful and help in closing this thread.

Regards,

Shubham

Manoj R Zete
Tera Expert

Hi @appstorm 

Yes, it is possible to dynamically populate a drop-down choice in a ServiceNow catalog item using a catalog client script and a Scripted REST API. However, unlike single-line text variables, drop-down fields (choice variables) are usually static and are defined when you create the catalog item. To dynamically populate a drop-down list based on external data (e.g., from an API)

Approach:

  1. Create a Lookup Script Include or Scripted REST API: This will fetch data (like course names) from your external API.

  2. Use a Catalog Client Script: The client script will make an AJAX call to the Script Include or Scripted REST API, fetch the data, and populate the drop-down dynamically.

    If my response helps you in any way, kindly mark this as Accepted Solution/Helpful and help in closing this thread.

    Regards,

    Manoj



Sandeep Rajput
Tera Patron
Tera Patron

@appstorm You can build the choices for your drop-down/select box on the fly using an onLoad Client script and GlideAjax call to a server side script include. You can use the following code to add Option in the client script.

g_form.addOption('priority', '6', '6 - Really Low');

 

Here is the link to official documentation https://developer.servicenow.com/dev.do#!/reference/api/washingtondc/client/c_GlideFormAPI#r_GF-AddO...

 

Thank you!  In regards to my code for a single-line variable, would I just replace the g_form component I used for console testing with the line, above?

 

function onLoad(control, oldValue, newValue, isLoading, isTemplate) {
// function onChange(control, oldValue, newValue, isLoading, isTemplate) {
    if (isLoading || newValue === '') {
        return;
    }

    // var user = g_form.getValue('u_user');
    var user = g_user.userID;
    //Call script include
    var ga = new GlideAjax('global.sampleUtils');   //Scriptinclude
    ga.addParam('sysparm_name', 'getUserDetails'); //Method
    ga.addParam('userId',user); //Parameters
    ga.getXMLAnswer(getResponse);
    
    function getResponse(response){
        console.log("TESTING " + response);
        console.log("TESTING " + response.mobile_phone.toString());
        var res = JSON.parse(response);
        
        g_form.setValue('u_test_string',response.mobile_phone.toString());
    }
    
}

 

SI:

var sampleUtils = Class.create();
sampleUtils.prototype = Object.extendsObject(AbstractAjaxProcessor, {

    getUserDetails: function(){
        gs.addInfoMessage('script include triggered');
        
        var userId = this.getParameter('userId');
            gs.addInfoMessage('user scr--'+userId);
        obj = {};

    var grSysUser = new GlideRecord('sys_user');
    if (grSysUser.get(userId)) {
        obj.mobile_phone =  grSysUser.getValue('mobile_phone');
        obj.email =  grSysUser.getValue('email');
        // obj.user_id = grSysUser.getValue('user_id');
    }
    gs.addInfoMessage(obj+JSON.stringify(obj));
    return JSON.stringify(obj);
    },

    type: 'sampleUtils'
});