My Dynamic Content Block stops working upon refreshing the page.

[nicholas_wilson]

Referencing this: https://www.servicenow.com/community/platform-analytics-forum/create-interactive-filter-to-search-on...

I created a Dynamic Content Block on the dashboard so that I could filter a report by a string value using the DashboardMessageHandler method (see reference above). It worked fine until I refresh the page, or navigate to another page and then come back to the dashboard.

Here is the process and the code...

Picture 1: Filter is the Dynamic Content Block. Test Filter is my report. I am filtering on the Number column, which is a string.

Here is the list with the filter. The Test Filter widget is not working at this point.

Picture 2: If I click the gear icon to open the Edit Widget modal window on the Test Filtering widget, then click "Done", and refresh the Filtering Widget, the filter will work again.

When I edit the Test Filter widget, click "Done" and then REFRSEH the widget. It will filter and work again.

The Dynamic Content Blocks code, which works fine after performing picture 2's details:

<?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 my_dashboardMessageHandler = new DashboardMessageHandler("FilterGrossNetAge");

	function filter() {
		var sysId = document.getElementById("test").value;
		var num;

		var g = new GlideRecord("sn_hr_er_case");
		g.get(sysId);
		num = g.number;

		my_dashboardMessageHandler.publishFilter("sn_hr_er_case", "number=" + num);
	}
</script>

<form>
    <g:ui_reference name="test" id="number" table="sn_hr_er_case" /> 
    <input type="button" value="Submit" onclick="filter()"></input>
</form>
</j:jelly>

How can I fix this so that when you go to the Dashboard, I don't have to do anything to get it to work? Is this a problem with ServiceNow? Or am I doing something wrong? I shouldn't have to edit the widget, and refresh it every single time. In fact, a user wouldn't be able to do this at all. 

[Community Alums]

Hi @nicholas_wilson ,

Looks like the the functions are not properly initialized and attached.

Try the below code once-

<?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>
    document.addEventListener('DOMContentLoaded', function() {
        var my_dashboardMessageHandler = new DashboardMessageHandler("FilterGrossNetAge");

        function filter() {
            var sysId = document.getElementById("number").value;
            var num;

            var g = new GlideRecord("sn_hr_er_case");
            g.get(sysId);
            num = g.number;

            my_dashboardMessageHandler.publishFilter("sn_hr_er_case", "number=" + num);
        }

        document.getElementById("filterButton").addEventListener("click", filter);
    });
</script>

<form>
    <g:ui_reference name="test" id="number" table="sn_hr_er_case" />
    <input type="button" id="filterButton" value="Submit"></input>
</form>

</j:jelly>

If my response has resolved your query, please consider giving it a thumbs up ‌‌ and marking it as the correct answer‌‌!

Thanks & Regards,

Sanjay Kumar

[nicholas_wilson]

This does not work.

DOMContentLoaded would make sense if something on ServiceNow was loading after my script such as the interactive filter mapping. The html attributes onclick are valid syntax and you do not need event listeners in this scenario. Did you try your script on a test environment?  

The problem is that the filter is not mapping on load, and has to be re-mapped every time you load the page. DOMContentLoaded should fix this theoretically, but doesn't. So it makes me think it's something else. 

[nicholas_wilson]

Source: https://docs.servicenow.com/bundle/washingtondc-now-intelligence/page/use/dashboards/reference/r_Cus...

I ended up using this documentation to fix mine. There's a script half way down the page that you can edit. I guess it doesn't like the way my script is running so the boilerplate script they have works fine. You need to replace the query strings with your own, replace the table name to whatever you want and it should work. Hopefully this helps someone else.