Interactive Filter - Display Field

[Ararana]

We're trying to create an Interactive Filter on the Cost Center table that displays the Code field instead of the default Name field but there doesn't seem to be an option to specify the drop down's Display Field. Am I missing something or is this not supported? Seems like this should be a simple thing.

[Namrata Khabale]

Hey Ararana,

Refer the link it might help you:

https://docs.servicenow.com/bundle/orlando-performance-analytics-and-reporting/page/use/dashboards/t...

Mark correct and helpful if you find response worthy!

Best Regards,

Namrata.

[Ararana]

Hi Namrata, thanks for the link it's very helpful when setting up an interactive filter. Unfortunately, I can't find much on changing the filters display value in this documentation.  

[Namrata Khabale]

Hey Ararana,

Check this links:

https://docs.servicenow.com/bundle/orlando-performance-analytics-and-reporting/page/use/dashboards/r...

https://community.servicenow.com/community?id=community_question&sys_id=d54badbcdbc19f044816f3231f96...

Mark correct and helpful on the basis of impact!

Warm regards,

Namrata.

[Ararana · Accepted solution]

This isn't the ideal method, but a workaround we created was a Dynamic Content Block for a custom Interactive Filter that links the Code field in the cmn_cost_center table to the Cost Center field in the alm_assets table.

<?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("my_unique_id");

    populateFilter();

    function populateFilter(){
        try {
            var select = document.getElementById("CostCenterCodes"); 
            
            var gr = new GlideRecord('cmn_cost_center');
            gr.setLimit(1500);
            gr.orderBy('code');

            gr.query();
            
            while (gr.next()) {

                if (gr.code != null) {
                    var el = document.createElement("option");
                    el.textContent = gr.code;
                    el.value = gr.sys_id;
                    select.appendC
                    hild(el);
                }
            }

        } catch (ex) {
            alert('Error: ' + ex.message);
        }
    }
    
    function costCenterFilterChange(selectObject) {
        var value = selectObject.value;  

        if (value == "ALL") {

            var filter_message = {};
            filter_message.id = "cost_center";
            filter_message.table = "alm_asset";
            filter_message.filter = "";
            SNC.canvas.interactiveFilters.setDefaultValue({
                    id: filter_message.id,
                    filters: [filter_message]
                }, false);
            my_dashboardMessageHandler.removeFilter();  

        } else {

            try {
                var filter_message = {};
                filter_message.id = "cost_center";
                filter_message.table = "alm_asset";
                
                filter_message.filter = "cost_center=" + value;
                SNC.canvas.interactiveFilters.setDefaultValue({
                        id: filter_message.id,
                        filters: [filter_message]
                    }, false);
                my_dashboardMessageHandler.publishFilter(filter_message.table, filter_message.filter);
            }
            catch (ex) {
                alert('Filter Error: ' + ex.message);
            }
        }
    }
 </script>   

 <style>
     .costCenterList {
         width: 150px;
         height: 30px;
         font-size: 14px;
     }
 </style>

<select id="CostCenterCodes" name="CostCenterCodes" class="costCenterList" onchange="costCenterFilterChange(this)">
    <option value="ALL">ALL</option>
</select>

</j:jelly>