Hi @Eddie5
Please try like below
With the standard Interactive Filters, it is not possible to create a filter for a string field
Create a new Content Block: content_block_programmatic > New
For this example, the cmn_location table is used as a base table. The goal is to have the 'City' field as an interactive filter(in you case you can choose Region field)
<j:jelly trim="false" xmlns:j="jelly:core" xmlns:g="glide" xmlns:j2="null" xmlns:g2="null">
<link href="//cdnjs.cloudflare.com/ajax/libs/select2/4.0.1/css/select2.min.css" rel="stylesheet" />
<style type="text/css">
.js-example-basic-single_businessprocess{
width:300px;
}
.js-example-basic-single_businessprocess option{
width:300px;
}
.submit {
background-color: #bbb;
padding: .5em;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
border-radius: 6px;
color: #fff;
font-family: 'Oswald';
font-size: 18px;
text-decoration: none;
border: none;
}
.submit:hover {
border: none;
background: blue;
box-shadow: 0px 0px 1px #777;
}
/* The container */
.container {
display: block;
position: relative;
padding-left: 35px;
margin-bottom: 8px;
cursor: pointer;
font-size: 15px;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
/* Hide the browser's default checkbox */
.container input {
position: absolute;
opacity: 0;
cursor: pointer;
height: 1px;
width: 0;
}
/* Create a custom checkbox */
.checkmark {
position: absolute;
top: 0;
left: 0;
height: 25px;
width: 25px;
background-color: #eee;
}
/* On mouse-over, add a grey background color */
.container:hover input ~ .checkmark {
background-color: #ccc;
}
/* When the checkbox is checked, add a blue background */
.container input:checked ~ .checkmark {
background-color: #2196F3;
}
/* Create the checkmark/indicator (hidden when not checked) */
.checkmark:after {
content: "";
position: absolute;
display: none;
}
/* Show the checkmark when checked */
.container input:checked ~ .checkmark:after {
display: block;
}
/* Style the checkmark/indicator */
.container .checkmark:after {
left: 9px;
top: 5px;
width: 5px;
height: 10px;
border: solid white;
border-width: 0 2px 2px 0;
-webkit-transform: rotate(45deg);
-ms-transform: rotate(45deg);
transform: rotate(45deg);
}
</style>
<body>
<script>
$j(document).ready(function() {$j(".js-example-basic-single_businessprocess").select2();});
var myresultphaseeee_dashboardMessageHandler = new DashboardMessageHandler("009a8122877bf810a8290f2d8bbb35b1");
function business_process(selectObject) {
var filter_1='';
var filter_ree1;
var selected = [];
for (var option of document.getElementById('shl_business_process').options) {
if (option.selected) {
selected.push(option.value);
if(filter_1==''){
filter_1='buspro_u_business_process.name='+option.value;
}else{
filter_1+='^ORbuspro_u_business_process.name='+option.value;
}
}
}
if(selectObject.value=='all'){
filter_ree1= myresultphaseeee_dashboardMessageHandler.getFilterMessage('u_appservice_location_busapp_process','');
}
else{
filter_ree1= myresultphaseeee_dashboardMessageHandler.getFilterMessage('u_appservice_location_busapp_process',filter_1);
}
SNC.canvas.interactiveFilters.setDefaultValue({ id: "009a8122877bf810a8290f2d8bbb35b1", filters: [filter_ree1]}, false);
myresultphaseeee_dashboardMessageHandler.publishMessage([filter_ree1]);
}
<![CDATA[
function clearall(uchk) {
myresultphaseeee_dashboardMessageHandler_businessprocess.removeFilter();
for(var i=0; i < uchk.length; i++){
uchk[i].checked = false;
}
document.querySelectorAll('input[name=dom]:checked') = false;
}
]]>
</script>
<!--Using Jelly while test,
loop through the retrieved images and display them in the carousel-->
<g:evaluate var="jvar_gr" object="true">
var businessprocess = new GlideAggregate('cmn_location');
businessprocess.groupBy('city');
businessprocess.query();
businessprocess;
</g:evaluate>
<select class="js-example-basic-single_businessprocess" id="shl_business_process" multiple="multiple" onchange="business_process(this)">
<option value="all">all</option>
<j:while test="${jvar_gr.next()}">
<option value="${businessprocess.sys_id}">${businessprocess.city}</option>
</j:while>
</select>
</body>
</j:jelly>
add this interactive filter to dashaboard
If my response proves useful, please indicate its helpfulness by selecting "Accept as Solution" and " Helpful."
Thanks,
BK
@Bhavya11 I have the same requirement and came across your post. I tried this as outlined but when I added it to a dashboard and select a city nothing happened (the data in the report did not change). see screen shot
Hi @GChanner
Can you try below way hope this will work for you.
Create a new Content Block: content_block_programmatic > New
<?xml version="1.0" encoding="utf-8" ?>
<j:jelly trim="false" xmlns:j="jelly:core" xmlns:g="glide" xmlns:j2="null" xmlns:g2="null">
<style></style>
<script>
var my_dashboardMessageHandler = new DashboardMessageHandler("FilterCity");
function publishFilter (searchTerm) {
var filter_message = {};
filter_message.id = "FilterCity";
filter_message.table = "cmn_location";
if (searchTerm == ""){
clearFilter();
}
else {
filter_message.filter = "city="+ searchTerm;
}
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 = "FilterCity";
filter_message.table = "cmn_location";
filter_message.filter = "";
SNC.canvas.interactiveFilters.setDefaultValue({
id: filter_message.id,
filters: [filter_message]
}, false);
my_dashboardMessageHandler.removeFilter();
}
</script>
<g:evaluate var="jvar_location" object="true" jelly="true">
var grLoc = new GlideAggregate('cmn_location');
grLoc.addAggregate('count'); //Count aggregate (only necessary for a count of items of each city)
grLoc.orderByAggregate('count'); //Count aggregate ordering
grLoc.groupBy('city'); //Group aggregate by the 'city' field
grLoc.query();
grLoc;
</g:evaluate>
<select name="city" id="searchTerm" onchange="publishFilter(this.value);">
<j:while test="${jvar_location.next()}">
<option value="${HTML:jvar_location.getValue('city')}">${HTML:jvar_location.getValue('city')}</option>
</j:while>
</select>
</j:jelly>
Add the interactive filter to the dashboard
Don't forget to check "Follow interactive filter" on the target report.
After everything filter will work
References:
https://www.servicenow.com/community/developer-forum/string-interactive-filter/m-p/2425045
If my response proves useful, please indicate its helpfulness by selecting "Accept as Solution" and " Helpful."
Thanks,
BK
