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]

If I am understanding correctly, Look up multiple record is the data source from which you are getting the data. that data you are using in transform data broker to transform into something that the Gantt chart can take as input. Now on selection of filter, configure a state parameter and update it. Now this state parameter can be mapped to the lookup multi record datasource so that whenever the state param changes, your look up data source will refresh and send you the filtered data which you can transform using the transform data broker.

[JohnDF]

@Dibyaratnam

Okay, I tried it as you described and as @Brad Tilton  provided in the link and I've been working my way through Excersie 3.

1. Here's my filter component.
   
   
2. I created a client state parameter.
   
   
3. I added this as an event to the filter.
   
   
4. Then, as described in the article, I adapted the condition filter of my data resource with the state parameter.
   
   
5. Finally, I created a refresh event for the filter.
   
   

Unfortunately, nothing happens in the Gantt chart when I select a record in the filter and click "Apply".

Is the part with the payload call right? Need I adapt the filter data source, somehow?
This tool is a mess. How can this be the future of ServiceNow? @Brad Tilton 

[Dibyaratnam]

Before updating the client state parameter, do console.log(event) in a UX client script and check for the output on filter applied event i.e. map the client script to the filter applied event and remove the 'Update client state paramter' event handler. Now go through the event object and usually it returns the sysids. once go through it and appropriately set the client state parameter using api.setState method.

If you get the sys id, you have to fetch the name or text before passing it into the lookup data source.

[JohnDF]

@Dibyaratnam thanks for reply.

Okay, can you explain this in more detail? I've been working on this video tutorial for a while now, but it's not working. 

https://www.youtube.com/watch?v=rK7JuNJrLEw&list=PLkGSnjw5y2U6HotK0MQUbCrzVog_zBWat&index=12&ab_chan...

Here is my client state parameter.

Here is my script, which I've attached as an event handler to the filter.

/
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;
	});

}

It also uses a client script include.

And I've attached the state parameter to the lookup multiple data source's condition as usual.

I don't know what the event logging result is supposed to tell me. Here's what it looks like:

When I click "Apply Filter", still nothing happens.

Do you see the error here? Thanks for your help

[Dibyaratnam]

I can see, in the data resource you have mapped parfilters to the sysid field value which is incorrect. As you can see the console , for the filter_2, whatever value you applied, is inside event.payload.appliedFilters[0].values which is an array, that means you can select a single value or multiple value from the filter based on your component configuration.  

step 1- create a state parameter , appliedFilterValue - state parameter as JSON of type Simple array

step 2 - api.setState('appliedFilterValue',event.payload.appliedFilters[0].values);

so in the data resource, you need to map this particular value for the sysid as Sys ID is one of state.appliedFilterValue.