custom interactive filter of content block programmatic

Community Alums
Not applicable

‎05-29-2024 10:54 AM

Hi all,
I was trying to create a filter i.e. date type filter and the filter is acting on the date type variable. But the code is not working it was not applying filter on the dashboard. Can anyone help me how to fix 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">
<g:evaluate var="jvar_status" object="true" jelly="true">
</g:evaluate>
<div>
<label for="start_date">start Date:</label>
<input type="date" id="start_date" onchange="filterByDate()" />
</div>
<script>
 var dashboardMessageHandler = new dashboardMessageHandler("filter_date");
    var startDate = document.getElementById('start_date').val();
function filterByDate(){
        var filterOut = '';
        if (startDate) {
            filterOut = 'variables.43424bab4712021033a80c59e16d437c=' + startDate;  --> variable sys_id
            var objFilter = {
                id: dashboardMessageHandler._unique_id,
                table: 'incident',
                filter: filterOut
            };
            SNC.canvas.interactiveFilters.setDefaultValue({
                id: objFilter.id,
                filters: [objFilter]
            }, false);
            dashboardMessageHandler.publishFilter(objFilter.table, objFilter.filter);
        } else {
            SNC.canvas.interactiveFilters.removeDefaultValue(dashboardMessageHandler._unique_id, false);
            dashboardMessageHandler.removeFilter();
        }
    }
    
 filterByDate();
    </script>
 

</j:jelly>
0 Helpfuls
  • 429 Views
1 REPLY 1

DMaldonado
ServiceNow Employee
ServiceNow Employee

‎05-14-2025 12:49 PM

To troubleshoot and fix the issue with your date filter not working on the dashboard, let's go through the code and identify potential problems:

  1. Initialization of startDate: The startDate variable is initialized outside the filterByDate function, which means it won't update when the date input changes. You should move the initialization inside the function to ensure it captures the current value each time the function is called.

  2. Incorrect method to get input value: The method .val() is not valid for standard JavaScript. You should use .value to get the value of an input element.

  3. Ensure dashboardMessageHandler is correctly initialized: Make sure that dashboardMessageHandler is properly defined and initialized. If it's a custom object, ensure that its constructor and methods are correctly implemented.

  4. Check for errors in the console: Open the browser's developer tools and check the console for any JavaScript errors that might be preventing the script from executing correctly.

  5. Verify the sys_id and table name: Ensure that the sys_id and table name are correct and correspond to the actual elements and data you are trying to filter.

Here's a revised version of your script with these considerations:

<?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="jvar_status" object="true" jelly="true">
</g:evaluate>
<div>
    <label for="start_date">Start Date:</label>
    <input type="date" id="start_date" onchange="filterByDate()" />
</div>
<script>
    var dashboardMessageHandler = new dashboardMessageHandler("filter_date");

    function filterByDate() {
        var startDate = document.getElementById('start_date').value;
        var filterOut = '';
        
        if (startDate) {
            filterOut = 'variables.43424bab4712021033a80c59e16d437c=' + startDate; // Ensure this sys_id is correct
            var objFilter = {
                id: dashboardMessageHandler._unique_id,
                table: 'incident', // Ensure this table name is correct
                filter: filterOut
            };
            SNC.canvas.interactiveFilters.setDefaultValue({
                id: objFilter.id,
                filters: [objFilter]
            }, false);
            dashboardMessageHandler.publishFilter(objFilter.table, objFilter.filter);
        } else {
            SNC.canvas.interactiveFilters.removeDefaultValue(dashboardMessageHandler._unique_id, false);
            dashboardMessageHandler.removeFilter();
        }
    }
</script>
</j:jelly>
Copied

Additional Tips:

  • Debugging: Use console.log() statements to print values and check the flow of execution.
  • Ensure Compatibility: Make sure that the SNC.canvas.interactiveFilters API is available and correctly configured in your environment.
  • Check Dependencies: Verify that any dependencies or libraries required for dashboardMessageHandler are correctly loaded and initialized.

By addressing these points, you should be able to resolve the issue with your date filter not working on the dashboard.

 

0 Helpfuls