Oracle APEX Tips & Techniques

In one of the previous applications I have developed, there was a requirement to show several types of entries in the Gantt chart and I must use visually distinct colors so it would be easy for users to understand which task bar is referring to which task type. Even though there are lot of different colors available technically, distinguishing nearby colors, without keeping them side by side is not easy. Users can recognize basic colors, beyond that it gets tricky. In such cases, we need something beyond colors to fill our charts. SVG Patterns SVG Patterns are somewhat similar to HTML5 templates. HTML5  template  tag can contain some HTML, but it will not be rendered when page is loaded. Later, we can use the  template  using JavaScript. In similar fashion, SVG Patterns holds graphic object, but it will not be rendered. However, the pattern can be used for other elements by referencing the pattern in the fill and/or stroke attributes. You can have quick look  he...

Implementing search feature for the tree region is little tricky. Consider we have tree region created on the employee table EMP  as below. If we search for employee JAMES and we want to show JAMES node, then we must show everyone up in the hierarchy till the root node, i.e. KING > BLAKE > JAMES. Luckily, we can easily get hierarchy (traverse path) using sys_connect_by_path .  For e.g. consider below query select ename, empno, mgr, sys_connect_by_path(empno, ':' )|| ':' as emp_path from emp start with mgr is null connect by prior empno = mgr order siblings by ename This query gives all employee rows from EMP table, along with path data, from the root node to current node. Now, we can use this path data to filter rows that are required to show any node. For e.g. we can use below query to get all the required nodes to show JAMES node. with emp_tree as ( select ename, empno, mgr, sys_connect_by...

In Oracle APEX forums, there was a question about "how to conditionally unfreeze interactive grid columns based on the screen size". I had bookmarked this question on my blog notes. Because, this is a good candidate for blogpost as it's a common use case and it may be helpful for other developers.  Photo by Aaron Burden on Unsplash So, I have started building demo for this blogpost. Then, I found that freezing, unfreezing columns based on column name may not be the best solution, because whenever we change column order, then we need to change JavaScript code as-well. With further research (reading documentation thoroughly 😊), I found out that we can also pass column definition object while using freezeColumn and unfreezeColumn methods. This solves the problem with column names.  And then I did a little google search and found another similar question in APEX forums where John Snyders has provided a solution. This solution looks little different. Here, column propert...

In my previous blogpost, I have explained about JavaScript errors and how we can handle them in general and how we can handle them at application level. If you have not read it yet, you can read it here . In this blogpost, I will explain an approach to log JavaScript errors to a database table.  error event on window object provides lot of information. I found below information is useful for debugging and worth logging into DB. event.message : JavaScript error message event.filename : If source of the error is from a JavaScript file, then this will give full path of JavaScript file. If error is from inline JavaScript code written in APEX page, then this will give full APEX page URL including APEX session. event.lineno : Line number where error has occurred. Depending on event.filename, it could refer to line number from JavaScript file or from generated HTML page. event.colno : Column number where error has occurred. It should be read along with event.lineno . event.err...

Before APEX version 5.0, there were only handful of documented JavaScript (JS) functions in APEX. Now, there are several JavaScript namespaces and hundreds of functions and methods available in Oracle APEX. From APEX 18.1, separate documentation section "JavaScript API Reference" is also added for JavaScript. So, it's evident that usage of JavaScript in APEX is increasing every day and with every release.  But, how are you handling JavaScript errors in your APEX applications? For server-side errors, we can use EXCEPTION block and we can also define "Error Handling Function" at application level. What about JavaScript code? Can we do something similar for JavaScript errors? In this blog, I am going to briefly explain about JavaScript errors and how we can handle them in general and how we can handle them at application level. Introduction Browsers have JavaScript engine inside them. Mozilla's TraceMonkey, Google's v8 are examples for JavaScript engines. ...

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