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

Popular posts from this blog

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

Oracle APEX 20.1 Friendly URLs

Friendly URLs! It's been one of the most wanted feature in APEX from very initial days. It's one of the main complaints we hear from customers, especially for websites which are open for public. There are several benefits of having a friendly URL besides better user experience. Finally, the wait is over! APEX team has implemented this feature, probably in the most simplest way possible (for APEX developers). Big Kudos to the APEX Team. All you need to do is, just turn on a flag in application properties. Yes, you read it right.. Now, after enabling this flag, all APEX URLs will switch to new friendly URLs New URL Format: Example link - https://apex.oracle.com/pls/apex/hari/r/demo_app/home?session=714815362925554 Part-1:  https://apex.oracle.com/pls/apex/ - Host details, there is no change here Part-2: /hari/r -  Here hari  is work-space path prefix and  r  stands for router. You can modify "Path Prefix" at "Workspace Administration

Interactive Grid - Aggregate Validations

In Oracle APEX, validating Interactive Grid (IG) data at row level, is easy and straight forward. You just need to select "Editable Region" for the validation and then you can use IG column values using :COLUMN_NAME syntax in SQL and PL/SQL code. However, if you want to create a validation at table level or validation which uses multiple rows data, then it becomes tricky. Let's consider a simple example of budget planning, where you can allocate percentage for each category, like 10% for healthcare, 10% for education etc. Here, we need to implement a simple table level validation to ensure total allocation % does not exceed 100. Please refer  Interactive Grid - Client Side Aggregate Validations  for implementing this validation entirely on client side. You can use technique explained below for more complex validations that can't be done on client side (checking data from multiple tables, number of rows in IG are more than 50) Before jumping into the implemen