How can I limit the choice list of a lookup select box variable based of the selection of another lookup select box variable?

Shant Cancik · ‎07-10-2017

I have two Lookup Select Box variables on a catalog item that reference to two columns on a specific table (Application Name and Permissions). These catalog item elements allow the requester to choose one Application Name and one Permission but have access to chose from all Application Names and Permissions that's ever been placed in that table's records.

This is a problem for me because not all applications have access to all types of permissions. I'd like the user to be able to select from all application names for the first select box, but I want the Permissions select box to be limited to the list of permissions that apply to the application selected in the first select box.

For example, the records in my table would be something like this:

1) Application Name: App 1, Permissions: Permission Type 1

2) Application Name: App 1, Permissions: Permission Type 2

3) Application Name: App 1, Permissions: Permission Type 3

4) Application Name: App 2, Permissions: Permission Type 4

5) Application Name: App 2, Permissions: Permission Type 5

I wouldn't want a user who selected App 2 in their first select box to be able to have the option to see Permission Types 1,2, or 3 in their second select box. Can anyone point me in the right direction for this? Would I use an onChange client script for this?

ccajohnson · ‎07-10-2017

This solution uses a client callable script include and a Catalog Client Script. I have modified my code to attempt to use your table and fields.

1. Script Include:

If you have a client callable script include that you use for your requests, you can fold it into this one. Otherwise, here is a sample that you can use:

Name: reqUtilsAjax

Client callable: true

Description: Custom Client Callable Script Include used with Catalog Requests

Script:

var reqUtilsAjax = Class.create();

reqUtilsAjax.prototype = Object.extendsObject(global.AbstractAjaxProcessor, {


       getPermType: function() {

               var menuArray = [];

               var sub = new GlideRecord('u_application_table');

               sub.addQuery('u_active', 'true');

               sub.addQuery('u_name', this.getParameter('sysparm_input'));

               sub.orderBy('u_permission_type');

               sub.query();

               while (sub.next()) {

                       menuArray.push(sub.u_permission_type.toString());

               }

               return menuArray.join('|');

       },


       type: 'reqUtilsAjax'

});

I used u_application_table as the table name, and u_name as the field name for the Application name since I believe this is a custom table that is not created in a custom application scope. I also use Active [u_active] to allow for records to be turned on and off without having to delete them.

2. Catalog Client Script:

I will use perm_type as the variable name to set. If this is something else, be sure to use that.

function onChange(control, oldValue, newValue, isLoading) {

       if (isLoading || newValue == '') {

               g_form.clearOptions('perm_type');

               g_form.addOption('perm_type', '', '-- None --');

               return;

       }

       g_form.setValue('perm_type', '');

       g_form.clearOptions('perm_type');

       var ga = new GlideAjax('reqUtilsAjax');

       ga.addParam('sysparm_name', 'getPermType');

       ga.addParam('sysparm_input', newValue);

       ga.getXML(buildMenu);

}


function buildMenu(response) {

       var answer = response.responseXML.documentElement.getAttribute("answer");

       var typeArray = answer.split('|');

       g_form.clearOptions('perm_type');

       g_form.addOption('perm_type', '', '-- None --');

       for (var i = 0; i < typeArray.length; i++) {

               g_form.addOption('perm_type', typeArray[i], typeArray[i]);

       }

}

Hopefully this will give you the sub-menus based upon the original menu selection. You can always test this using the JavaScript Executor [control]+[shift]+[j]. Just remember to set the value for newValue and comment out the onChange function:

var newValue = g_form.getValue('name'); //I am guessing that name is your variables name.

//function onChange(control, oldValue, newValue, isLoading) {

       if (isLoading || newValue == '') {

               g_form.clearOptions('perm_type');

               g_form.addOption('perm_type', '', '-- None --');

               return;

       }

       g_form.setValue('perm_type', '');

       g_form.clearOptions('perm_type');

       var ga = new GlideAjax('reqUtilsAjax');

       ga.addParam('sysparm_name', 'getPermType');

       ga.addParam('sysparm_input', newValue);

       ga.getXML(buildMenu);

//}


function buildMenu(response) {

       var answer = response.responseXML.documentElement.getAttribute("answer");

       var typeArray = answer.split('|');

       g_form.clearOptions('perm_type');

       g_form.addOption('perm_type', '', '-- None --');

       for (var i = 0; i < typeArray.length; i++) {

               g_form.addOption('perm_type', typeArray[i], typeArray[i]);

       }

}

View solution in original post

Shant Cancik · ‎07-10-2017

Can't thank you enough for this This is really helping me understand how these Ajax calls work as well. I'll follow up if I run into any trouble but thanks so much for the help!