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.

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

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

Oracle APEX Stylish Radio Buttons

Do you know you can convert your radio buttons into something stylish and fancy almost declaratively in Oracle APEX? If you are not aware about this, then you may find this blog post useful.  Pill Buttons You can easily convert radio buttons into pill buttons using "Template Options". Select Radio button item, and in item properties, go to  "Appearance > Template Options > Advanced". Look for option " Item Group Display " and choose the option " Display as Pill Button ". That's it. You radio buttons will be converted as cool "Pill" buttons.  Display Radio Buttons as Icons You can display icons instead of label text. For this, all you need to do is In item LOV, write "icon html" as "Display Value". e.g. icon html code <span aria-hidden="true" class="fa fa-emoji-big-eyes-smile fa-3x"></span> In item properties, set "Escape special characters" as "Off" T