Add Filter function on Next Experience Gantt Component

[JohnDF]

Hi everyone, Hi @Brad Tilton,

I created a Gantt chart in the Xanadu Next Experience using the component in the UI Builder.

Now I want to add filter functions. The component doesn't have any settings for integrating filters; it only offers visualization options.

How can I add filters? For example, I want to be able to filter by status or active/inactive. I also want to filter by time periods: from-to and predefined periods like only records from the data source 1 year, 6 months, 3 months, and 1 month.

I can't find any information about this from ServiceNow. What good is a Gantt chart if I can't modify it? Any tips?

[Dibyaratnam]

Look, you have to think through and try to resolve it yourself.

The new state parameter is created to map it with the conditions in data resource as it will be dynamic.

that state param customEncodedQuery has to be intialized with the query you have mentioned above. you have mapped it as a JSON type with empty object. encodedquery can't be an object. so you need to change that and initialize with the static query.

Once filter is applied update the same state parameter and if filter is cleared then also update the state parameter to static condition.

I am not sure where you are using the state param encodedQueries

function handler({api, event, helpers, imports}) {
    const mergePARFiltersV2 = imports["global.mergePARFilters"]().v2;
    const { payload: { appliedFilters } } = event;
    api.setState('parFilters', ({ currentValue }) => {
        return imports['global.mergePARFilters']()(currentValue, appliedFilters);
    });
}

For the filter value retention in the filters, try this script inside the  Apply par filter client script.

[JohnDF]

@Dibyaratnam thanks for reply,

I got the "encoded query" part from the ServiceNow documentation, for building the parameter filter.

https://www.servicenow.com/docs/bundle/xanadu-now-intelligence/page/use/dashboards/task/configure-ev...

Anyway, the first part is enough for now. Unfortunately, the values don't persist in the filter. Unsolvable with the UI Builder; I can't find anything to fix it. But anyway, thanks for now.

Now, let's move on to the second part, my original question in the thread: the second filter. I now understand the concept thanks to you, but this is an even bigger challenge.

I've created a second filter with a date range because I want to get Gantt charts filtered by the planned start and planned end dates of the planned_task table within the time period I select. This is what my filter source looks like.

Again, I created a script with a dynamic encoded query and added it to the filter, preceded by the parameter filter.

api.setState('customEncodedQuery','sys_class_name=rm_product^ORsys_class_name=rm_release^ORsys_class_name=rm_release_phase^start_dateON'+event.payload.appliedFilters[0].start+'@javascript:gs.dateGenerate('+event.payload.appliedFilters[0].start+',start)@javascript:gs.dateGenerate('+event.payload.appliedFilters[0].end+',end)^end_dateON'+event.payload.appliedFilters[0].end+'@javascript:gs.dateGenerate('+event.payload.appliedFilters[0].end+'start)@javascript:gs.dateGenerate('+event.payload.appliedFilters[0].end+',end)');

But of course, the script doesn't work. When I click on the filter and select something, it only shows me records that don't have a planned_start and planned_end date.

I hope I don't have to add something to the encoded query. I tried this as an example in the backend, and this is the output.

sys_class_name=rm_product^ORsys_class_name=rm_release^ORsys_class_name=rm_release_phase^start_dateON2024-08-29@javascript:gs.dateGenerate('2024-08-29','start')@javascript:gs.dateGenerate('2024-08-29','end')^end_dateON2024-08-30@javascript:gs.dateGenerate('2024-08-30','start')@javascript:gs.dateGenerate('2024-08-30','end')

Problem will be the javascript part in the encoded query in the client script its chaning f.e. when I select last mont or something else.

sys_class_name=rm_product^ORsys_class_name=rm_release^ORsys_class_name=rm_release_phase^start_dateONLast month@javascript:gs.beginningOfLastMonth()@javascript:gs.endOfLastMonth()^end_dateONLast month@javascript:gs.beginningOfLastMonth()@javascript:gs.endOfLastMonth()

How can I reproduce this in the encoded query for the state parameter? This is my challenge right now

Thanks for your help.

[Brad Tilton]

I don't have a step by step for this specific scenario, but what you're going to need to do is built out some filtering capability using either a filter component, search component, or something else, and then apply the output of those filters to the input on your data resource. Filter output > client state parameter > data resource. 

It's probably a little simpler than what you're going for, but we do something similar in a creatorcon lab from earlier this year: https://servicenownextexperience.github.io/labs/CCL1199-K24-Killer-SAP/overview 

[Dibyaratnam · Accepted solution]

Please mark my answer as solution if it helped resolving your question.