How does Dynamic content block can be responsive by using Interactive filter.

[Allu Gopal]

Hi All,

How does Dynamic content block can be responsive by using Interactive filter.

eg: I have created a incident list report and Interactive filter with priority. When i change the priority, dynamic content block can also update with some data. It can be clearly in below image.

Code using in dynamic content block:

<?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 b1= gs.getUserName(); -->
	var b1= gs.getUserDisplayName();
	<!-- var a = "owe"; -->
	var a = gs.getValue('priority');
	var gr = new GlideRecord('incident');
	if(a=='1')
	{
	 var b = "Priority 1";
	}
	else if(a=='2')
	{
	 var b = "Priority 2";
	}
	else if(a=='3')
	{
	 var b = "Priority 3";
	}
	else
	{
	 var b = "Priority 4";
	} 
	
	</g:evaluate>
	<div style="text-align:center">
		<span style="font-size: 40px; background-color:green; padding: 0 10px;">
			<h>Hello ${b1} --- ${b}</h>
		</span>
	</div>
</j:jelly>

Regards,

ALLU GOPAL.

[Tushar Hirpurk1]

Hi Allu,

I am not sure dynamic content block will act for Interactive filter as i am not getting option like Follow element,

Please find below related link, hope that helps

Dynamic content block and interactive filter

Thanks,

Tushar

[NikEng1]

When you change a filter on the dashboard, a custom event is fired along with the filter as an object. You can set your dynamic content block to listen for this event, get the filter object sent with it and the filter value. Something like this should work:

<?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>

	
	CustomEvent.observe('dashboard_filter.added', function(filterMessage) {
	
	var idObj = filterMessage.id;
	
	var filterFound = filterMessage[idObj][0].filter;
	
	var container = document.getElementById("myTextContainer");
	container.textContent = filterFound;
	});

	
	</script>
	<div id='myTextContainer'>Filter is: </div>
</j:jelly>

If you want to explore the object sent by the event, add this to the function above:

alert(JSON.stringify(filterMessage, null, 4));

It will open a popup with the object content:

This will work when the filter is changed. I am not sure about how to get the default filter that's applied as the dashboard is opened if the user has previously made a selection. You'll have to look through the file:

https://YOUR-INSTACE-URL/scripts/includes/js_includes_dashboards_2.js

EDIT: Found the default filter property, this works if you only have one interactive filter. Otherwise you have to loop through the returned object of defaultvalue :

<?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 container = document.getElementById("myTextContainer");
	
	var defaultFilter = window.SNC.canvas.interactiveFilters.defaultValues;
	var returnValue = defaultFilter[Object.keys(defaultFilter)[0]];
	filterDefault = returnValue[0].filter;
	container.textContent = filterDefault;
	
	
	CustomEvent.observe('dashboard_filter.added', function(filterMessage) {
		var idObj = filterMessage.id;
		var filterFound = filterMessage[idObj][0].filter;
		container.textContent = filterFound;
	});
	

	
	</script>
	<div>Current filter is: </div>
	<div id='myTextContainer'></div>
</j:jelly>

[Allu Gopal]

Hi NikEng,

It is working for getting the value of filter but what I am trying to do is like by the value of filter need to show case the specific data like when priority is 5 it need to show APC, else it will show AAA. It can be clearly explain in below image.

<?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 container = document.getElementById("myTextContainer");
	
	var defaultFilter = window.SNC.canvas.interactiveFilters.defaultValues;
	var returnValue = defaultFilter[Object.keys(defaultFilter)[0]];
	filterDefault = returnValue[0].filter;
	container.textContent = filterDefault;
	
	
	CustomEvent.observe('dashboard_filter.added', function(filterMessage) {
		var idObj = filterMessage.id;
		var filterFound = filterMessage[idObj][0].filter;
		container.textContent = filterFound;
	});
	
	if(myTextContainer=="priority=5")
	{
	var a = "APC";
	}
	else
	{
	var a = "AAA";
	}
	
	</script>
	
	   
	<div style="text-align:center">
		<span style="font-size: 40px; background-color:green; padding: 0 10px;">
			<h>Current filter is: </h>
			 <h id='myTextContainer'></h>
			<h>${a}</h>
		</span>
	</div>
  
</j:jelly>

Regards,

ALLU GOPAL.

[NikEng1]

Hi,

If you just want the number of the ID instead of the filter string, you can use:

var priorityID = filterFound.split("=").pop();

Like this:

<?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 container = document.getElementById("myTextContainer");
	
	var defaultFilter = window.SNC.canvas.interactiveFilters.defaultValues;
	var returnValue = defaultFilter[Object.keys(defaultFilter)[0]];
	filterDefault = returnValue[0].filter;
	var filterID = filterDefault.split("=").pop()
	container.textContent = filterID;
	

	
	CustomEvent.observe('dashboard_filter.added', function(filterMessage) {
		var idObj = filterMessage.id;
		var filterFound = filterMessage[idObj][0].filter;
		var priorityID = filterFound.split("=").pop();
		container.textContent = priorityID;
	});
	

	

	
	</script>
	<div>Current priority is: </div>
	<div id='myTextContainer'></div>
</j:jelly>

If you wanted to set a specific text based on the ID selected, you can use a switch function like this:

<?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 container = document.getElementById("myTextContainer");
	
	var defaultFilter = window.SNC.canvas.interactiveFilters.defaultValues;
	var returnValue = defaultFilter[Object.keys(defaultFilter)[0]];
	filterDefault = returnValue[0].filter;
	var priorityID = filterDefault.split("=").pop()
	container.textContent = getText(priorityID);
	
		
	CustomEvent.observe('dashboard_filter.added', function(filterMessage) {
		var idObj = filterMessage.id;
		var filterFound = filterMessage[idObj][0].filter;
		priorityID = filterFound.split("=").pop();
		container.textContent = getText(priorityID);
	});
	
	function getText(id) {
	var textReturn;
		switch (id) {
			  case '1':
				textReturn = "Really hight";
				break;
			  case '2':
				textReturn = "High";
				break;
			  case '3':
				textReturn = "Medium";
				break;
			  case '4':
			  case '5':
				textReturn = "Low";
				break;
		}
	return textReturn;
	};

	

	
	</script>
	<div>Current priority is: </div>
	<div id='myTextContainer'></div>
</j:jelly>

Hope this help you, if so I would be grateful if you marked my reply as correct.