Custom Interactive Filter for "between "dates

[FareezaThasneem]

Hi All,
I'm working on Custom Interactive Filter ,

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 reports data should be changed.

Based on the date selection my reports should be able to reflect the data.

I have referred old post of interactive filter : https://www.servicenow.com/community/platform-analytics-forum/date-range-filter-in-a-dashboard/m-p/1...
https://www.servicenow.com/community/platform-analytics-forum/how-to-create-a-date-range-interactive...
But didn't get from anywhere 
Please suggest anyone find the solution.

Thanks,
Fareeza

[kaushal_snow]

Hi @FareezaThasneem .

Please use Dynamic Content block (Table - content_block_programmatic) using jelly script to create a custom date range filter, below is the code which i have used for one of the scenario..

<?xml version="1.0" encoding="utf-8" ?>
<j:jelly trim="false" xmlns:j="jelly:core" xmlns:g="glide" xmlns:j2="null" xmlns:g2="null">
    <style>
        .btn.active {
            box-shadow: inset 0 3px 5px rgb(0 0 0 / 50%);
            !important;
        }
 
        .btn.cs-btn {
            width: 55px;
        }
    </style>
    <script>
        var my_dashboardMessageHandler = new DashboardMessageHandler("onboarding_date_filter");
 
        function applyFilter() {
            var valueStart = document.getElementById("onboardingDateRangeStart").value;
            var valueEnd = document.getElementById("onboardingDateRangeEnd").value;
            var filter_message = {};
            filter_message.id = "onboarding_date_filter";
            filter_message.table = "table_name";
            if (!valueStart)
                filter_message.filter = "";
            else if (!valueEnd)
                filter_message.filter = "";
            else
                filter_message.filter = "onboarding_dateBETWEENjavascript&colon;gs.dateGenerate('" + valueStart + "','00:00:00')@javascript&colon;gs.dateGenerate('" + valueEnd + "','23:59:59')";
            SNC.canvas.interactiveFilters.setDefaultValue({
                id: filter_message.id,
                filters: [filter_message]
            }, false);
            my_dashboardMessageHandler.publishFilter(filter_message.table, filter_message.filter);
        }
 
        document.addEventListener('DOMContentLoaded', function () {
            var startDate = document.getElementById("onboardingDateRangeStart");
            var endDate = document.getElementById("onboardingDateRangeEnd");
 
         
            startDate.addEventListener('focus', function () {
                startDate.showPicker();
            });
            endDate.addEventListener('focus', function () {
                endDate.showPicker();
            });
        });
    </script>
    <span style="display:flex;">
        <label style="width: 8%; margin-top: 12px; padding:10px;">From Date</label>
        <input id="onboardingDateRangeStart" type="date" class="form-control" value="" onchange="applyFilter();" style="margin-top: 15px; width: 15%;"/>
        <label style="width: 8%; margin-top: 12px; padding:10px; margin-left: 30px;">To Date</label>
        <input id="onboardingDateRangeEnd" type="date" class="form-control" value="" onchange="applyFilter();" style="margin-top: 15px; width: 15%;"/>
    </span>
</j:jelly>

[FareezaThasneem]

Thanks for sharing @kaushal_snow , its working.

[kaushal_snow]

Glad it works @FareezaThasneem ...

[Bhuvan]

@FareezaThasneem 

Check if below helps,

https://www.servicenow.com/community/platform-analytics-forum/interactive-filter-quot-between-dates-...

Thanks,

Bhuvan