Gantt charts offer a valuable visual representation of time-related activities within your application. Oracle JET provides an advanced Gantt component with numerous built-in features and capabilities. In this blog we show you how to integrate Gantt charts into your Visual Builder application.
Incorporating a basic Gantt chart is straightforward; simply add the Gantt component to your page and utilize the "add data" quick-start dialog to map the Gantt to data sourced from business objects or REST services. This results in a clear depiction of each task on a separate line.
Parent-Child Gantt Structure
An alternative task representation involves displaying multiple tasks per row, each associated with a specific task owner. This approach requires a nested parent-child data structure, with an array of parents (owners) and corresponding arrays of children (tasks) for each parent.
When retrieving data from business objects or Fusion Apps REST services, the 'expand' parameter in a REST call can be utilized to obtain the children for a particular parent in a single call. Remember to enable accessor access in the relationship defintion of the business objects. For further details, refer to the blog post on navigating relationships in business objects.
It is important to note that the data structure returned by the REST call may need to be adjusted to match the expected format for the JET component. To achieve this, a new data type can be created to match the required structure for a row, followed by the creation of an ADP to store an array of these records. Check the data structure in the JET cookbook sample to see the expected format.
In our example, an action chain is employed to fetch the data from the REST service, iterate through the returned records, and append them to the ADP data. The action chain code is as follows:
async run(context) {
const { $page, $flow, $application, $constants, $variables } = context;
const response = await Actions.callRest(context, {
endpoint: 'businessObjects/getall_Department',
uriParams: {
expand: 'projectsCollection',
},
});
const results = await ActionUtils.forEach(response.body.items, async (item, index) => {
const aDept = { "id": item.id, "department": item.department, "items": item.projectsCollection.items };
await Actions.fireDataProviderEvent(context, {
target: $variables.MyADP,
add: {
data: aDept,
},
});
}, { mode: 'serial' });
}
Finally, add the Gantt component, along with the necessary row and task templates, to the page, ensuring that the attributes are assigned according to the defined data structure.
For a comprehensive walkthrough, refer to the video that demonstrates the entire development process.
Here is the HTML code for our Gantt chart: