Reference field dependency in UI Page

Shankar Manohar
Mega Guru

Greetings Everyone!

  I have   a catalog item and have a classification Field( Variable) which is reference to custom table ( Classification). I have created a UI page in my Catalog Item with Group Roles and User ID.

  Now, the Group Role is reference to Custom Table ( Group) which has Group Roles tagged to Classification above ( Only two Classification, A & B).

Now, My requirement is If I choose A in my Classification Field,Only the roles tagged to A should be listed in my Group Role Field and If Chosen B, the roles that are tagged to B should be listed in my Group Role reference field.

    I have tried different option but no luck. Please let me know if there is something way we can achieve my requirement.

$5B313F746E4BCC9B.jpg

My HTML Code:

                    <TD><g:ui_reference name="group_role" query="u_classification=u_pgm_classification.value" id="Group_Role" table="u_pgm_group_role" completer="AJAXTableCompleter" columns="u_group_role" /></TD>                                                

              <TD><g:ui_reference name="ln_user" query="active=true^u_employee_type=SAPHR" id="ln_user" table="sys_user" completer="AJAXTableCompleter" columns="user_name" /></TD>

Corresponding Client Script:

var root = document.getElementById(r);

      var allRows = root.getElementsByTagName('tr');

      var cRow = allRows[1].cloneNode(true);

      var j = 0;

      for (j = 0; j < cRow.cells.length; j++) {

              if(j>0 && j!=4){

                      document.getElementById('fn_user').value = '';

                      document.getElementById('sys_display.fn_user').value = '';

                      document.getElementById('ln_user').value = '';

                      document.getElementById('ln_user').name = '';

                      document.getElementById('sys_display.ln_user').value = '';

              }

      }

      root.appendChild(cRow);

}

function deleteRow(r) {

      try {

              var table = document.getElementById(r);

              var rowCount = table.rows.length;

             

              for(var i=0; i<rowCount; i++) {

                      var row = table.rows[i];

                      var chkbox = row.cells[0].childNodes[0];

                      if(rowCount>2){

                              if(null != chkbox && true == chkbox.checked) {

                                      table.deleteRow(i);

                                      rowCount--;

                                      i--;

                              }

                      }

              }

      }

      catch(e) {

              alert(e);

      }

}

1 ACCEPTED SOLUTION

Hi Ankur,



Apologies for the delay in response. I tried in my personal instance and its not working as expected. Would you be able to check mine if I share my creds?



Pls confirm. I will mail the details..



Thanks


Shan


View solution in original post

15 REPLIES 15

Hi Shankar,



So the reference field is in UI page and the value you want to get is a variable on catalog item and not present in the ui page. So you can use g_form.getValue() in client script of UI page and set the filter condition for <g:ui_reference> as per that.



Mark Correct if this solves your issue and also hit Like and Helpful if you find my response worthy based on the impact.


Thanks


Ankur


Regards,
Ankur
Certified Technical Architect  ||  9x ServiceNow MVP  ||  ServiceNow Community Leader

Ankur,




Actually, it works the other way Ankur, Please see my first post. When my Catalog Variable is selected, then the reference field in UI page should list the values accordingly. So writing a Client Script didn't work in this case.



  Please let me know if you can build the code for this scenario and let me know. I have been struggling with this for days.




Thanks much!



Regards


Shan


Hi Shankar,



I will check and let you know



Regards


Ankur


Regards,
Ankur
Certified Technical Architect  ||  9x ServiceNow MVP  ||  ServiceNow Community Leader

Hi Shankar,



I have tried in my demo instance and it is working fine now.


Example below should help you and replicate as per your requirement



1) Catalog variable reference type which refers to groups table name as 'group'


2) one more variable of type ui page for users. so users will be shown belonging to the above group only



One more enhancement is that user should not set the users unless and until group is selected. This avoids the case where user selects the user lookup before selecting the groups lookup. So to achieve this I am making users lookup readonly and once make it readonly false when group is selected



Also whenever group is cleared out users lookup is made readonly



following components:


1) client script onChange of group



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


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


           


            if(newValue == ''){


                    makeReadonly(); // if group cleared out call this function of ui page client script to make it readonly


            }


          return;


    }


      setUsersFromGroup(newValue); // call this method to set the reference qualifier of the users lookup and also send newValue to this method


}



2) ui page



HTML Section


<?xml version="1.0" encoding="utf-8" ?>


<j:jelly trim="false" xmlns:j="jelly:core" xmlns:g="glide" xmlns:j2="null" xmlns:g2="null">


<html>


      <body onload="makeReadonly()">


  Users: <g:ui_reference name="userRecords" id="userRecords" table="sys_user" completer="AJAXTableCompleter"/>


             


      </body>


      </html>


</j:jelly>



Client Script


function makeReadonly(){


     


      var a= document.getElementById('sys_display.userRecords');


      a.setAttribute('disabled','true');


      var b=document.getElementById('lookup.userRecords');


      b.setAttribute('disabled','true');


      document.getElementById('sys_display.userRecords').value = '';


      document.getElementById('userRecords').value = '';


}


     


      function setUsersFromGroup(groupSysId){


             


              var userArray = [];


              var gr = new GlideRecord("sys_user_grmember");


              gr.addQuery("group", groupSysId);


              gr.query();


              while (gr.next()) {


                      userArray.push(gr.user.toString());


              }


              var UserLookUp = gel('lookup.userRecords');


             


              UserLookUp.setAttribute('onclick',"mousePositionSave(event); reflistOpen( 'userRecords', 'not', 'sys_user', '', 'false','QUERY:active=true',           'sys_idIN" + userArray+ "', '')");


             


              var a = gel('sys_display.userRecords');


              //a.setAttribute('disabled',false);


             


              a.removeAttribute("disabled");


             


              var b = gel('lookup.userRecords');


              //b.setAttribute('disabled',false);


              b.removeAttribute("disabled");


             


      }



Kindly endorse as well if this helps you.


How to Endorse Content



Mark Correct if this solves your issue and also hit Like and Helpful if you find my response worthy based on the impact.


Thanks


Ankur


Regards,
Ankur
Certified Technical Architect  ||  9x ServiceNow MVP  ||  ServiceNow Community Leader

Hi Shankar,



Any update on this?


Can you mark my answer as correct, helpful and hit like if you were able to achieve the requirement. This helps in removing this question from unanswered list and helps users to learn from your thread. Thanks in advance.



Regards


Ankur


Regards,
Ankur
Certified Technical Architect  ||  9x ServiceNow MVP  ||  ServiceNow Community Leader