UI Builder || Filters with encoded query to filters data visualizations

[JagjeetSingh]

Is there a way to use encoded query to filter the data visualization components.

Do you want to filter the reports if the short description of your record contains a certain keyword. YES!!!

The OOTB filter component allows us to filter the reports with boolean, reference, choice and date type fields. You can see official documentation here or see my reply on this community post to see how it works.

In this article we'll see how we can apply our own custom queries to data visualization components. 

The "parFilters" state parameter:

The data visualization components are configured OOTB to follow state parameter named "parFilters". This state parameter holds JSON in a particular format. Even if you don't add any filter component on your page and have this state parameter set with some values, your data visualization components would follow it(if they are set to follow filter) and filter would be applied on them.

{
  "appliedFilters": [
    {
      "order": 0,
      "filterId": "1gk5qg57v4a1ebq0gu2g", 
      "type": "choice", 
      "label": "State",
      "apply_to": [
        "incident.state" //More tables are added in comma separated values here if you select apply to all tables in hierarchy.
      ],
      "values": [
        "1",
        "2"
      ],
      "extraValues": {},
      "include_unmatched_or_empty": false
    }
//More filters can be added here
  ]
}

The filter component produces output in format specified above. Once we have this output we know that we can use it to set our state parameter "parFilters".

If you add more than one filter components on your page then those filters are applied and corresponding filter object output is pushed in parFilters > appliedFilters.

Now, to push our own encoded query filter we need to build our filter object in below format.

{
        "order": 0,
        "filterId": "",  //We can leave this empty or you may choose to generate a unique id for tracking
        "type": "query",
        "label": "Short Description",
        "apply_to": [
            "incident" //More tables can be added here in comma separated values
        ],
        "encoded_query": "YOUR_ENCODED_QUERY"
        "extraValues": {},
        "include_unmatched_or_empty": false
    }

In example shown in video, I am getting input from user > Clicking on "Apply" triggers my client script to generate the encoded query based on user input > Process the filter object and set parFilters state parameter.

Client script used: Note that I've used "mergePARFilters" script include to build the final filters to be applied. This is available OOTB.

 //set text filter presence
    api.setState("textFilterPresence", api.state.shortDescription ? 'presence-available-outline' : null);

    const appliedFilters = [{
        "order": 0,
        "filterId": "", //We can leave this empty
        "type": "query",
        "label": "Short Description",
        "apply_to": [
            "incident" //More tables can be added here
        ],
        "encoded_query": api.state.shortDescription ? `short_descriptionLIKE${api.state.shortDescription}` : null, //If you have applied a default filter on your visualization component then add that here instead of null.
        "extraValues": {},
        "include_unmatched_or_empty": false
    }];

    const processedFilter = imports['global.mergePARFilters']()(api.state.parFilters, appliedFilters);
    api.setState("parFilters", processedFilter);

You can add your own logic to trigger the script and apply custom filter and unleash the power of encoded query to filter your visualizations.

You can download the portal I've shown in the video on below link.

https://github.com/jdsingh206/encodedQueryFilter

Any feedback is appreciated. 🙂

[geusa]

Hello,

This is very interesting. Did you also try to combine two filters of type "query" (ie a filter with an encoded query)? In my dashboard this doesn't work. The combination of multiple type "choice" filters does work though. Also the combination of a type "choice" filter + a type "query" filter does work. But as soon as I try to apply two type "query" filters, only one of them is applied to the data visualizations.

[DanBye_KA2]

Hi Jagjeet, can this "widget" be used in a Platform Analytics dashboard IE not in a workspace or page? If so, how?