Set up interactive filter on UI builder (for data visualization reports and List records)

[Hemanth M1]

This is a common ask to set up a interactive filters on reports and dashboards, we are aware how to configure them in the native view.

How do we do it on UI builder???

below steps explains to do it on the UI Builder.

Few points to note here:

1)Existing UI builder "Filter" component is only supported for data visualization type reports.

2)We are using Drop down component to configure filter on list records (you can leverage different components like input..)

3)if you are configuring filters on dashboard experience below steps are automatically inherits.

A)Unified interactive filters on the Data visualization reports.

1)Go to the page you want to have the filter UI Builder>My experiences>Open your experience>Select the page

2)Add a Filter component on to the page (always recommended add inside the container):

3)Add data to the filter in the config tab:

Enable>> if this field should be applied to tables in the hierarchy (in this scenario if its needed on Problem/change/RITMS…) and you can also add additional tables to filter on.

4)Set Default value and sorting if required:

5)Create Data visualization report (example: Incident count assigned to me):

6)Create client state parameter as below:

7)Create a page script to broadcast filter value form filter to Data visualization report:

• Name script name as “apply filter”
• Add the existing script include named “mergePARFilters”
• Add below script in the script section

• function applyFilter ({ api, event, imports }) { api.setState('parFilters', ({ currentValue }) => { const { payload: { appliedFilters } } = event; return imports['global.mergePARFilters']()(currentValue, appliedFilters); }); }

 

8)Configure event to send the filter value:

We are done with the configuration 😀😀

Result:

Before applying the filter:

Lets apply the filter for P1 incident count:

B) On list records

1)add a drop-down component (always recommended add inside the container):

 

2)Configure drop down values (this can be done using dynamic data biding or through script)

 3)Add a list component:

4)Create a client state parameter:

5)Configure an event to sent selected value from drop down component :

6)Update the dynamic filter on the list component :

 We are done with the configuration😀😀

Results:

Before>>

Let’s select High priority incident:Thank you,

Hemanth