logo

NJP

Auto refresh dashboard using dynamic content view

Import · Aug 05, 2022 · article

Overview : Missing auto refresh functionality on dashboard , there are some scenario where customers needed this functionality which is quite helpful to them. I have also came across same situation where asked to provide an option which allow the same.

One of Solution : We can create a score type report and place it on Dashboard, then click on show real-time updates on setting of that widget, this also provide us real time count of records. But this was unfortunate for us that some of times this was also not refreshing count, i don't know what is reason but has been seen on prod instance.

Other workaround: I found a comment of @gav1n on an article with some code , i was so happy to see at least i have found something but that code did not work as expected but for sure was helpful to come across to get a final working code on dashboard. I am sharing with you working code which will allow to get refresh all reports on a specific Tab of dashboard. If you wish to use on other tab you can add or on any dashboard as well.

Create an dynamic content : Add Widgets -> Widget Category=content Blocks -> select *New Dynamic Content

Once displayed on dashboard edit it and paste below 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">
    <style>.counter{display:block;margin:2px 0px;color:#969696}.refresh-select{width:auto;display:inline}</style>
    <script>
        var r_sec = 0;
        var t_now = null;
        var t_next = null;
        var t_last = null;
        var myInterval = null;
        var r_active=true;
        var tab_active=false;
        //auto read seconds on selector change
        function readTime() {
            r_sec = gel('sel_time').value;
            localStorage['saved_time'] = r_sec;
            clearInterval(myInterval);
            reloadDashboard();
        }

        // refresh using actual page script
        function refreshPage() {
        var scope = angular.element(document.getElementsByClassName("icon-cards btn btn-icon btn-default sn-tooltip-basic")).scope();
        scope.$apply(function(){scope.msg = ' '; })
        scope.refreshAllPanes();    
        }

        //auto read active (true/false) on selector change
        function readActive() {
            localStorage['saved_active'] = r_active;
            clearInterval(myInterval);
            reloadDashboard();
        }
        function readTabChange() {
            r_tabs =tab_active; // gel('tab_active').value;
            localStorage['saved_tabs'] = r_tabs;
        }   
        //refresh now on button click
        function refreshNow() {
            refreshPage();
            clearInterval(myInterval); //always clear interval after refresh
        }
        //run interval every 1 second
        function runInterval(){
//console.log("abhaytest1");
            if(t_now &lt; t_next) {
                // the definition of "('0' + t_X).slice(-2)" is there to print the leading zeros in front
                $j('#refresh .counter').text('Now: '+t_now.getHours()+':'+ ('0'+t_now.getMinutes()).slice(-2) +':'+ ('0'+t_now.getSeconds()).slice(-2) +' Next: '+t_next.getHours()+':'+('0'+ t_next.getMinutes()).slice(-2) +':'+ ('0'+t_next.getSeconds()).slice(-2) +' Last: '+t_last.getHours()+':'+ ('0'+t_last.getMinutes()).slice(-2) +':'+ ('0'+t_last.getSeconds()).slice(-2));

                //console.log('Now: '+t_now.getSeconds()+', Next: '+t_next.getSeconds());

                t_now.setSeconds(t_now.getSeconds() + 1);
            }else {
            refreshPage();
                clearInterval(myInterval); //always clear interval after refresh
            }
        }
        function reloadDashboard() {
            //read time in seconds
            r_sec = localStorage['saved_time'] || gel('sel_time').value; //read saved option from cache after refresh or from the selector
            $j('#sel_time').val(r_sec); //we set it to the selector
                t_now = new Date(Date.now());
                t_next = new Date(t_now.getTime());
                t_next.setSeconds(t_next.getSeconds() + parseInt(r_sec)); //we sum read seconds to calculate next refresh
                t_last = new Date(t_now.getTime()); //save last run, as t_now is displayed on real time. eg. t_now=t_now+1
                myInterval = setInterval(runInterval, 1000); //run every 1 sec.
        }

        $j('#sel_time').val('300'); //default option is 60 seconds
        reloadDashboard();

        //if window tab is active (for optimal performance)
        $j(window).focus(function() {
            clearInterval(myInterval);
            reloadDashboard();
        });
        $j(window).blur(function() {
            //if(r_tabs == 'false') {
            clearInterval(myInterval);
            $j('#refresh .counter').text('Stopped. Tab was inactive.');
        });
    </script>
    <div id='refresh' class='panel-body'>
            <span class='counter'></span>
        Refresh:
        <select id='sel_time' class='form-control refresh-select' onchange='readTime()'>
            <option value='30'>30 sec.</option>
            <option value='60' selected="selected">1 min.</option>
            <option value='300'>5 min.</option>
            <option value='900'>15 min.</option>
            <option value='1800'>30 min.</option>
        </select>
        <button type='button' class='btn btn-default' onclick='refreshNow()'>Refresh now</button>
    </div>
</j:jelly>

Reason for sharing is what someone shared helped me likewise i am sharing with same hope.

Thanks,

Ab

View original source

https://www.servicenow.com/community/next-experience-articles/auto-refresh-dashboard-using-dynamic-content-view/ta-p/2331900