logo

NJP

Encoded Query Input box

Import · May 21, 2021 · article

Ever find yourself wishing you could copy and paste an encoded query from a script and apply it to a list in the UI? You can of course easily get an encoded query from filter breadcrumbs by right clicking. But there is no input for applying one without just fiddling with the URL. So I created an input box that shows up on the right side of the filter bar that does this very thing.

image

This is not future proof because I'm listening for a specific DOM element to appear when the filter funnel is clicked and then using DOM manipulation to add the input and Run button on the fly. But if it breaks in the future we can either fix it or turn it off and no harm done.

All it's doing is parsing the sysparm_query from the URL and putting it in the input box. When submitted by clicking the Run button it is just setting the sysparm_query value in the URL and causing a redirect.

This is being added via a Global UI script. But the restrictions are for it to only run for admins and only on lists. Here is the script. Enjoy!

jQuery(document).ready(function() {
//only do this for admins
if (g_user.hasRole('admin')) {

    var href = String(window.location.href);

    //only do this for lists
    if (href.indexOf('_list.do') > -1) {

        //listen for the filterToolbar to show up which happens when the funnel is clicked the first time
        onElementInserted('body', '.filterToolbar', function(element) {

            //create our custom input
            var enqy = jQuery('<div style="float: right; margin-right: 5px;"><div class="input-group" style="width: 500px;"><input id="encodedquery" name="encodedquery" class="form-control" placeholder="Encoded query" type="text"><div class="input-group-btn"><button id="runencodedquery" type="button" class="btn btn-default">Run</button></div></div></div>');
            //append it to the filterbar
            jQuery('.filterToolbar').append(enqy);

            //get the url
            var url = new URL(document.URL);
            //extract the sysparm_query parameter and set the input
            jQuery('#encodedquery').val(url.searchParams.get('sysparm_query'));

            //add event listener for the run button to be clicked
            jQuery(document).on('click', '#runencodedquery', function() {
                var encodedquery = jQuery('#encodedquery').val();
                var href = new URL(document.URL);

                //set the parameter in the url with the value from the input and navigate to the new url
                href.searchParams.set('sysparm_query', encodedquery);
                window.location = href.toString();
            });
        });


    }
}

});

function onElementInserted(containerSelector, elementSelector, callback) {

var onMutationsObserved = function(mutations) {
    mutations.forEach(function(mutation) {
        if (mutation.addedNodes.length) {
            var elements = $j(mutation.addedNodes).find(elementSelector);
            for (var i = 0, len = elements.length; i < len; i++) {
                callback(elements[i]);
            }
        }
    });
};

var target = $j(containerSelector)[0];
var config = {
    childList: true,
    subtree: true
};
var MutationObserver = window.MutationObserver || window.WebKitMutationObserver;
var observer = new MutationObserver(onMutationsObserved);
observer.observe(target, config);

}

View original source

https://www.servicenow.com/community/developer-articles/encoded-query-input-box/ta-p/2329990