Date Range filter in a dashboard

[kavitha_cr]

Hi all,

I am looking to add date range filter on my dashboard , it should let me pick specific FROM & To date and based on the date selection the charts (widgets) data should be changed.

e.g. 6th March, 2021 as From date & 16th March, 2021 as To date. Based on the date selection my charts should be able to reflect the data.

Thanks,

Shilpa.

[NikEng1 · Accepted solution]

Hi, 

Try out the update set from pieter.goris in this thread. It will add a custom interactive filter type that you can add to your dashboard:

https://community.servicenow.com/community?id=community_question&sys_id=c11907e1db5cdbc01dcaf3231f96...

Once you've installed the update set you need to update it a bit since some functionality in dashboards have changed since the update set was created.

Navigate to System UI > Ui Macros. Open the macro "interactive_date_filter" and change what's in the XML-box to this (sorry for the long paste):

<?xml version="1.0" encoding="utf-8" ?>
<j:jelly trim="false" xmlns:j="jelly:core" xmlns:g="glide" xmlns:j2="null" xmlns:g2="null">
<j:if test="${RP.isPreview()}">
 <center>${gs.getMessage('No preview available')}</center>
</j:if> 
<style>
	#GwtDateTimePicker.drag_section_part .drag_section_picker .drag_section_header .drag_section_movearea {
		line-height: 1.42857;
	}
	.interactive_date_filter {
		margin: 4px 0px;
	}
	.interactive_date_filter .select2-container {
	    min-width: 180px;
		margin: 0 10px;
	}
</style>
<!-- Its just an demo widget which we are building, so all code is in one file, but for proper code separate out this in separate macros -->
<g:evaluate var="jvar_fields" jelly="true">
	var fields = "";
	var td = new GlideTableDescriptor("${jvar_table}");  
	var result = [];
	if("${jvar_field}" === "") {
		result = [{"id": "all",
			"text": "All"
		}];
	}
	var iterator = td.getSchemaList().iterator();
	while(iterator.hasNext()) {
		var current = iterator.next();           
		var compElm = new GlideCompositeElement(current.getName(), '${jvar_table}');
		var ed = compElm.getTargetED();
		if(ed.isDateType()){
			if("${jvar_field}" !== "" &amp;&amp; "${jvar_field}" == current.getName()) {
				result = [{"id": current.getName(),
					"text": current.getLabel()
				}];  
			}
			if("${jvar_field}" === "") {
				result.push({"id": current.getName(),
					"text": current.getLabel()
				});
			}
		}        
	}
	fields = JSON.stringify(result);
	fields;
</g:evaluate>

<j:if test="${!RP.isPreview()}">
	<form id="${jvar_uid}" class="form-inline interactive_date_filter">
		<input type="hidden" id="interactive_date_filter_feilds" value="${jvar_fields}" />
		<div class="form-group">
			<div class="fields-select form-control" title="From date">
			</div>
			<label class="control-label fields-select-label" style="padding: 7px;font-weight: 800;display:none;">
				
			</label>
		</div>
		<span class="filter-block">
		    <div class="form-group">
			  <select id="filerTableSelect" class="form-control" title="${gs.getMessage('Operator')}">
				  <option value="ON">${gs.getMessage('on')}</option>
				  <option value="NOTON">${gs.getMessage('not on')}</option>
				  <option val = "&lt;" value="lt">${gs.getMessage('before')}</option>
				  <option val = "&lt;=" value="lteq">${gs.getMessage('at or before')}</option>
				  <option val = "&gt;" value="gt">${gs.getMessage('after')}</option>
				  <option val = "&gt;=" value="gteq">${gs.getMessage('at or after')}</option>
				  <option value="BETWEEN">${gs.getMessage('between')}</option>
				  <option value="ISEMPTY">${gs.getMessage('is empty')}</option>
				  <option value="ISNOTEMPTY">${gs.getMessage('is not empty')}</option>
				  <option value="ANYTHING">${gs.getMessage('is anything')}</option>
			  </select>
		    </div>
		    <div class="form-group" other-block="">
			  <div class="fromSelect form-control" title="${gs.getMessage('Select Date')}" >
				 
			  </div>
		    </div>
			<div class="form-group" other-block="">
				<input id="${jvar_uid}-fromSelectDate" type="hidden" name="fromSelectDate" />
				<button type="button" onclick="new GwtDateTimePicker('${jvar_uid}-fromSelectDate', '$[gs.getDateFormat()]', false);" title="Choose date..." class="btn btn-default icon-calendar" style="margin-right: 1px; vertical-align: top;"></button>
			</div>
			<div class="form-group" between-block="" style="margin-left: 10px;display: none;">
				  <label class="control-label" style="padding: 7px;font-weight: 800;">${gs.getMessage('and')}</label>
			</div>
			<div class="form-group" between-block="" style="display: none;">
				<div class="toSelect form-control" title="${gs.getMessage('To date')}">
				</div>
				<input id="${jvar_uid}-toSelectDate" type="hidden" name="toSelectDate" />
				<button type="button" onclick="new GwtDateTimePicker('${jvar_uid}-toSelectDate', '$[gs.getDateFormat()]', false);" title="Choose date..." class="btn btn-default icon-calendar" style="margin-right: 1px; vertical-align: top;"></button>
			</div>
		</span>
	</form>
</j:if>
<script>
	(function() {
			var optionValues = {
			"ON_NOT_ON": [{
				"text": "${gs.getMessage('Today')}",
				"id": "Today@javascript:gs.daysAgoStart(0)@javascript:gs.daysAgoEnd(0)"
			}, {
				"text": "${gs.getMessage('Yesterday')}",
				"id": "Yesterday@javascript:gs.daysAgoStart(1)@javascript:gs.daysAgoEnd(1)"
			}, {
				"text": "${gs.getMessage('Tomorrow')}",
				"id": "Tomorrow@javascript:gs.daysAgoStart(-1)@javascript:gs.daysAgoEnd(-1)"
			}, {
				"text": "${gs.getMessage('This week')}",
				"id": "This week@javascript:gs.beginningOfThisWeek()@javascript:gs.endOfThisWeek()"
			}, {
				"text": "${gs.getMessage('Last week')}",
				"id": "Last week@javascript:gs.beginningOfLastWeek()@javascript:gs.endOfLastWeek()"
			}, {
				"text": "${gs.getMessage('Next week')}",
				"id": "Next week@javascript:gs.beginningOfNextWeek()@javascript:gs.endOfNextWeek()"
			}, {
				"text": "${gs.getMessage('This month')}",
				"id": "This month@javascript:gs.beginningOfThisMonth()@javascript:gs.endOfThisMonth()"
			}, {
				"text": "${gs.getMessage('Last month')}",
				"id": "Last month@javascript:gs.beginningOfLastMonth()@javascript:gs.endOfLastMonth()"
			}, {
				"text": "${gs.getMessage('Next month')}",
				"id": "Next month@javascript:gs.beginningOfNextMonth()@javascript:gs.endOfNextMonth()"
			}, {
				"text": "${gs.getMessage('Last 3 months')}",
				"id": "Last 3 months@javascript:gs.monthsAgoStart(3)@javascript:gs.endOfThisMonth()"
			}, {
				"text": "${gs.getMessage('Last 6 months')}",
				"id": "Last 6 months@javascript:gs.monthsAgoStart(6)@javascript:gs.endOfThisMonth()"
			}, {
				"text": "${gs.getMessage('Last 9 months')}",
				"id": "Last 9 months@javascript:gs.monthsAgoStart(9)@javascript:gs.endOfThisMonth()"
			}, {
				"text": "${gs.getMessage('Last 12 months')}",
				"id": "Last 12 months@javascript:gs.monthsAgoStart(12)@javascript:gs.endOfThisMonth()"
			}, {
				"text": "${gs.getMessage('This quarter')}",
				"id": "This quarter@javascript:gs.beginningOfThisQuarter()@javascript:gs.endOfThisQuarter()"
			}, {
				"text": "${gs.getMessage('Last quarter')}",
				"id": "Last quarter@javascript:gs.quartersAgoStart(1)@javascript:gs.quartersAgoEnd(1)"
			}, {
				"text": "${gs.getMessage('Last 2 quarters')}",
				"id": "Last 2 quarters@javascript:gs.quartersAgoStart(1)@javascript:gs.endOfThisQuarter()"
			}, {
				"text": "${gs.getMessage('Next quarter')}",
				"id": "Next quarter@javascript:gs.quartersAgoStart(-1)@javascript:gs.quartersAgoEnd(-1)"
			}, {
				"text": "${gs.getMessage('Next 2 quarters')}",
				"id": "Next 2 quarters@javascript:gs.quartersAgoStart(-1)@javascript:gs.quartersAgoEnd(-2)"
			}, {
				"text": "${gs.getMessage('This year')}",
				"id": "This year@javascript:gs.beginningOfThisYear()@javascript:gs.endOfThisYear()"
			}, {
				"text": "${gs.getMessage('Next year')}",
				"id": "Next year@javascript:gs.beginningOfNextYear()@javascript:gs.endOfNextYear()"
			}, {
				"text": "${gs.getMessage('Last year')}",
				"id": "Last year@javascript:gs.beginningOfLastYear()@javascript:gs.endOfLastYear()"
			}, {
				"text": "${gs.getMessage('Last 2 years')}",
				"id": "Last 2 years@javascript:gs.beginningOfLastYear()@javascript:gs.endOfThisYear()"
			}, {
				"text": "${gs.getMessage('Last 7 days')}",
				"id": "Last 7 days@javascript:gs.daysAgoStart(7)@javascript:gs.daysAgoEnd(0)"
			}, {
				"text": "${gs.getMessage('Last 30 days')}",
				"id": "Last 30 days@javascript:gs.daysAgoStart(30)@javascript:gs.daysAgoEnd(0)"
			}, {
				"text": "${gs.getMessage('Last 60 days')}",
				"id": "Last 60 days@javascript:gs.daysAgoStart(60)@javascript:gs.daysAgoEnd(0)"
			}, {
				"text": "${gs.getMessage('Last 90 days')}",
				"id": "Last 90 days@javascript:gs.daysAgoStart(90)@javascript:gs.daysAgoEnd(0)"
			}, {
				"text": "${gs.getMessage('Last 120 days')}",
				"id": "Last 120 days@javascript:gs.daysAgoStart(120)@javascript:gs.daysAgoEnd(0)"
			}, {
				"text": "${gs.getMessage('Current hour')}",
				"id": "Current hour@javascript:gs.hoursAgoStart(0)@javascript:gs.hoursAgoEnd(0)"
			}, {
				"text": "${gs.getMessage('Last hour')}",
				"id": "Last hour@javascript:gs.hoursAgoStart(1)@javascript:gs.hoursAgoEnd(1)"
			}, {
				"text": "${gs.getMessage('Last 2 hours')}",
				"id": "Last 2 hours@javascript:gs.hoursAgo(2)@javascript:gs.hoursAgo(0)"
			}, {
				"text": "${gs.getMessage('Current minute')}",
				"id": "Current minute@javascript:gs.minutesAgoStart(0)@javascript:gs.minutesAgoEnd(0)"
			}, {
				"text": "${gs.getMessage('Last minute')}",
				"id": "Last minute@javascript:gs.minutesAgoStart(1)@javascript:gs.minutesAgoEnd(1)"
			}, {
				"text": "${gs.getMessage('Last 15 minutes')}",
				"id": "Last 15 minutes@javascript:gs.minutesAgoStart(15)@javascript:gs.minutesAgoEnd(0)"
			}, {
				"text": "${gs.getMessage('Last 30 minutes')}",
				"id": "Last 30 minutes@javascript:gs.minutesAgoStart(30)@javascript:gs.minutesAgoEnd(0)"
			}, {
				"text": "${gs.getMessage('Last 45 minutes')}",
				"id": "Last 45 minutes@javascript:gs.minutesAgoStart(45)@javascript:gs.minutesAgoEnd(0)"
			}, {
				"text": "${gs.getMessage('One year ago')}",
				"id": "One year ago@javascript:gs.monthsAgo(12)@javascript:gs.endOfThisMonth()"
			}],
			"BEFORE": [{
				"text": "${gs.getMessage('Today')}",
				"id": "javascript:gs.daysAgoStart(0)"
			}, {
				"text": "${gs.getMessage('Yesterday')}",
				"id": "javascript:gs.daysAgoStart(1)"
			}, {
				"text": "${gs.getMessage('Tomorrow')}",
				"id": "javascript:gs.daysAgoStart(-1)"
			}, {
				"text": "${gs.getMessage('This week')}",
				"id": "javascript:gs.beginningOfThisWeek()"
			}, {
				"text": "${gs.getMessage('Last week')}",
				"id": "javascript:gs.beginningOfLastWeek()"
			}, {
				"text": "${gs.getMessage('Next week')}",
				"id": "javascript:gs.beginningOfNextWeek()"
			}, {
				"text": "${gs.getMessage('This month')}",
				"id": "javascript:gs.beginningOfThisMonth()"
			}, {
				"text": "${gs.getMessage('Last month')}",
				"id": "javascript:gs.beginningOfLastMonth()"
			}, {
				"text": "${gs.getMessage('Next month')}",
				"id": "javascript:gs.beginningOfNextMonth()"
			}, {
				"text": "${gs.getMessage('Last 3 months')}",
				"id": "javascript:gs.monthsAgoStart(3)"
			}, {
				"text": "${gs.getMessage('Last 6 months')}",
				"id": "javascript:gs.monthsAgoStart(6)"
			}, {
				"text": "${gs.getMessage('Last 9 months')}",
				"id": "javascript:gs.monthsAgoStart(9)"
			}, {
				"text": "${gs.getMessage('Last 12 months')}",
				"id": "javascript:gs.monthsAgoStart(12)"
			}, {
				"text": "${gs.getMessage('This quarter')}",
				"id": "javascript:gs.beginningOfThisQuarter()"
			}, {
				"text": "${gs.getMessage('Last quarter')}",
				"id": "javascript:gs.quartersAgoStart(1)"
			}, {
				"text": "${gs.getMessage('Next quarter')}",
				"id": "javascript:gs.quartersAgoStart(-1)"
			}, {
				"text": "${gs.getMessage('This year')}",
				"id": "javascript:gs.beginningOfThisYear()"
			}, {
				"text": "${gs.getMessage('Next year')}",
				"id": "javascript:gs.beginningOfNextYear()"
			}, {
				"text": "${gs.getMessage('Last year')}",
				"id": "javascript:gs.beginningOfLastYear()"
			}, {
				"text": "${gs.getMessage('Last 7 days')}",
				"id": "javascript:gs.daysAgoStart(7)"
			}, {
				"text": "${gs.getMessage('Last 30 days')}",
				"id": "javascript:gs.daysAgoStart(30)"
			}, {
				"text": "${gs.getMessage('Last 60 days')}",
				"id": "javascript:gs.daysAgoStart(60)"
			}, {
				"text": "${gs.getMessage('Last 90 days')}",
				"id": "javascript:gs.daysAgoStart(90)"
			}, {
				"text": "${gs.getMessage('Last 120 days')}",
				"id": "javascript:gs.daysAgoStart(120)"
			}, {
				"text": "${gs.getMessage('Current hour')}",
				"id": "javascript:gs.hoursAgoStart(0)"
			}, {
				"text": "${gs.getMessage('Last hour')}",
				"id": "javascript:gs.hoursAgoStart(1)"
			}, {
				"text": "${gs.getMessage('Last 2 hours')}",
				"id": "javascript:gs.hoursAgo(2)"
			}, {
				"text": "${gs.getMessage('Current minute')}",
				"id": "javascript:gs.minutesAgoStart(0)"
			}, {
				"text": "${gs.getMessage('Last minute')}",
				"id": "javascript:gs.minutesAgoStart(1)"
			}, {
				"text": "${gs.getMessage('Last 15 minutes')}",
				"id": "javascript:gs.minutesAgoStart(15)"
			}, {
				"text": "${gs.getMessage('Last 30 minutes')}",
				"id": "javascript:gs.minutesAgoStart(30)"
			}, {
				"text": "${gs.getMessage('Last 45 minutes')}",
				"id": "javascript:gs.minutesAgoStart(45)"
			}, {
				"text": "${gs.getMessage('One year ago')}",
				"id": "javascript:gs.monthsAgo(12)"
			}],
			"AT_OR_BEFORE": [{
				"text": "${gs.getMessage('Today')}",
				"id": "javascript:gs.daysAgoEnd(0)"
			}, {
				"text": "${gs.getMessage('Yesterday')}",
				"id": "javascript:gs.daysAgoEnd(1)"
			}, {
				"text": "${gs.getMessage('Tomorrow')}",
				"id": "javascript:gs.daysAgoEnd(-1)"
			}, {
				"text": "${gs.getMessage('This week')}",
				"id": "javascript:gs.endOfThisWeek()"
			}, {
				"text": "${gs.getMessage('Last week')}",
				"id": "javascript:gs.endOfLastWeek()"
			}, {
				"text": "${gs.getMessage('Next week')}",
				"id": "javascript:gs.endOfNextWeek()"
			}, {
				"text": "${gs.getMessage('This month')}",
				"id": "javascript:gs.endOfThisMonth()"
			}, {
				"text": "${gs.getMessage('Last month')}",
				"id": "javascript:gs.endOfLastMonth()"
			}, {
				"text": "${gs.getMessage('Next month')}",
				"id": "javascript:gs.endOfNextMonth()"
			}, {
				"text": "${gs.getMessage('Last 3 months')}",
				"id": "javascript:gs.monthsAgoStart(3)"
			}, {
				"text": "${gs.getMessage('Last 6 months')}",
				"id": "javascript:gs.monthsAgoStart(6)"
			}, {
				"text": "${gs.getMessage('Last 9 months')}",
				"id": "javascript:gs.monthsAgoStart(9)"
			}, {
				"text": "${gs.getMessage('Last 12 months')}",
				"id": "javascript:gs.monthsAgoStart(12)"
			}, {
				"text": "${gs.getMessage('This quarter')}",
				"id": "javascript:gs.endOfThisQuarter()"
			}, {
				"text": "${gs.getMessage('Last quarter')}",
				"id": "javascript:gs.quartersAgoEnd(1)"
			}, {
				"text": "${gs.getMessage('Last 2 quarters')}",
				"id": "javascript:gs.quartersAgoEnd(2)"
			}, {
				"text": "${gs.getMessage('Next quarter')}",
				"id": "javascript:gs.quartersAgoEnd(-1)"
			}, {
				"text": "${gs.getMessage('Next 2 quarters')}",
				"id": "javascript:gs.quartersAgoEnd(-2)"
			}, {
				"text": "${gs.getMessage('This year')}",
				"id": "javascript:gs.endOfThisYear()"
			}, {
				"text": "${gs.getMessage('Next year')}",
				"id": "javascript:gs.endOfNextYear()"
			}, {
				"text": "${gs.getMessage('Last year')}",
				"id": "javascript:gs.endOfLastYear()"
			}, {
				"text": "${gs.getMessage('Last 2 years')}",
				"id": "javascript:gs.beginningOfLastYear()"
			}, {
				"text": "${gs.getMessage('Last 7 days')}",
				"id": "javascript:gs.daysAgoStart(7)"
			}, {
				"text": "${gs.getMessage('Last 30 days')}",
				"id": "javascript:gs.daysAgoStart(30)"
			}, {
				"text": "${gs.getMessage('Last 60 days')}",
				"id": "javascript:gs.daysAgoStart(60)"
			}, {
				"text": "${gs.getMessage('Last 90 days')}",
				"id": "javascript:gs.daysAgoStart(90)"
			}, {
				"text": "${gs.getMessage('Last 120 days')}",
				"id": "javascript:gs.daysAgoStart(120)"
			}, {
				"text": "${gs.getMessage('Current hour')}",
				"id": "javascript:gs.hoursAgoEnd(0)"
			}, {
				"text": "${gs.getMessage('Last hour')}",
				"id": "javascript:gs.hoursAgoEnd(1)"
			}, {
				"text": "${gs.getMessage('Last 2 hours')}",
				"id": "javascript:gs.hoursAgo(2)"
			}, {
				"text": "${gs.getMessage('Current minute')}",
				"id": "javascript:gs.minutesAgoEnd(0)"
			}, {
				"text": "${gs.getMessage('Last minute')}",
				"id": "javascript:gs.minutesAgoStart(1)"
			}, {
				"text": "${gs.getMessage('Last 15 minutes')}",
				"id": "javascript:gs.minutesAgoStart(15)"
			}, {
				"text": "${gs.getMessage('Last 30 minutes')}",
				"id": "javascript:gs.minutesAgoStart(30)"
			}, {
				"text": "${gs.getMessage('Last 45 minutes')}",
				"id": "javascript:gs.minutesAgoStart(45)"
			}, {
				"text": "${gs.getMessage('One year ago')}",
				"id": "javascript:gs.monthsAgo(12)"
			}],
			"AFTER": [{
				"text": "${gs.getMessage('Today')}",
				"id": "javascript:gs.daysAgoEnd(0)"
			}, {
				"text": "${gs.getMessage('Yesterday')}",
				"id": "javascript:gs.daysAgoEnd(1)"
			}, {
				"text": "${gs.getMessage('Tomorrow')}",
				"id": "javascript:gs.daysAgoEnd(-1)"
			}, {
				"text": "${gs.getMessage('This week')}",
				"id": "javascript:gs.endOfThisWeek()"
			}, {
				"text": "${gs.getMessage('Last week')}",
				"id": "javascript:gs.endOfLastWeek()"
			}, {
				"text": "${gs.getMessage('Next week')}",
				"id": "javascript:gs.endOfNextWeek()"
			}, {
				"text": "${gs.getMessage('This month')}",
				"id": "javascript:gs.endOfThisMonth()"
			}, {
				"text": "${gs.getMessage('Last month')}",
				"id": "javascript:gs.endOfLastMonth()"
			}, {
				"text": "${gs.getMessage('Next month')}",
				"id": "javascript:gs.endOfNextMonth()"
			}, {
				"text": "${gs.getMessage('Last 3 months')}",
				"id": "javascript:gs.monthsAgoStart(3)"
			}, {
				"text": "${gs.getMessage('Last 6 months')}",
				"id": "javascript:gs.monthsAgoStart(6)"
			}, {
				"text": "${gs.getMessage('Last 9 months')}",
				"id": "javascript:gs.monthsAgoStart(9)"
			}, {
				"text": "${gs.getMessage('Last 12 months')}",
				"id": "javascript:gs.monthsAgoStart(12)"
			}, {
				"text": "${gs.getMessage('This quarter')}",
				"id": "javascript:gs.endOfThisQuarter()"
			}, {
				"text": "${gs.getMessage('Last quarter')}",
				"id": "javascript:gs.quartersAgoEnd(1)"
			}, {
				"text": "${gs.getMessage('Last 2 quarters')}",
				"id": "javascript:gs.quartersAgoEnd(2)"
			}, {
				"text": "${gs.getMessage('Next quarter')}",
				"id": "javascript:gs.quartersAgoEnd(-1)"
			}, {
				"text": "${gs.getMessage('Next 2 quarters')}",
				"id": "javascript:gs.quartersAgoEnd(-2)"
			}, {
				"text": "${gs.getMessage('This year')}",
				"id": "javascript:gs.endOfThisYear()"
			}, {
				"text": "${gs.getMessage('Next year')}",
				"id": "javascript:gs.endOfNextYear()"
			}, {
				"text": "${gs.getMessage('Last year')}",
				"id": "javascript:gs.endOfLastYear()"
			}, {
				"text": "${gs.getMessage('Last 2 years')}",
				"id": "javascript:gs.beginningOfLastYear()"
			}, {
				"text": "${gs.getMessage('Last 7 days')}",
				"id": "javascript:gs.daysAgoStart(7)"
			}, {
				"text": "${gs.getMessage('Last 30 days')}",
				"id": "javascript:gs.daysAgoStart(30)"
			}, {
				"text": "${gs.getMessage('Last 60 days')}",
				"id": "javascript:gs.daysAgoStart(60)"
			}, {
				"text": "${gs.getMessage('Last 90 days')}",
				"id": "javascript:gs.daysAgoStart(90)"
			}, {
				"text": "${gs.getMessage('Last 120 days')}",
				"id": "javascript:gs.daysAgoStart(120)"
			}, {
				"text": "${gs.getMessage('Current hour')}",
				"id": "javascript:gs.hoursAgoEnd(0)"
			}, {
				"text": "${gs.getMessage('Last hour')}",
				"id": "javascript:gs.hoursAgoEnd(1)"
			}, {
				"text": "${gs.getMessage('Last 2 hours')}",
				"id": "javascript:gs.hoursAgo(2)"
			}, {
				"text": "${gs.getMessage('Current minute')}",
				"id": "javascript:gs.minutesAgoEnd(0)"
			}, {
				"text": "${gs.getMessage('Last minute')}",
				"id": "javascript:gs.minutesAgoStart(1)"
			}, {
				"text": "${gs.getMessage('Last 15 minutes')}",
				"id": "javascript:gs.minutesAgoStart(15)"
			}, {
				"text": "${gs.getMessage('Last 30 minutes')}",
				"id": "javascript:gs.minutesAgoStart(30)"
			}, {
				"text": "${gs.getMessage('Last 45 minutes')}",
				"id": "javascript:gs.minutesAgoStart(45)"
			}, {
				"text": "${gs.getMessage('One year ago')}",
				"id": "javascript:gs.monthsAgo(12)"
			}],
			"AT_OR_AFTER": [{
				"text": "${gs.getMessage('Today')}",
				"id": "javascript:gs.daysAgoStart(0)"
			}, {
				"text": "${gs.getMessage('Yesterday')}",
				"id": "javascript:gs.daysAgoStart(1)"
			}, {
				"text": "${gs.getMessage('Tomorrow')}",
				"id": "javascript:gs.daysAgoStart(-1)"
			}, {
				"text": "${gs.getMessage('This week')}",
				"id": "javascript:gs.beginningOfThisWeek()"
			}, {
				"text": "${gs.getMessage('Last week')}",
				"id": "javascript:gs.beginningOfLastWeek()"
			}, {
				"text": "${gs.getMessage('Next week')}",
				"id": "javascript:gs.beginningOfNextWeek()"
			}, {
				"text": "${gs.getMessage('This month')}",
				"id": "javascript:gs.beginningOfThisMonth()"
			}, {
				"text": "${gs.getMessage('Last month')}",
				"id": "javascript:gs.beginningOfLastMonth()"
			}, {
				"text": "${gs.getMessage('Next month')}",
				"id": "javascript:gs.beginningOfNextMonth()"
			}, {
				"text": "${gs.getMessage('Last 3 months')}",
				"id": "javascript:gs.monthsAgoStart(3)"
			}, {
				"text": "${gs.getMessage('Last 6 months')}",
				"id": "javascript:gs.monthsAgoStart(6)"
			}, {
				"text": "${gs.getMessage('Last 9 months')}",
				"id": "javascript:gs.monthsAgoStart(9)"
			}, {
				"text": "${gs.getMessage('Last 12 months')}",
				"id": "javascript:gs.monthsAgoStart(12)"
			}, {
				"text": "${gs.getMessage('This quarter')}",
				"id": "javascript:gs.beginningOfThisQuarter()"
			}, {
				"text": "${gs.getMessage('Last quarter')}",
				"id": "javascript:gs.quartersAgoStart(1)"
			}, {
				"text": "${gs.getMessage('Next quarter')}",
				"id": "javascript:gs.quartersAgoStart(-1)"
			}, {
				"text": "${gs.getMessage('This year')}",
				"id": "javascript:gs.beginningOfThisYear()"
			}, {
				"text": "${gs.getMessage('Next year')}",
				"id": "javascript:gs.beginningOfNextYear()"
			}, {
				"text": "${gs.getMessage('Last year')}",
				"id": "javascript:gs.beginningOfLastYear()"
			}, {
				"text": "${gs.getMessage('Last 7 days')}",
				"id": "javascript:gs.daysAgoStart(7)"
			}, {
				"text": "${gs.getMessage('Last 30 days')}",
				"id": "javascript:gs.daysAgoStart(30)"
			}, {
				"text": "${gs.getMessage('Last 60 days')}",
				"id": "javascript:gs.daysAgoStart(60)"
			}, {
				"text": "${gs.getMessage('Last 90 days')}",
				"id": "javascript:gs.daysAgoStart(90)"
			}, {
				"text": "${gs.getMessage('Last 120 days')}",
				"id": "javascript:gs.daysAgoStart(120)"
			}, {
				"text": "${gs.getMessage('Current hour')}",
				"id": "javascript:gs.hoursAgoStart(0)"
			}, {
				"text": "${gs.getMessage('Last hour')}",
				"id": "javascript:gs.hoursAgoStart(1)"
			}, {
				"text": "${gs.getMessage('Last 2 hours')}",
				"id": "javascript:gs.hoursAgo(2)"
			}, {
				"text": "${gs.getMessage('Current minute')}",
				"id": "javascript:gs.minutesAgoStart(0)"
			}, {
				"text": "${gs.getMessage('Last minute')}",
				"id": "javascript:gs.minutesAgoStart(1)"
			}, {
				"text": "${gs.getMessage('Last 15 minutes')}",
				"id": "javascript:gs.minutesAgoStart(15)"
			}, {
				"text": "${gs.getMessage('Last 30 minutes')}",
				"id": "javascript:gs.minutesAgoStart(30)"
			}, {
				"text": "${gs.getMessage('Last 45 minutes')}",
				"id": "javascript:gs.minutesAgoStart(45)"
			}, {
				"text": "${gs.getMessage('One year ago')}",
				"id": "javascript:gs.monthsAgo(12)"
			}],
			"BETWEEN_FROM": [{
				"text": "${gs.getMessage('Today')}",
				"id": "javascript:gs.daysAgoStart(0)"
			}, {
				"text": "${gs.getMessage('Yesterday')}",
				"id": "javascript:gs.daysAgoStart(1)"
			}, {
				"text": "${gs.getMessage('Tomorrow')}",
				"id": "javascript:gs.daysAgoStart(-1)"
			}, {
				"text": "${gs.getMessage('This week')}",
				"id": "javascript:gs.beginningOfThisWeek()"
			}, {
				"text": "${gs.getMessage('Last week')}",
				"id": "javascript:gs.beginningOfLastWeek()"
			}, {
				"text": "${gs.getMessage('Next week')}",
				"id": "javascript:gs.beginningOfNextWeek()"
			}, {
				"text": "${gs.getMessage('This month')}",
				"id": "javascript:gs.beginningOfThisMonth()"
			}, {
				"text": "${gs.getMessage('Last month')}",
				"id": "javascript:gs.beginningOfLastMonth()"
			}, {
				"text": "${gs.getMessage('Next month')}",
				"id": "javascript:gs.beginningOfNextMonth()"
			}, {
				"text": "${gs.getMessage('Last 3 months')}",
				"id": "javascript:gs.monthsAgoStart(3)"
			}, {
				"text": "${gs.getMessage('Last 6 months')}",
				"id": "javascript:gs.monthsAgoStart(6)"
			}, {
				"text": "${gs.getMessage('Last 9 months')}",
				"id": "javascript:gs.monthsAgoStart(9)"
			}, {
				"text": "${gs.getMessage('Last 12 months')}",
				"id": "javascript:gs.monthsAgoStart(12)"
			}, {
				"text": "${gs.getMessage('This quarter')}",
				"id": "javascript:gs.beginningOfThisQuarter()"
			}, {
				"text": "${gs.getMessage('Last quarter')}",
				"id": "javascript:gs.quartersAgoStart(1)"
			}, {
				"text": "${gs.getMessage('Next quarter')}",
				"id": "javascript:gs.quartersAgoStart(-1)"
			}, {
				"text": "${gs.getMessage('This year')}",
				"id": "javascript:gs.beginningOfThisYear()"
			}, {
				"text": "${gs.getMessage('Next year')}",
				"id": "javascript:gs.beginningOfNextYear()"
			}, {
				"text": "${gs.getMessage('Last year')}",
				"id": "javascript:gs.beginningOfLastYear()"
			}, {
				"text": "${gs.getMessage('Last 7 days')}",
				"id": "javascript:gs.daysAgoStart(7)"
			}, {
				"text": "${gs.getMessage('Last 30 days')}",
				"id": "javascript:gs.daysAgoStart(30)"
			}, {
				"text": "${gs.getMessage('Last 60 days')}",
				"id": "javascript:gs.daysAgoStart(60)"
			}, {
				"text": "${gs.getMessage('Last 90 days')}",
				"id": "javascript:gs.daysAgoStart(90)"
			}, {
				"text": "${gs.getMessage('Last 120 days')}",
				"id": "javascript:gs.daysAgoStart(120)"
			}, {
				"text": "${gs.getMessage('Current hour')}",
				"id": "javascript:gs.hoursAgoStart(0)"
			}, {
				"text": "${gs.getMessage('Last hour')}",
				"id": "javascript:gs.hoursAgoStart(1)"
			}, {
				"text": "${gs.getMessage('Last 2 hours')}",
				"id": "javascript:gs.hoursAgo(2)"
			}, {
				"text": "${gs.getMessage('Current minute')}",
				"id": "javascript:gs.minutesAgoStart(0)"
			}, {
				"text": "${gs.getMessage('Last minute')}",
				"id": "javascript:gs.minutesAgoStart(1)"
			}, {
				"text": "${gs.getMessage('Last 15 minutes')}",
				"id": "javascript:gs.minutesAgoStart(15)"
			}, {
				"text": "${gs.getMessage('Last 30 minutes')}",
				"id": "javascript:gs.minutesAgoStart(30)"
			}, {
				"text": "${gs.getMessage('Last 45 minutes')}",
				"id": "javascript:gs.minutesAgoStart(45)"
			}, {
				"text": "${gs.getMessage('One year ago')}",
				"id": "javascript:gs.monthsAgo(12)"
			}],
			"BETWEEN_TO": [{
				"text": "${gs.getMessage('Today')}",
				"id": "javascript:gs.daysAgoEnd(0)"
			}, {
				"text": "${gs.getMessage('Yesterday')}",
				"id": "javascript:gs.daysAgoEnd(1)"
			}, {
				"text": "${gs.getMessage('Tomorrow')}",
				"id": "javascript:gs.daysAgoEnd(-1)"
			}, {
				"text": "${gs.getMessage('This week')}",
				"id": "javascript:gs.endOfThisWeek()"
			}, {
				"text": "${gs.getMessage('Last week')}",
				"id": "javascript:gs.endOfLastWeek()"
			}, {
				"text": "${gs.getMessage('Next week')}",
				"id": "javascript:gs.endOfNextWeek()"
			}, {
				"text": "${gs.getMessage('This month')}",
				"id": "javascript:gs.endOfThisMonth()"
			}, {
				"text": "${gs.getMessage('Last month')}",
				"id": "javascript:gs.endOfLastMonth()"
			}, {
				"text": "${gs.getMessage('Next month')}",
				"id": "javascript:gs.endOfNextMonth()"
			}, {
				"text": "${gs.getMessage('Last 3 months')}",
				"id": "javascript:gs.monthsAgoStart(3)"
			}, {
				"text": "${gs.getMessage('Last 6 months')}",
				"id": "javascript:gs.monthsAgoStart(6)"
			}, {
				"text": "${gs.getMessage('Last 9 months')}",
				"id": "javascript:gs.monthsAgoStart(9)"
			}, {
				"text": "${gs.getMessage('Last 12 months')}",
				"id": "javascript:gs.monthsAgoStart(12)"
			}, {
				"text": "${gs.getMessage('This quarter')}",
				"id": "javascript:gs.endOfThisQuarter()"
			}, {
				"text": "${gs.getMessage('Last quarter')}",
				"id": "javascript:gs.quartersAgoEnd(1)"
			}, {
				"text": "${gs.getMessage('Last 2 quarters')}",
				"id": "javascript:gs.quartersAgoEnd(2)"
			}, {
				"text": "${gs.getMessage('Next quarter')}",
				"id": "javascript:gs.quartersAgoEnd(-1)"
			}, {
				"text": "${gs.getMessage('Next 2 quarters')}",
				"id": "javascript:gs.quartersAgoEnd(-2)"
			}, {
				"text": "${gs.getMessage('This year')}",
				"id": "javascript:gs.endOfThisYear()"
			}, {
				"text": "${gs.getMessage('Next year')}",
				"id": "javascript:gs.endOfNextYear()"
			}, {
				"text": "${gs.getMessage('Last year')}",
				"id": "javascript:gs.endOfLastYear()"
			}, {
				"text": "${gs.getMessage('Last 2 years')}",
				"id": "javascript:gs.beginningOfLastYear()"
			}, {
				"text": "${gs.getMessage('Last 7 days')}",
				"id": "javascript:gs.daysAgoStart(7)"
			}, {
				"text": "${gs.getMessage('Last 30 days')}",
				"id": "javascript:gs.daysAgoStart(30)"
			}, {
				"text": "${gs.getMessage('Last 60 days')}",
				"id": "javascript:gs.daysAgoStart(60)"
			}, {
				"text": "${gs.getMessage('Last 90 days')}",
				"id": "javascript:gs.daysAgoStart(90)"
			}, {
				"text": "${gs.getMessage('Last 120 days')}",
				"id": "javascript:gs.daysAgoStart(120)"
			}, {
				"text": "${gs.getMessage('Current hour')}",
				"id": "javascript:gs.hoursAgoEnd(0)"
			}, {
				"text": "${gs.getMessage('Last hour')}",
				"id": "javascript:gs.hoursAgoEnd(1)"
			}, {
				"text": "${gs.getMessage('Last 2 hours')}",
				"id": "javascript:gs.hoursAgo(2)"
			}, {
				"text": "${gs.getMessage('Current minute')}",
				"id": "javascript:gs.minutesAgoEnd(0)"
			}, {
				"text": "${gs.getMessage('Last minute')}",
				"id": "javascript:gs.minutesAgoStart(1)"
			}, {
				"text": "${gs.getMessage('Last 15 minutes')}",
				"id": "javascript:gs.minutesAgoStart(15)"
			}, {
				"text": "${gs.getMessage('Last 30 minutes')}",
				"id": "javascript:gs.minutesAgoStart(30)"
			}, {
				"text": "${gs.getMessage('Last 45 minutes')}",
				"id": "javascript:gs.minutesAgoStart(45)"
			}, {
				"text": "${gs.getMessage('One year ago')}",
				"id": "javascript:gs.monthsAgo(12)"
			}]
		};
		var uuid = "${jvar_uid}";
		var fields = JSON.parse($j("#" + uuid + " #interactive_date_filter_feilds").val());
		var fieldsSelect = $j("#" + uuid + " .fields-select");
		var canvasId = fieldsSelect.closest("[data-uuid]")? fieldsSelect.closest("[data-uuid]").attr("data-uuid") : "";
		var fromSelectBox = $j("#" + uuid + " .fromSelect");
		var toSelectBox = $j("#" + uuid + " .toSelect");
		var operatorSelectBox = $j("#" + uuid + " #filerTableSelect");
		var dashboardMessageHandler = new DashboardMessageHandler("select_custom_interactive-" + canvasId);
		var isInCanvas = typeof window.SNC !== "undefined" ? ( typeof window.SNC.canvas !== "undefined"  ? ( typeof window.SNC.canvas.isGridCanvasActive !== "undefined" ? ( typeof window.SNC.canvas.interactiveFilters !== "undefined") : false ): false ) : false ;
		if(isInCanvas) {
			SNC.canvas.eventbus.subscribe(canvasId , function(data) { 
				if(data.action === "destroy")
					removeFilter("${jvar_table}");
			})
		}
		operatorSelectBox.select2();
		fromSelectBox.select2({data: optionValues["ON_NOT_ON"]});
		toSelectBox.select2({data: optionValues["BETWEEN_TO"]});
		if(fields.length > 1) {
			fieldsSelect.select2({data: fields});
			fieldsSelect.select2("val", "all");
		} else {
			fieldsSelect.hide();
			fieldsSelect = $j("#" + uuid + " .fields-select-label");
			fieldsSelect.show();
			fieldsSelect.html(fields[0].text);
		}
		
		
		function publishFilter(tableInput, filterInput) {
        var filter_message = {};
        filter_message.id = "select_custom_interactive-" + canvasId;
        filter_message.table = tableInput; 
        filter_message.filter = filterInput;
        SNC.canvas.interactiveFilters.setDefaultValue({
                id: filter_message.id,
                filters: [filter_message]
            }, false);
        dashboardMessageHandler.publishFilter(filter_message.table, filter_message.filter);
		}
		
		
		function removeFilter(tableInput) {
        var filter_message = {};
        filter_message.id = "select_custom_interactive-" + canvasId;
        filter_message.table = tableInput;
        filter_message.filter = "";
        SNC.canvas.interactiveFilters.setDefaultValue({
                id: filter_message.id,
                filters: [filter_message]
            }, false);
        dashboardMessageHandler.removeFilter();
    }
		
		function handleChangeSelection() {
			if(fieldsSelect.val() === 'all') {
				$j("#" + uuid + " .filter-block").hide();
				removeFilter("${jvar_table}");
			} else {
				$j("#" + uuid + " .filter-block").show();
				// To publish  filter
				var value = operatorSelectBox.val();
				var fieldSelected = fieldsSelect.val();
				if(fieldSelected === "") {
					fieldSelected = fields[0].id;
				}
				if(value === "ISEMPTY" || value === "ISNOTEMPTY" || value === "ANYTHING") {
					publishFilter("${jvar_table}",fieldSelected + value);
	
	
	
	
				} else if(fromSelectBox.val() !== "") {
					if(value === "BETWEEN") {
						if(toSelectBox.val() !== "")
							publishFilter("${jvar_table}",fieldSelected + value +fromSelectBox.val() + "@" + toSelectBox.val());
					} else if(value === "ON" || value === "NOTON") {
						publishFilter("${jvar_table}",fieldSelected + value + fromSelectBox.val());
					} else if(value === "lt") {
						publishFilter("${jvar_table}",fieldSelected + $j("#" + uuid + " #filerTableSelect > option[value='" + value + "']").attr("val") + fromSelectBox.val());
					} else if(value === "lteq") {
						publishFilter("${jvar_table}",fieldSelected + $j("#" + uuid + " #filerTableSelect > option[value='" + value + "']").attr("val") + fromSelectBox.val());
					} else if(value === "gt") {
						publishFilter("${jvar_table}",fieldSelected + $j("#" + uuid + " #filerTableSelect > option[value='" + value + "']").attr("val") + fromSelectBox.val());
					} else if(value === "gteq") {
						publishFilter("${jvar_table}",fieldSelected + $j("#" + uuid + " #filerTableSelect > option[value='" + value + "']").attr("val") + fromSelectBox.val());
					}
				}
			}
		}
		fieldsSelect.change(handleChangeSelection);
		fromSelectBox.change(handleChangeSelection);
		toSelectBox.change(handleChangeSelection);
		$j("#" + uuid + "-toSelectDate")[0].onchange = function() {
			var optionDate = {"text": this.value, "id": "javascript:gs.dateGenerate('" + this.value + "','23:59:59')"};
			optionValues["BETWEEN_TO"].push(optionDate);
			toSelectBox.select2("val", optionValues["BETWEEN_TO"]);
			toSelectBox.select2("val", optionDate.id);
			handleChangeSelection();
		};
		// Chane handler for date calender widget
		$j("#" + uuid + "-fromSelectDate")[0].onchange = function() {
			var optionDate;
			var value = operatorSelectBox.val();
			var data;
			if(value === "BETWEEN") {
					optionDate = {"text": this.value, "id": "javascript:gs.dateGenerate('" + this.value + "','00:00:00')"};
					data = optionValues["BETWEEN_FROM"];
				} else if(value === "ON" || value === "NOTON") {
					optionDate = {"text": this.value, "id": this.value + "@javascript:gs.dateGenerate('" + this.value + "','start')@javascript:gs.dateGenerate('" + this.value + "','end')"};
					data = optionValues["ON_NOT_ON"];
				} else if(value === "lt") {
					optionDate = {"text": this.value, "id": "javascript:gs.dateGenerate('" + this.value + "','00:00:00')"};
					data = optionValues["BEFORE"];
				} else if(value === "lteq") {
					optionDate = {"text": this.value, "id": "javascript:gs.dateGenerate('" + this.value + "','23:59:59')"};
					data = optionValues["AT_OR_BEFORE"];
				} else if(value === "gt") {
					optionDate = {"text": this.value, "id": "javascript:gs.dateGenerate('" + this.value + "','23:59:59')"};
					data = optionValues["AFTER"];
				} else if(value === "gteq") {
					optionDate = {"text": this.value, "id": "javascript:gs.dateGenerate('" + this.value + "','00:00:00')"};
					data = optionValues["AT_OR_AFTER"];
				}
			if(optionDate){
				data.push(optionDate);
				fromSelectBox.select2("val", data);
				fromSelectBox.select2("val", optionDate.id);
			}
			handleChangeSelection();
		};
		// Chane handler for operators
		operatorSelectBox.change(function() {
			var value = operatorSelectBox.val();
			if(value === "BETWEEN") {
				fromSelectBox.select2({data: optionValues["BETWEEN_FROM"]});
				toSelectBox.select2({data: optionValues["BETWEEN_TO"]});
				toSelectBox.val("");
				$j("#" + uuid + " [between-block]").show();
				$j("#" + uuid + " [other-block]").show();
			} else if(value === "ISEMPTY" || value === "ISNOTEMPTY" || value === "ANYTHING") {
				$j("#" + uuid + " [other-block]").hide();
				$j("#" + uuid + " [between-block]").hide();
				} else { 
					$j("#" + uuid + " [between-block]").hide();
					$j("#" + uuid + " [other-block]").show();
					if(value === "ON" || value === "NOTON") {
						fromSelectBox.select2({data: []});
						setTimeout(
							function() {
								fromSelectBox.select2({data: optionValues["ON_NOT_ON"]});
							}, 100);
					} else if(value === "lt") {
						fromSelectBox.select2({data: optionValues["BEFORE"]});
					} else if(value === "lteq") {
						fromSelectBox.select2({data: optionValues["AT_OR_BEFORE"]});
					} else if(value === "gt") {
						fromSelectBox.select2({data: optionValues["AFTER"]});
					} else if(value === "gteq") {
						fromSelectBox.select2({data: optionValues["AT_OR_AFTER"]});
					} 
			}
			fromSelectBox.val("");
			//dashboardMessageHandler.removeFilter();
			removeFilter("${jvar_table}");
			handleChangeSelection();
		});
		setTimeout(handleChangeSelection,1000);
	})();
	</script>
</j:jelly>

[kavitha_cr]

Hi @NikEng 

I have installed the update set and used the above code to created interactive filter. When I added the interactive filter to the dashboard, it is looking like below image.

Can you guide me on how to create a widget which will display the data on change of the Interactive filter. I already have a widget which looks like below, i want to add the interactive filter to the below widget.

Thanks in Advance,

Shilpa.

[NikEng1]

Hi,

The filter will be a separate widget from the bar chart, it is not possible to place the filter inside the bar chart widget. The filter widget you have added is also for the incident table. To add a widget for the requested item table, you first need to go into sys_widgets.list and open the "Custom Interactive Filters" widget. Then add the code I have marked in this image:

You will then be able to add the widget "RITM Date Filter" and set your widgets to follow interactive filters.

To clarify, this widget will filter Reporting widgets set to follow interactive filters. The filter will limit the data in the reporting widget to records opened between specific dates.

If you use case is to show specific score date intervals in PA widgets, that cannot be achieved by dynamic filters. The only way to set which score dates are shown in a PA widget is by using the date settings in the widget form. PA widgets can not follow interactive filters. They can only follow the dashboard breakdown filter.

[kavitha_cr]

Hi @NikEng ,

The above code worked for me, Thank you for ur guidance on this.

Thanks,

Shilpa.