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?

[JohnDF]

@Dibyaratnam 

Hi @Dibyaratnam 

Super, thanks for the feedback, it works as expected. Now I have two more adjustments I need, where you might be able to help me. I have the condition set as 'AND'. Because of this, the Gantt chart shows no values during loading; they only appear when I select something in the filter. But if I use 'OR' as the condition, nothing happens. How would I solve this problem?

Secondly, when I select something in the filter, it's displayed in the Gantt chart as expected, but it doesn't retain the applied filter. When I open the filter again, it's empty.

I can't find the appropriate settings in the filter. Could it be related to the refresh event after the client script?

But if I remove it, the filter doesn't work and doesn't search for what I select. Where else would I need to adjust the settings to get the expected behavior? Thanks for your help.

[Dibyaratnam]

For the 1st thing, as the condition for your data resource now involves a dynamic value for sysid, you have to make the whole condition as dynamic and bind it with a state parameter so that you can update that state parameter if the filter is selected or applied filter is cleared.

to accomplish this, you can create a string type state param and set the encoded query as its value. whenever you select the filter value update the state parameter by writing updated encodedquery.

For the 2nd issue, add the parfilter related script on filter applied event. the script you had shared previously. I can see it's not added to the event. once its added, your issue will be resolved.

function handler({api, event, helpers, imports}) {

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

}

Also you don't need to explicitly call the refresh event of the data broker on filter applied. once you map the condition property with state parameter and when to run as "Explicitly called" , it'll be refreshed whenever the condition property changes.

[JohnDF]

@Dibyaratnam 

I apologize for asking so many questions, but I can't find a suitable example scenario. I'm creating more and more state parameters and scripts and I'm slowly getting confused. Now I've constructed it as you suggested. Now I simply receive 1000 records after selecting a filter, and the filter is still not applied.

I'll show you the whole structure again. Where do I need to rebuild something? Please help me describe it in more detail; it's very abstract.

I don't understand this part of your instructions: "whenever you select the filter value, update the state parameter by writing the updated encodedquery." Where and how do I write this updated script? 

1.All client state parameters

2.Addes condition to data resource. 

3.scripts

4. filter events

5.Here is the Behavior:

onload of the Gantt its fine and es expected:

Now again wrong with the new state paramter -> its filters nothing. Iselect this 3 and push apply:

Filter is no again empty ad receive now 1000 records and not the 3 select.

I think I have everything; I just need to put it together. Thanks for you intensive help

[Dibyaratnam]

step 1. In the filter applied event, first add the Apply Par filters script as the event handler.

step 2. Based on the filter you select, you should create the dynamic encodedquery as well, as you are using the dynamic value of condition in your data resource.

eg. api.setState('customEncodedQuery',staticCondition+'^prodSYSIDIN'+event.payload.appliedFilters[0].value)

if you clear the filter, then update the encodedQuery again as , api.setState('customEncodedQuery',staticCondition);

you can use the populate product script to add the above script lines. Now add this script to the event, so this will be the 2nd event handled in the event mapping.

step 3. Now in the data resource, bind the customEncodedQuery state parameter to the Condition property

I can see encodedQueries state parameter in the script of yours but you can check the logs of it. is it updating correctly else use any other state param as I have suggested above.

Also first try with single filter. I can see you have added two filters.

[JohnDF]

@Dibyaratnam thanks for reply.

You keep introducing new variables and state parameters. I don't understand where to put what based on your explanations. Can't you address the screenshots I'm posting? This is too abstract.

Here's my data source condition:

sys_class_name=rm_product^ORsys_class_name=rm_release^ORsys_class_name=rm_release_phase

I want this set at the beginning when the Gantt chart loads; it shouldn't change. When I add customEncodedQuery as a condition, as you described, it shows all 1000 records from the table when the Gantt chart loads. This is incorrect. When I use the filter and select something, it shows me the expected results. But there's no "clear filter" option; it's grayed out when I reopen it, and the selected records are no longer selectable, as shown in the previous screenshots. The second filter isn't used, so it can stay. Once we understand this, we can move on to the next filters; dates will come into play later, but that's a separate issue.

This is my current setup.

The Code inside: 

api.setState('customEncodedQuery','sys_class_name=rm_product^ORsys_class_name=rm_release^ORsys_class_name=rm_release_phase^sys_idIN'+event.payload.appliedFilters[0].values);

Here the Video. The filter works, but the filter is empty after I reopen it, and I can't clear it. 

Thanks for your help.