Use following script to create filter like above. We use Glide ajax to fetch some table records from the script include.
<?xml version="1.0" encoding="utf-8" ?>
<j:jelly trim="false" xmlns:j="jelly:core" xmlns:g="glide" xmlns:j2="null" xmlns:g2="null">
<script>
var arr = [];
function campusId(selectNumber){
arr[0] = selectNumber;
var ga = new GlideAjax('building');
ga.addParam('sysparm_name','test');
ga.addParam('sysparm_user_name',arr[0]);
ga.getXML(HelloWorldParse);
function HelloWorldParse(response) {
var answer = response.responseXML.documentElement.getAttribute("answer");
var a = JSON.parse(answer);
function removeOptions(selectElement) {
var i, L = selectElement.options.length - 1;
for(i = L; i >= 0; i--) {
selectElement.remove(i);
}
}
removeOptions(document.getElementById('selectBuilding'));
var selectopt = document.getElementById('selectBuilding');
selectopt.innerHTML += '<option>'+"Select Building"+'</option>';
for(var i =0; i< a.length; i++){
var opt = a[i];
selectopt.innerHTML += '<option>'+opt+'</option>';
}
}
}
function buildingId(selecctNumber1){
arr[1] = selecctNumber1;
var ga = new GlideAjax('floor');
ga.addParam('sysparm_name','test');
ga.addParam('sysparm_user_name',arr[1]);
ga.getXML(HelloWorldParse);
function HelloWorldParse(response) {
var answer = response.responseXML.documentElement.getAttribute("answer");
var a = JSON.parse(answer);
function removeOptions(selectElement) {
var i, L = selectElement.options.length - 1;
for(i = L; i >= 0; i--) {
selectElement.remove(i);
}
}
removeOptions(document.getElementById('selectFloor'));
var selectopt = document.getElementById('selectFloor');
selectopt.innerHTML += '<option>'+"Select Floor"+'</option>';
for(var i =0; i< a.length; i++){
var opt = a[i];
selectopt.innerHTML += '<option>'+opt+'</option>';
}
}
}
function floorId(selecctNumber2){
arr[2] = selecctNumber2;
}
function spaceTypeId(selecctNumber3){
arr[3] = selecctNumber3;
}
var ga = new GlideAjax('SpaceTypeSelect');
ga.addParam('sysparm_name','test');
ga.getXML(HelloWorldParse);
function HelloWorldParse(response) {
var answer = response.responseXML.documentElement.getAttribute("answer");
var a = JSON.parse(answer);
var selectopt = document.getElementById('selectSpaceType');
for(var i =0; i< a.length; i++){
var opt = a[i];
selectopt.innerHTML += '<option>'+opt+'</option>';
}
}
var my_dashboardMessageHandler = new DashboardMessageHandler("FilterShortDescription");
function publishFilter () {
var filter_message = {};
filter_message.id = "FilterShortDescription";
filter_message.table = "sn_wsd_core_space";
filter_message.filter = "campus.name="+arr[0]+"^building.name="+arr[1]+"^floor.name="+arr[2]+"^location_type.name="+arr[3];
SNC.canvas.interactiveFilters.setDefaultValue({
id: filter_message.id,
filters: [filter_message]
}, false);
my_dashboardMessageHandler.publishFilter(filter_message.table, filter_message.filter);
}
function clearFilter() {
var filter_message = {};
filter_message.id = "FilterShortDescription";
filter_message.table = "sn_wsd_core_space";
filter_message.filter = "";
SNC.canvas.interactiveFilters.setDefaultValue({
id: filter_message.id,
filters: [filter_message]
}, false);
my_dashboardMessageHandler.removeFilter();
}
</script>
<g:evaluate var="jvar_log_user" object="true">
var campus = [];
var gr = new GlideRecord('sn_wsd_core_campus');
gr.addQuery('active',true);
gr.orderBy('name');
gr.query();
while(gr.next()){
campus.push(gr.name.toString());
}
campus;
</g:evaluate>
<div>
<label for="selectcampus">Select Campus:</label>
<select id="selectcampus" onchange="campusId(this.value);">
<option>Select Campus</option>
<j:forEach var="jvar_log_user" items="${campus}">
<option>${jvar_log_user}</option>
</j:forEach>
</select>
<label for="selectBuilding">Select Building:</label>
<select id="selectBuilding" onchange="buildingId(this.value);">
<option>Select Building</option>
</select>
<label for="selectFloor">Select Floor:</label>
<select id="selectFloor" onchange="floorId(this.value);">
<option>Select Floor</option>
</select>
<label for="selectSpaceType">Select Space Type:</label>
<select id="selectSpaceType" onchange="spaceTypeId(this.value);">
<option>Select Space Type</option>
</select>
</div>
<br></br>
<button type="button" onclick="publishFilter()">Apply Filter</button>
<button type="button" onclick="clearFilter()">Clear Filter</button>
</j:jelly>
Mark the above answer as helpful if your problem resolve.
Thank You !
