It's been a while since my last XPages Post. While I was working with a couple of Admins on Firewall and CDN updates for a DoS Attack on one of our big web development customers, I had some time on my hand to play around with Frappe Gantt JS and XPages. This post is the first of a series on how to make interactive Gantt Charts available through XPages. First up - getting data out of Domino and surfacing them as Gantt Chart in an XPage.

Before we start coding, here's the link to the Frappe Gantt Chart project and the GitHub repo:
https://frappe.io/gantt
and
https://github.com/frappe/gantt

Here's a screenshot, of what we want to achieve today:

So first off, we start in Designer and build out a sample form (ugly as a notes form can be) plus a view the show and read our data.

Here, you can see the necessary fields that we need to display the data. The sort field is used to specify the order in the view and to be able to resort columns for now.

Now, let's build a view where we can add tasks and display the documents in Notes:

Pretty straight forward. Now, to present the data, we will be using a JSON-Rest-Service from the Extension Library to generate the data via a GET-Request. Therefore, I created a new XPage in my Database called "Tasks.xsp" that contains the service definitions like so:

This returns the JSON Data if we call it using the pathInfo variable appended to the XPages name:

[ { "@entryid":"1-7736007ED4EC9492C1258836004DDB9D", "@unid":"7736007ED4EC9492C1258836004DDB9D", "@noteid":"38F6", "@position":"1", "@read":true, "@siblings":3, "@form":"Task", "id":"HVOT-CE2JMJ", "sort":"1", "name":"Test Project", "start":"2022-05-02T15:22:45Z", "end":"2022-05-27T15:22:45Z", "dependencies":"", "progress":0, "Form":"Task" },...]

Now that we have the data at our disposal, I created the XPage to surface the data. To do this, I had to add to add three files to the nsf project - the .js-files for the package plus the basic css and my own css add ons for the rendering of the ganott chart:

I also added the css files into the resources folder:

the gantt_sit.css contains the CSS changes from the Frappe Sample app:

Now, let's assemble our XPage. Let's start with the structure:

This will load the needed JS lib and the CSS files. Now, we need to add a DIV-Container to add the gantt chart later on:

To read the data and to show the gantt chart, I included an Output Script and added the necessary client side JS Code:

And that's it for part #1 - next up: adding event listeners and writing changes back to Domino. Stay tuned !

Heiko.