Skip to main content

Posts

Showing posts with the label JavaScript

Interactive Grid - Freeze/Unfreeze Columns Using JavaScript

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

Handling JavaScript Errors - Part 2

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

Handling JavaScript Errors - Part 1

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

Interactive Grid - Displaying Master data in Detail IG Header

Recently one of the users has asked a question "Would it be possible to display selected master row data in detail interactive grid region header?". Yes, why not, it's indeed a reasonable request. However, during implementation, I have found it is little tricky to implement a solution which works in all cases and finally I have managed to get it done. I am sharing this here as it may help other APEX developers. When user selects any row using the row selector check box or when user just clicks on any row, then selectionchange event is fired. This event is fired, irrespective of whether IG is in edit mode or not. So, we can use this event to get data from selected master record. For demo purpose, consider Interactive Grid (IG) on Department table as master and IG on Employees table as detail. And assume requirement is to display selected/current department name in Employees IG region title.  To implement this, let's create Dynamic Action (D.A.) as below Create D.A. an...

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

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