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 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. "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.

Few tips on Gantt Charts

Few Tips on Gantt Charts - Part 2

Custom Tooltips

Thank you.