Oracle APEX Tips & Techniques

Few years back, I have learned about Web Components. However, I did not get a chance to work on Web Components yet. It's been on my do to list to experiment Web Components, especially with in APEX. My current staycation gave me an opportunity to do this experiment. Web Components Web Components is a suite of different technologies allowing you to create reusable custom elements — with their functionality encapsulated away from the rest of your code — and utilize them in your web apps. In other words, using Web Components, we can create custom elements which are completely self contained with all HTML, CSS and JavaScript (JS) encapsulated in one place. And then we can use these new custom element in our web applications with out the risk of code conflicts. Functionality wise, they are similar to jQuery widgets, however to implement Web Components we don't need any additional libraries, all modern browsers natively support underlying technologies. If you are new to Web Components...

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

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

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

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

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

In Oracle APEX version 18.1, new feature "Email Templates" has been introduced. Before 18.1, either you have to embed html code in pl/sql code or you have to store HTML templates in one of your tables (or as html files in network share) with "substitution strings" (place holders) and then replace those "substitution strings" with actual values before sending email. If you are using latter approach, then it's easy to migrate your code to new "Email Templates" framework. Creating Email Templates: You can find email templates at "Shared Components > Other Components > Email Templates" section. When you are creating new email template, you may need to fill data for below fields. Template Name: Name you want to give to your template. It can't contain special characters. Only characters a-Z, 0-9 and spaces are allowed. Static Identifier: Unique template name with in the application. This will be used to call the...

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