String Search Custom Interactive Filter - Issue with adding an Apply button

[bhicks32]

Hello,

 I have built a String Search Custom Interactive Filter referencing from this article: https://developer.servicenow.com/app.do#!/creatorcon/CCW1161/creatorcon_18_CCW1161_create_string_sea...

I would like to extend this custom dynamic content block and add an Apply button.  When I place the widget on the dashboard and type in text, the associated reports automatically filter and would like for the user to hit "Apply" before executing. Below is current code I am using:

Any help would be appreciated!

Thank you,

Ben

[Adam Stout]

You have to change the macro for this (I would copy it and add it to the new version).   That contains the JavaScript that fires the actual call for the filter.  It currently fires onChange.  You'll need to add an apply button and fire the event onClick.

[bhicks32]

I have added the Apply button to the macro but unsure where to insert the onClick behavior in the macro.  I tested changing the ${jvar_name}_text.change(function() to .click but that changed it to refresh the widgets on every click.  Below is the macro code I am using:

<?xml version="1.0" encoding="utf-8" ?>
<j:jelly trim="false" xmlns:j="jelly:core" xmlns:g="glide" xmlns:j2="null" xmlns:g2="null">

<div id="${jvar_name}_if_display" class="form-horizontal" style="margin:0 10px 15px;">
<input id='${jvar_name}_if_text' class="form-control widget-content" value="" />
</div>
<div id="${jvar_name}_mapping" style="display: none">${jvar_mapping}</div>
<div class="buttondiv">
<input id="my_button" class="btn btn-primary" value="Apply" /> </div>
<script>

var tables${jvar_name} = JSON.parse($j("#${jvar_name}_mapping").text());
console.log(tables${jvar_name});

// load default filters
window.SNC.canvas.interactiveFilters.fetchDefaultValues(SNC.canvas.layoutJson.canvasSysId);

// init widget information
var if_obj${jvar_name} = $j("#${jvar_name}_if_display");
//Get Unique id for publisher
var if_widgetId${jvar_name} = if_obj${jvar_name}.closest(".grid-widget-content")[0].getAttribute("data-original-widget-sysid");

console.log('Widget ID: ' + if_widgetId${jvar_name});

// init DashboardMessageHandler
var ${jvar_name}DMH = new DashboardMessageHandler(if_widgetId${jvar_name});

var ${jvar_name}_text = $j('#${jvar_name}_if_text');
// handle the field changes
function bentest(){
${jvar_name}_text.change(function()
}
{
var filterObj = {id: if_widgetId${jvar_name}, filters: []};
if (${jvar_name}_text.val().length > 0) {
for(var t = 0; t &lt; tables${jvar_name}.length; t++)
{
console.log('adding filter for table: ' + tables${jvar_name}[t].table);
filterObj.filters.push({
table: tables${jvar_name}[t].table,
filter: tables${jvar_name}[t].filterPrepend + ${jvar_name}_text.val() + tables${jvar_name}[t].filterAppend
});
}

console.log(filterObj);
// add the filter
${jvar_name}DMH.publishMessage(filterObj.filters);
// set the default value for next reload
window.SNC.canvas.interactiveFilters.setDefaultValue(filterObj, true);
} else {
${jvar_name}DMH.removeFilter();
}
});
</script>
</j:jelly>

[Adam Stout · Accepted solution]

Change the line with:

${jvar_name}_text.change(

to reference the click of your new button (my_button).  I also wouldn't call it that since you could have a collision.  Perhaps set the ID for the button to

${jvar_name}_apply

Then the function would be

${jvar_name}_apply.click (

Any chance you are coming to K19?  There is a session on custom interactive filter there (the updated version of the lab you referenced above).

[bhicks32]

Appreciate it Adam! I will not be attending this year, however another one of my teammates will be there and will be sure to pass the info along.