Skip to main content

Defining Link for Gantt Chart

If you have worked with Gantt Chart, you may have noticed that it does not support "Link" feature where as other chart types support it. This is because Gantt chart is based on ojGantt API which does not support link feature, where as other chart types uses ojChart API and ojChart does support "Link" feature. Luckily, Gantt charts supports "selection" feature and we can use this feature to implement (mimic) link feature.

To demonstrate this, let's considered a simple use case "Whenever user clicks on task bar, then we need to take user to 'Edit Task' page".

To implement this, first, we need to enable "selection" feature on Gantt chart. By default, this option is disabled. For this, we need to write below JavaScript code in "Gantt Chart > Attributes > Advanced > JavaScript Initialization Code" section.

Gantt Chart Link
Gantt Chart JavaScript Initialization Code

function (options)
{
  options.selectionMode = "single";
  return options;
}

Next, create a hidden page item to store value of TASK_ID. Ensure "Value Protected" option is switched off for this item. In this e.g. item name used is P28_TASK_ID.

Next, we need to capture the click event and we need to mimic the link behavior. For this create a Dynamic Action like below.

D.A. to Capture Gantt Chart Link
D.A. "Handle Gantt Chart Link"

  • Create DA and give it a proper name e.g. "Handle Gantt Chart Link"
  • In "When" Section, select
    • Event: Custom
    • Custom Event: ojoptionchange
    • Selection Type: Region
    • Region: Gantt Chart Region
  • In "True" section, choose "Execute JavaScript Code" action and put below JavaScript code in "Code" section.
try {
  var data = this.data;
  //check which data is avilable from Gantt Chart
  //console.log(data);
  var lTaskId;
  // check if selection is changed
  if (data.option === "selection") {
    // get current selection
    // This gives column value selected at "Gantt Chart > Series > Column Mapping > Task ID"
    lTaskId = data.value[0];
    // Set Task id to hidden page item and submit the page with EDIT_TASK request
    apex.page.submit({
      request: "EDIT_TASK",
      set: {
        "P28_TASK_ID": lTaskId
      },
      showWait: true
    });
  }
} catch (err) {
  apex.message.clearErrors();
  apex.message.showErrors({
    type: "error",
    location: "page",
    message: "JavaScript Error" + err.message,
    unsafe: false
  });
}

And finally, create a "Branch" at "After Processing" point to navigate to "Edit Task" page. Here we can pass P28_TASK_ID to target page.

Here, I have chosen to submit page instead of redirecting to "Edit Task" page using apex.navigation.redirect. Because,
  1. If the target page needs checksum, and if we use "Submit + Branch" approach, then APEX will take care of checksum automatically. We can't use "Redirect" approach with out valid checksum value. In this example, I have set "Page Access Protection" to "Arguments Must Have Checksum" for "Edit Task" page. We can see this in demo.
  2. In general, generating URLs at client side or hard coding URLs in JavaScript is never a good idea.
However, there is a catch with this approach. If someone uses apex.page.submit with EDIT_TASK as request and sets P28_TASK_ID value to any other value which they are not supposed to view/edit, then they may be able to open "Edit Task" page for the task. We can prevent this by adding server side "Validation" in "Gantt Chart" page. Create validation to ensure current user has privilege to view/edit the task specified in P28_TASK_ID item. We can make this conditional so that this validation only fires when :REQUEST = 'EDIT_TASK' AND :P28_TASK_ID IS NOT NULL

When you are here, you may check out another work around provided by Pierre Yotti for this issue. You can see this in Oracle APEX Forum.

Link for Demo

You may be also interested in my previous blog posts on Gantt Chart topic.

Thank you.

Comments

d3vaguru said…
Hi Hari, thank you for sharing! This really helped me out. Can you please suggest what I could do to set the Row ID in another hidden item along with the Task ID?
Hari said…
Hi,

If you uncomment "console.log(data);" line, you can see what data are we getting from gantt chart click. As we can see, we don't get Row ID from this event. However you can use below work-arounds

1) Make an AJAX call to server to get "Row ID" based on "Task ID"
2) Concatenate "Task ID" and "Row ID" in SQL level to "Task ID" column. Then, in JavaScript, you can split concatenated IDs into "Task ID" and "Row ID" and then you can do whatever you want with those IDs
d3vaguru said…
Thank you for the suggestion Hari. I did initially check the console.log(data) output and noticed that the array had only 1 value. I did what you suggested in 1). However, I was wondering if dataContext.rowData or dataContext.parentElement (from your example of custom tooltips) could be used to get the Row ID on click as it seems to have this information. I apologize if I sound like an idiot but I am very new to this and have a long way to go to even understand simple things so please be kind :)
Hari said…
AFAIK, dataContext object was not available for "selection" event. You can explore more about Gantt charts in Oracle JET Cookbook. https://www.oracle.com/webfolder/technetwork/jet/jetCookbook.html?component=gantt&demo=selection
Elena said…
Thank you for sharing the article. I tried that and ran into an issue - when editing modal dialog opens, the data is loaded based on the id I pass in from the chart task but the page appears greyed out and
as if it is still loading. Very strange. Can’t figure out why
Hari said…
Hi Elena,

Please try setting "showWait" to "false" in above JavaScript code. or you can completely remove showWait part.

showWait: false
Unknown said…
Hey Hari,

thanks for this blog, it has been very helpful to me, I do have one question though. In my gantt chart, when I have multiple tasks for one person and those tasks only last one day, those are displayed with a 'diamond' symbol, but the issue is that they are overlapping and you cant see that there are multiple tasks. I have found these setting on the jet cookbook:

task-defaults.overlap.behavior="stagger"
task-defaults.overlap.offset="6"

however, I cant seem to make them work in the oracle apex options. Do you have a solution for this?

Thanks again for your work and if you could help me out I would appreciate it very much.
Hari said…
Hi,

Diamond symbol is used for milestones. It appears when start date and end date both are exactly same. To overcome this issue, you can specify end date as below. You can see similar code in my other blogpost https://srihariravva.blogspot.com/2019/12/few-tips-on-gantt-charts.html

end_date + 1 - 1 / 1440 end_date

Regarding overlap behavior, you can modify taskDefaults property as below.


function (options)
{
options.taskDefaults = {"overlap":{"behavior":"stagger","offset":"8"}};
return options;
}


You need to put this code in "Gantt Chart > Attributes > Advanced > JavaScript Initialization Code" section.
Madlen said…
Thank you so much! It works perfectly and with your great description, it was easy to implement.
Mathieu said…
Hi Hari,
There is also another DA solution to trigger a click event on the gantt chart.

Under Appearance of the serie there is the possibility to add a Task CSS Class.
For example you can add the class "clickTask"
The class will be added to a html path element.
The parent of this element is a g element.

When you click on the task the g element gets an id like "_dvtActiveElement..._rowname
You can strip the row name from the id.

If you are using a row id to have multiple tasks on one line the row name will be different from the task name. When you need the task name for the link instead of the row name, put the label in the tooltip (see gantt attributes)
This way the task name is added in the aria label of the g element like
Start: Oct 12, 2023, 8:53:18 PM; End: Oct 12, 2023, 9:09:57 PM; Label: 524934409
Note: In my case I put the id that I need for the link in the task name.

Now create a DA on the Click event with jquery selector .clickTask
With a javascript action you can get the aria-label:
var label = $(this.triggeringElement).parent().attr("aria-label");
console.log("label = " + label);

Then strip the label value from the string:
/* Strip the task name from the tooltip */
var taskName = label.split(";")[2].split(":")[1].trim();
console.log("taskName = " + taskName);

This way you don't need the selectionMode on the gantt chart that fires all the time on rendering.
tdobe said…
How is this dynamic action triggered if it's of a custom type? And onclick doesn't work because it doesn't pass the task data to task_id
tdobe said…
ojoptionchange - ok this is trigger ;)

Popular posts from this blog

Interactive Grid - Conditional Enable/Disable

In this blogpost, I am going to discuss few approaches using which we can conditionally enable/disable Interactive Grid (IG) column(s) based on other column(s) values. Note:    There is a bug  30801170  in APEX 19.2/20.1 with respect to "enable/disable" dynamic actions for IG columns. Workaround for this bug is provided at the end of this blogpost . This bug has been fixed in APEX version 20.2. Client Side Only Conditions If conditions to enable/disable are simple, then we can check those conditions easily on the client side. For e.g. let's consider IG on EMP table with following SQL Query. SELECT EMPNO, ENAME, JOB, MGR, HIREDATE, SAL, COMM, DEPTNO FROM EMP Let's consider the requirement as - Enable "Commission" column only when JOB is equals to 'SALESMAN' and disable "Commission" column in all other cases. This can be done declaratively using dynamic actions (DA) DA "Enable/Disable Commission - 1" Create DA and give it a prope

Interactive Grid - Bulk Operation on Selected Rows

What's the Problem? Let's say you have an IG on employee table and you want to update selected employees commission based on user's input. Ideally, it should be very simple, where you can write UPDATE statement in page process and select IG region as "Editable Region" under "Execution Options" of the page process. But, when you select rows and submit page, you can see that, this process won't get executed! The reason is  Selection of 'Row Selector' check-boxes is not considered as row-change. Thus selected rows are not submitted to server. So, is there any work around?  Yes! Luckily there are lot of JavaScript (JS) APIs available to work with IG. If you are not already aware, you can refer "APEX IG Cookbook"  or  JavaScript API Reference documentation. If we continue with above Employee IG example, when user selects IG rows, enters "Commission %" and clicks on "Update Commission" button, then we can writ

Few tips on Gantt Charts

Oracle APEX offers several beautiful chart types which are based on Oracle JET Data Visualizations. Gantt Chart is one such beautiful and useful chart. However, when I have searched in Google for some help on Gantt Charts, there are not many blogs posts talking about it. So, I thought, I could write one with few basic tips which I have learned this year. I have used Gantt Chart to display employees calendar data and my targeted output was something like below. Pic-1 Looks simple, correct? However, it's little tricky to get there. Multiple Tasks Per Row: When I look at the output, first I thought, I will have to write a query which gives tasks data and employee data with 1 row per task. That is, if there are 10 tasks to be displayed, then there should be 10 rows in SQL query output. But, it's not correct. Instead, I should have 1 row for each task + 1 row for each employee (parent). So I need to write a query which will output data in below format. Pic-2 A