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.

[Allu Gopal]

Hi,

Sorry to disturb you again. when I am selecting respective options the header is changing. But when I am selecting the "all" option in interactive filter it is not changing the header instead when I select "none" it is changing.

Can you please tell me how to compare the all value here.

I tried code like this in below. Please take a look into it.

code:

<?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 'FQEU1':
textReturn = "EU PLANT 1";
break;
case 'FQAPAC1':
textReturn = "APAC PLANT 1";
break;
case 'FQNA1':
textReturn = "NA PLANT 1";
break;
default:
textReturn = "Global Enterprises";
}
return textReturn;
};



</script>
	<style>
		h1{
		color: #ffffff;
		}
		
	</style>
	
<!-- <div>Current priority is: </div> -->
<!-- <div id='myTextContainer'></div> -->
	<h1 id='myTextContainer' style="background-color: #486673; text-align: center;"><span style="color: #ffffff;"></span></h1>
<!-- <h1 id='myTextContainer' style="text-align: center, color: #ffffff, background-color: #486673;"></h1>  -->
</j:jelly>

Regards,

ALLU GOPAL.

[NikEng1 · Accepted solution]

Hi Allu,

Sorry I should have tested that option. The problem was that the function that sets the text was triggered by the "dashboard_filter.added" event. But when you select "All" a filter isn't being added, but rather destroyed. That is a separate event that we have to listen for. Also, when the saved default value is "All", we need to check for that by testing if the defaultValue of the interactive filter is an empty object when we load the dashboard. Basically eventhough "All" appears in the list, it isn't actually a filter but instead the absence of a filter.

This code 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>
	
	var container = document.getElementById("myTextContainer");
	
	//Get the saved default filter
	var defaultFilter = window.SNC.canvas.interactiveFilters.defaultValues;
	//Check if the saved default filter is an empty object, this means no filter (all) is selected
	if (Object.keys(defaultFilter).length === 0) {
		console.log('default filter object is empty');
		container.textContent = "No Priority selected";
	}
	//If the object is not empty, that means a default filter is saved and applied onload of the dashboard
	else {
		var returnValue = defaultFilter[Object.keys(defaultFilter)[0]];
		filterDefault = returnValue[0].filter;
		var priorityID = filterDefault.split("=").pop()
		container.textContent = getText(priorityID);
	}
	
	//If we select "All", the filter is destroyed
	CustomEvent.observe('dashboard_filter.removed', function() {
		container.textContent = "No priority selected";
		console.log('Filter destroyed');
	});
	
	//If we select something other than all, a filter is added
	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);
		console.log('prio is: '+priorityID);
	});
	
	function getText(id) {
	var textReturn;
		switch (id) {
			  case '1':
				textReturn = "Really high";
				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>

[Jeffrey Siegel]

i have 3 interactive filters, when i try to use this, it only shows the last interactive filter applied, not the combination of the 3, do you have an update that can work with all 3?