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]

How is the input coming to the Gantt chart component. Create filters on the screen and send the filter values as input to the Scripts which is responsible for showing the data on the Gantt chart.

[JohnDF]

@Dibyaratnam thanks for reply, 
It sounds simple, but without guidance and screenshots in the UI builder, it's unclear what you're saying. I can't reuse anything from the Gantt. A data source is created on the planned_task table that returns all the necessary fields. I transform this with a data broker script into a JSON object in the format required by the Gantt. Here's the script:

function transform(input){
	var returnArray = [];
	var records = input.data;
	
	for (var i in records){
		var myObj = {};
		myObj.text = {
			value: records[i]._row_data.displayValue,
		    displayValue: records[i]._row_data.displayValue
		};
		myObj.id = records[i]._row_data.uniqueValue;
		myObj.startDate = {
			value: records[i].start_date.value,
		    displayValue: records[i].start_date.displayValue
		};
		myObj.endDate = {
			value: records[i].end_date.value,
		    displayValue: records[i].end_date.displayValue
		}
		myObj.short_description = {
			value: records[i].short_description.value,
			displayValue: records[i].short_description.displayValue
		};
		myObj.state = {
			value: records[i].state.value,
			displayValue: records[i].state.displayValue
		};
		myObj.active = {
			value: records[i].active.value,
		    displayValue: records[i].active.displayValue
		};
		myObj.start_date = {
			value: records[i].start_date.value,
		    displayValue: records[i].start_date.displayValue
		};
		myObj.end_date = {
			value: records[i].end_date.value,
			displayValue: records[i].end_date.displayValue
		};
		myObj.parent = records[i].parent.value;
		
		
		returnArray.push(myObj);
	}
	
	return returnArray;
}

This transform script data source is then added to the records list of the Gantt component. So far, so good.

But how does this help with filtering?

I've added two filters. One is a multiple select filter on the planned_task table that returns the short_description.

As you can see in the screenshot, I want to select "Configuration Management" and only see that in the Gantt. That's how it should look.

Now, the second filter is a date filter. It also uses the planned_task table, and I want to display data when I select the last 6 months based on that it should display me all the records where the planned_start_date and planned_end_date is the last 6 month.

Here are screenshots.

Can you describe where you would integrate your described scenario? For the filters, I've configured static input, in case the dynamic approach doesn't work. But it should be a start and show what I want to achieve.

Thanks for your help.

[Dibyaratnam]

I have not implemented anything as such so I don't have any necessary screenshots. sorry for that.

So in the script, you are returning returnArray which is constructed using data from records( var records = input.data;). From where you got this records,what is this data. If you filter the data that's coming up in records, your issue will be solved right.

Now this is what i need to understand. I suppose this will be a transform data broker returning data from a Script Include. can you share that screenshot. I suppose that will be getting called on page load. so the same data broker you need to refresh once you select the filter as well. I will need more details from your side on this.

[JohnDF]

@Dibyaratnam thanks for reply,

No, as I said, that script addresses a different issue. I've already developed the method for building the Gantt chart.

The current problem is filtering. You suggested creating a new script for filtering, but I don't know how to connect it to the Gantt chart.

What I posted is, as mentioned, a Transform Data Resource. I've configured its properties to receive the results from a lookup multiple data source – the data needed to build the Gantt chart. This source always returns JSON, which I process with the Transform script broker for the Gantt chart.

I don't think that's helpful in this context. I could create a second script with a different array output and connect it to a filter component, but that brings me back to the original problem: how do I connect this filter to the Gantt chart?