Custom interactive filter implemented for date is not working after Orlando version upgrade


Description

After upgrading to the Orlando version, the custom interactive filter for the date range is not working correctly. The custom interactive filter was taken from the community article 

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

This article only applies to the date type filter implemented using the approach specified in the above community question. 

Release or Environment

Orlando and above 

Cause

In the Orlando version, there are some enhancements made to custom interactive filter behavior. The example provided in community article above is not per the modified guidelines and so does not work correctly after upgrading to Orlando.

The following two things are mandatory to apply the custom interactive filters: 

  1. Users need to call SNC.canvas.interactiveFilters.setDefaultValue method
    2. Call dashboardMessageHandler.publishFilter() method

The example provided in the documentation "Custom Interactive Filter Example" is per the modified guidelines and users are recommended to follow this example while implementing the custom interactive filter. 

Review Custom interactive filter basics

Resolution

To resolve the issue, modify the UI macro code to follow the guideline and include 

  1. Call SNC.canvas.interactiveFilters.setDefaultValue method
    2. Call dashboardMessageHandler.publishFilter() method


For example, you can add methods for PublishFilter and ClearFilter from the documentation: 

  function my_publishFilter(queryStr) {
   var filter_message = {};
   filter_message.id = "my_unique_id";
   filter_message.table = "${jvar_table}";
   console.log("table "+ filter_message.table);
   console.log("query "+ queryStr);
 
  <!--     Add your own filter query logic here -->
   filter_message.filter = queryStr;
   SNC.canvas.interactiveFilters.setDefaultValue({
     id: filter_message.id,
     filters: [filter_message]
    }, false);
   my_dashboardMessageHandler.publishFilter(filter_message.table, filter_message.filter);
  }
 
  function clearFilter() {
   var filter_message = {};
   filter_message.id = "my_unique_id";
   filter_message.table = "${jvar_table}";
   filter_message.filter = "";
   SNC.canvas.interactiveFilters.setDefaultValue({
     id: filter_message.id,
     filters: [filter_message]
    }, false);
   my_dashboardMessageHandler.removeFilter();
  }

Define the DashboardMessageHandler and modify the method for "handleChangeSelection" to use this publishFilter method instead. Users can use the "clearFilter" method from DashboardMessageHandler to clear the applied filter. 

var my_dashboardMessageHandler = new DashboardMessageHandler("my_unique_id");
  
  function handleChangeSelection() {
    var value = operatorSelectBox.val();
    var fieldSelected = fieldsSelect.val();
    console.log(fieldSelected);
    fieldSelected = 'opened_at';
    var queryStr;
    
    console.log("value " + value);
    if(fieldsSelect.val() === 'all') {
     $j("#" + uuid + " .filter-block").hide();
     clearFilter();
    } else if(value === "SELECT"){
       $j("#" + uuid + " [other-block]").hide();
       $j("#" + uuid + " [between-block]").hide();
       fromSelectBox.val("");
       toSelectBox.val("");
       clearFilter();
    } else {
    
     if(value === "ISEMPTY" || value === "ISNOTEMPTY" || value === "ANYTHING") {
      queryStr = fieldSelected + value;

     } else if(fromSelectBox.val() !== "") {
      if(value === "BETWEEN") {
       if(toSelectBox.val() !== "")
        queryStr = fieldSelected + value +fromSelectBox.val() + "@" + toSelectBox.val();
      } else if(value === "ON" || value === "NOTON") {
       queryStr = fieldSelected + value + fromSelectBox.val();
      } else if(value === "lt") {
       queryStr = fieldSelected + $j("#" + uuid + " #filerTableSelect > option[value='" + value + "']").attr("val") +  fromSelectBox.val();
      } else if(value === "lteq") {
       queryStr = fieldSelected + $j("#" + uuid + " #filerTableSelect > option[value='" + value + "']").attr("val") + fromSelectBox.val();
      } else if(value === "gt") {
       queryStr = fieldSelected + $j("#" + uuid + " #filerTableSelect > option[value='" + value + "']").attr("val") + fromSelectBox.val();
      } else if(value === "gteq") {
       queryStr = fieldSelected + $j("#" + uuid + " #filerTableSelect > option[value='" + value + "']").attr("val") + fromSelectBox.val();
      }
     
    }
    my_publishFilter(queryStr);
   }
   
  }

Additional Information

Attached here is an example of this working UI macro. The example uses opened_at field on incident table and query is hardcoded to use this field alone. Please note this is NOT A SOLUTION but a guideline to customize the UI macro per your customization. Please contact ServiceNow Support in case further assistance is needed.