How to create a custom picker view for Location reference field on CMDB CI table

[PallaviT]

Can someone provide me the script logic to build custom category picker(As on Knowledge category reference field as shown in the attached image) on Location reference field on CMDB CI table. It should filter the locations based on Location type as L1 hierarchy. Currently the OOB one represents a custom tree picker view and we wanted to customise it so that the user can select based on Location type as L1 hierarchy.
I have gone through the existing UI Macros, UI page scripts for Knowledge category but not able to understand on how to modify it for Location type requirement. Any help would be highly appreciated.

Thanks in advance!!

[Community Alums]

Hi @PallaviT ,

You need to create a custom UI page and UI macro for this functionality.

UI Macro- name - custom_location_picker

<j:jelly xmlns:j="jelly:core" xmlns:g="glide" xmlns:ui="jelly:ui" xmlns:sys="jelly:xml">
  <g2:evaluate var="sys_id" expression="current.sys_id"/>
  <table>
    <tr>
      <td>
        <g:ui_reference 
          table="cmn_location" 
          name="location" 
          id="location" 
          query="location_type=L1">
        </g:ui_reference>
      </td>
      <td>
        <button type="button" class="btn btn-default" onclick="openLocationPicker()">Select Location</button>
      </td>
    </tr>
  </table>
  <script>
    function openLocationPicker() {
      var url = 'location_picker_page.do?sysparm_query=location_type=L1';
      var dialog = new GlideDialogWindow('glide_default_dialog', false, '60em');
      dialog.setTitle('Select Location');
      dialog.setPreference('sysparm_query', 'location_type=L1');
      dialog.setUrl(url);
      dialog.render();
    }
  </script>
</j:jelly>

UI Page- name - location_picker_page

<j:jelly xmlns:j="jelly:core" xmlns:g="glide" xmlns:ui="jelly:ui">
  <g2:evaluate var="query" expression="sys.params.sysparm_query"/>
  <table>
    <thead>
      <tr>
        <th>Location Name</th>
        <th>Location Type</th>
      </tr>
    </thead>
    <tbody>
      <g:forEach var="location" items="${gs.getRecord('cmn_location', query)}">
        <tr>
          <td><a href="javascript&colon;selectLocation('${location.sys_id}', '${location.name}')">${location.name}</a></td>
          <td>${location.location_type}</td>
        </tr>
      </g:forEach>
    </tbody>
  </table>
  <script>
    function selectLocation(sys_id, name) {
      window.opener.document.getElementById('location').value = sys_id;
      window.opener.document.getElementById('location_display').value = name;
      window.close();
    }
  </script>
</j:jelly>

You need to then include this in your form.

Then this should work.

If my response has resolved your query, please consider giving it a thumbs up ‌‌ and marking it as the correct answer‌‌!

Thanks & Regards,

Sanjay Kumar