Custom Interactive Filter - Get Value selected in dropdown

sivaranjani3894 · ‎07-04-2024

Hi All,

I have created a Custom Interactive filter for displaying Region values from User table, the requirement is to create use this as Level 1 filter and have Location values as Level 2 filter. I am trying to display location dropdown values based on "Region" selected and need help with Jelly code to get value selected under "Region" dropdown.

Any experts in Jelly script, please help.

Thanks,

Siva

Dnyaneshwaree · ‎07-05-2024

Hello @sivaranjani3894 ,

Please refer below code as a example and update it as per your requirement:

Jelly code:

<j:jelly xmlns:j="jelly:core" xmlns:g="jelly:com.glide.ui.tags">
  <g:ui_page>
    <g:ui_section>
      <table>
        <tr>
          <td>Region:</td>
          <td>
            <select id="regionSelect" onchange="updateLocations()">
              <option value="">--Select Region--</option>
              <g:query table="sys_user" order_by="region">
                <g:if test="region != ''">
                  <option value="${region}">${region}</option>
                </g:if>
              </g:query>
            </select>
          </td>
        </tr>
        <tr>
          <td>Location:</td>
          <td>
            <select id="locationSelect">
              <option value="">--Select Location--</option>
            </select>
          </td>
        </tr>
      </table>
    </g:ui_section>
  </g:ui_page>
</j:jelly>

Client side script:

function updateLocations() {
  var region = document.getElementById('regionSelect').value;
  var locationSelect = document.getElementById('locationSelect');
  
  // Clear existing options
  locationSelect.innerHTML = '<option value="">--Select Location--</option>';
  
  // Make an AJAX call to get locations based on the selected region
  if (region) {
    var ga = new GlideAjax('GetLocations');
    ga.addParam('sysparm_name', 'getLocationsByRegion');
    ga.addParam('sysparm_region', region);
    ga.getXMLAnswer(function(response) {
      var locations = JSON.parse(response);
      locations.forEach(function(location) {
        var option = document.createElement('option');
        option.value = location.sys_id;
        option.text = location.name;
        locationSelect.add(option);
      });
    });
  }
}

Script include:

var GetLocations = Class.create();
GetLocations.prototype = Object.extendsObject(AbstractAjaxProcessor, {
  getLocationsByRegion: function() {
    var region = this.getParameter('sysparm_region');
    var locations = [];
    
    if (region) {
      var locationGR = new GlideRecord('cmn_location');
      locationGR.addQuery('region', region);
      locationGR.query();
      
      while (locationGR.next()) {
        locations.push({
          sys_id: locationGR.getUniqueValue(),
          name: locationGR.getValue('name')
        });
      }
    }
    
    return new JSON().encode(locations);
  }
});

Please accept my solution if it works for you and thumps up to mark it as helpful.

Thank you!!

Please accept my solution if it works for you and thumps up to mark it as helpful.
Thank you!!

Dnyaneshwaree Satpute
Tera Guru

sivaranjani3894 · ‎07-10-2024

Hi @Dnyaneshwaree ,

Thanks for your response. I used the following code and it is working as expected.

My Custom Interactive Filter looks like:

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

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

<g:evaluate var="jvar_regiontypes" object="true" jelly="true">

var obj=[];

obj.push(["AMER","AMER"]);

obj.push(["APAC","APAC"]);

obj.push(["EMEA","EMEA"]);

obj;

</g:evaluate>

<p style="font-size:160%;"><b>Region</b></p>

<j:forEach var="jvar_regtype" items="${jvar_regiontypes}">

<option value="${jvar_regtype[0]}">${jvar_regtype[1]}</option>

</j:forEach>

</select>

<p style="font-size:160%;"><b>Location</b></p>

</select>

var <uniquemessagehandler_id> = new DashboardMessageHandler("unique_id");

function filterRegion() {

var selectedRegion = document.getElementById('filter_region').value;

console.log("@@@ Sel region -- ", selectedRegion);

getSites(selectedRegion);

}

function getSites(region) {

var ga = new GlideAjax('GetSitesAjax');

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

ga.addParam('sysparm_region', region);

ga.getXMLAnswer(function(response) {

var sites = JSON.parse(response);

populateSites(sites);

});

}

function populateSites(sites) {

var filterSite = document.getElementById('filter_site');

filterSite.innerHTML = '<option value="">All</option>';

sites.forEach(function(site) {

var option = document.createElement('option');

option.value = site.sys_id;

option.text = site.name;

filterSite.appendChild(option);

});

filterSite.dispatchEvent(new Event('change'));

}

function filterSite1() {

var filter_message = {};

var str_region = document.getElementById('filter_region').value;

var str_site = document.getElementById('filter_site').value;

filter_message.id = "unique_id";

console.log("@@@ Sel site", str_site);

var finalFilter_site;

if(str_site != ""){

finalFilter_site = [

{"table":"incident","filter":"caller_id.<regionfieldname>LIKE" + str_region + "^caller_id.location=" + str_site},

{"table":"sc_req_item","filter":"requested_for.<regionfieldname>LIKE" + str_region + "^caller_id.location=" + str_site},

{"table":"incident_sla","filter":"inc_caller_id.<regionfieldname>LIKE" + str_region + "^caller_id.location=" + str_site}

];

} else{

finalFilter_site = [

{"table":"incident","filter":"caller_id.<regionfieldname>LIKE" + str_region},

{"table":"sc_req_item","filter":"requested_for.<regionfieldname>LIKE" + str_region},

{"table":"incident_sla","filter":"inc_caller_id.<regionfieldname>LIKE" + str_region}

];

}

SNC.canvas.interactiveFilters.setDefaultValue({

id: filter_message.id,

filters: finalFilter_site

}, false);

<uniquemessagehandler_id>.publishMessage(finalFilter_site);

}

function clearFilter() {

document.getElementById('filter_region').value="";

document.getElementById('filter_site').value="";

var filter_clear;

var filter_message1 ={};

filter_message1.id = "unique_id";

filter_clear = [{"table":"incident","filter":""},

{"table":"sc_req_item","filter":""},

{"table":"incident_sla","filter":""}];

SNC.canvas.interactiveFilters.setDefaultValue({

id: filter_message1.id,

filters: filter_clear

}, false);

getSites("");

site_dashboardMessageHandler.removeFilter();

}

</script>

</j:jelly>

Script Include:

var GetSitesAjax = Class.create();

GetSitesAjax.prototype = Object.extendsObject(AbstractAjaxProcessor, {

getSites: function() {

var obj_site = [];

var region = this.getParameter('sysparm_region');

var site_option_filter;

if(region != ""){

site_option_filter = "<regionfieldname>ISNOTEMPTY^<regionfieldname>LIKE" + region;

}else

return JSON.stringify(obj_site);

var grLoc = new GlideRecord("cmn_location");

grLoc.orderBy("name");

grLoc.addEncodedQuery(site_option_filter);

grLoc.query();

while (grLoc.next()) {

obj_site.push({

name: grLoc.getValue('name'),

sys_id: grLoc.getUniqueValue()

});

}

return JSON.stringify(obj_site);

}

});

sivaranjani3894 · ‎07-10-2024

Above code will render 2 fields on your Dashboard "Region" and "Location" and filter your reports based on the values selected.