Custom interactive not working

[satyakumars]

Hi Team,

I have got a requirement to create a interactive filter on a field 'Market', which is type glide_list and it refers to   'u_market_teams' table. Filter should be on 'market' field, which is on custom table 'x_operations_market'. As this is a glide_list type field we need to create a custom interactive filter. So, based on recommendations I followed article of @Maik Skoddow

 https://www.servicenow.com/community/platform-analytics-articles/dashboards-approaches-for-interacti...

I created custom filter with below code. I can see the values in the filter, but after selection results are not reflecting as expected.

Below is the code I used. Please suggest if am missing something 

<?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 arrItemSysId = [];

  var arrItemName = [];

  var dashboardMessageHandler = new DashboardMessageHandler(

    "custom_watch_list_filter", 

    function() {

      resetCustomWatchListFilter()

    });

  // transform HTML selectbox to ServiceNow selection

  $j(document).ready(function() {

    $j("#myCustomInteractiveFilterChoice").select2();

  });  

  function rebuildCustomWatchListFilterUsers() {

    var arrOut = [];

    for (var numItemIndex = 0; numItemIndex &lt; arrItemSysId.length; numItemIndex++) {

      arrOut.push('&lt;li class="select2-search-choice"&gt;');

      arrOut.push('&lt;div&gt;');

      arrOut.push(arrItemName[numItemIndex]);

      arrOut.push('&lt;/div&gt;');

      arrOut.push('&lt;a href="#" onClick="removeCustomWatchListFilterItem(\'')

      arrOut.push(arrItemSysId[numItemIndex])

      arrOut.push('\');return(false)" role="button" class="select2-search-choice-close"&gt;&lt;/a&gt;');

      arrOut.push('&lt;/li&gt;');

    }

    $j("#myCustomInteractiveFilterSelectedItems ul:first").html(arrOut.join(''));

    $j('#myCustomInteractiveFilter span.select2-chosen').text(arrItemSysId.length == 0 ? 'ALL' : '');

  }

  function publishCustomWatchListFilter() {  

    var objFilter = {

      id : 'custom_watch_list_filter',

      table : 'x_operations_market',

      filter : arrItemSysId.length > 0 ? 'u_market' + arrItemSysId : ''

    };

    SNC.canvas.interactiveFilters.setDefaultValue({

      id : objFilter.id,

      filters : [objFilter]

    }, false);

    if (arrItemSysId.length > 0) {

      dashboardMessageHandler.publishFilter(objFilter.table, objFilter.filter);

    }

    else {

      dashboardMessageHandler.removeFilter();

    }

  }  

  function removeCustomWatchListFilterItem(strSysId) {

    if (typeof strSysId == 'string') {

      var numArrayIndex = arrItemSysId.indexOf(strSysId);

      if (numArrayIndex != -1) {

        arrItemSysId.splice(numArrayIndex, 1);

        arrItemName.splice(numArrayIndex, 1);

        rebuildCustomWatchListFilterUsers();

        publishCustomWatchListFilter();

      }

    }

  }

  function resetCustomWatchListFilter() {

    arrItemSysId = [];

    arrItemName = [];

    rebuildCustomWatchListFilterUsers();

    publishCustomWatchListFilter();

  }

  function addCustomWatchListFilterItem(){

    var strSelectedValue = $j('#myCustomInteractiveFilterChoice option:selected').val();

    var strSelectedLabel = $j('#myCustomInteractiveFilterChoice option:selected').text();

    if (strSelectedValue == "all") {

      resetCustomWatchListFilter();

    }

    else {

      if (!arrItemSysId.includes(strSelectedValue)) {

        arrItemSysId.push(strSelectedValue);

        arrItemName.push(strSelectedLabel);

      }

      rebuildCustomWatchListFilterUsers();

      publishCustomWatchListFilter();  

    }

  }

</script>

<g:evaluate>

var arrUserList = [];

var grUser = new GlideRecord('u_market_teams');

grUser.orderBy('name')

grUser.query();

while(grUser.next()) {

  arrUserList.push({

    name: grUser.getValue('name'),

    sysId: grUser.getUniqueValue()

  });

}

</g:evaluate>   

<div class="widget-content" style="padding:10px" id='myCustomInteractiveFilter'>

<select style="width:100%;" id="myCustomInteractiveFilterChoice" class="select2-search" onchange="addCustomWatchListFilterItem();">

<div class="form-horizontal container-fluid">

  <option value="all">ALL</option>

  <j:forEach var="jvar_type" items="${arrUserList}">

    <g:evaluate var="jvar_type" jelly="true">

      var strName = jelly.jvar_type.name;

      var strSysId = jelly.jvar_type.sysId;

    </g:evaluate>

    <option value="${strSysId}" label="${strName}">${strName}</option>

  </j:forEach>

</div>

</select>

<div id="myCustomInteractiveFilterSelectedItems" class="select2-container select2-container-multi interactive-filter__widget-content form_control" style="width: 100%;">

<ul class="select2-choices">

</ul>

</div>

</div>

</j:jelly>