Skip to main content

Posts

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

Adding custom quick filter to Interactive Grid column

When we click on IG column header and if filtering is enabled for that column, then depending on column type, quick filtering "options" (distinct values or date filters) will be displayed. In a recent demo, one of the users has asked, is it possible to show any control to quickly filter for rows having no value for the selected column, like "(Blanks)" filter in Excel. First thing that came to my mind was to use COALESCE for nullable columns and display "(Blanks)" text instead of NULL. This works well for string columns, but not for columns with DATE or NUMBER types. Also, if we use this approach, we need to ensure "(Blanks)" text won't be displayed in downloaded files. We can solve our problem if we Somehow add new "control" in column header menu Apply "Is Empty" filter, preferably using JavaScript, when user selects/clicks new "control" When we click on column header, then APEX appends dynamic DIV element with I...

Oracle APEX - Few Interesting Points

In this blog post, I am going to touch upon few interesting points I have discovered in my Oracle APEX journey. If you are new to Oracle APEX development, you may find this blogpost useful. PL/SQL Expression vs SQL Expression APEX offers us several condition types for server-side conditions. However, there are two condition types which looks almost same. They are "PL/SQL Expression" and "SQL Expression". So, are there any differences between these two condition types or are they actually same? Here is simple definition for these condition types, in my own words. PL/SQL Expression: As the name says, any condition which evaluates to TRUE or FALSE and which can be used as condition with IF statement in PL/SQL can be specified as "PL/SQL Expression". SQL Expression : Similarly, any condition which evaluates to TRUE or FALSE and which can be used in SQL Query can be specified as "SQL Expression". However, there are few "PL/SQL Expression" c...

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 Gantt Charts - Custom Tooltips

For showing tooltips on Gantt Charts, just go to "Gantt Chart > Attributes > Tooltip" and select "Yes" for "Show" option. However, this will show standard tooltip and there is no option for customization. In APEX ver. 20.1, there are few more granular options to control on data we want to display in the tooltip. However, still we need to choose from existing options. Luckily, we can implement custom tooltips in relatively easy way. If you are new to Gantt charts, I recommend you to read  Few tips on Gantt Charts  blogpost first. Gantt Chart Options First, we need to specify JavaScript function name, which will return a tooltip element, in the Gantt chart options. In below code "showCustomTooltip" is JavaScript function which return the tooltip element. function (options) {   options.tooltip = {"renderer":showCustomTooltip};   // with older APEX (JET) versions use below code   // options.tooltip = showCustomTooltip;   return option...

Export Application Search Results to CSV file

Whenever I need to modify any backend object (altering table, modifying view or changing function/procedure specifications etc.), then I search for object usage in APEX using "Application Search". Sometimes, I find several references for the object and I wish if I could just export them into a excel/csv file, so that I can review them at later point. However, there is no "export" functionality available in "Application Search" pop-up page (APEX Builder Application 4000, Page 8000).  So, I have written below JavaScript code to export search results into a CSV file. (function () {     // CSV delimiter     var csvDelimiter = ",";     var encloseChar = '"';     // define array to hold search results var refArr = [];     var refPath, refAttr, refPathPrev;     // add headers     refArr.push("Reference Path" + csvDelimiter + "Attribute");     // append search results to array $("table.htmldbStandard3").eac...

Few Tips on Gantt Charts - Part 2

In one of my previous blog post,  Few tips on Gantt Charts , I have explained how you can create Gantt chart to show employees calendar data. In this blog post, I am going to explain two more tips on the Gantt chart. This is continuation of previous blog post. So, if you have not read it yet, I recommend to read it first and then come here. Vertical Grid for Minor Axis If you go to Gantt Chart > Attributes, there you can enable vertical and horizontal grid lines using "Show Vertical Grid" and "Show Horizontal Grid" options. In our example, horizontal grid lines displays a line after every employee row. This looks good. However, vertical grid lines are displayed based on "Major Axis". So if "months" are displayed as scale for major axis, then vertical grid line is displayed after every month. However, it will be helpful if we display vertical grid line after every day (minor axis), especially when there are several employees in the Gantt chart....