Skip to main content

Posts

Reusable Character Counter for Text Fields in Oracle APEX

Paste the following function code at the page level (Function and Global Variable Declaration), or create a region in the Global Page using the Blank template. In that region, select Source and paste the function code enclosed within <script></script> tags. function setPostTextCounter (itemId)  {     var item   = apex.item(itemId);     var inputEl = item.element;     var maxLen = inputEl.attr("maxlength") || 100;       var curLen = item.getValue().length;     var counterId = itemId + "_counter";     var postText = inputEl.siblings(".t-Form-itemText--post");     if (postText.length === 0) {         postText = $('<span class="t-Form-itemText t-Form-itemText--post"></span>');         inputEl.after(postText);     }     if (postText.find("#" + counterId).length === 0) {         postText.append('...
Recent posts

APEX - Tip: Fix Floating Label Issue

Oracle APEX's Universal Theme provides a modern and clean user experience through features like floating (above) labels for page items.  These floating labels work seamlessly when users manually enter data, automatically moving the label above the field on focus or input.  However, a common UI issue appears when page item values are set Dynamically the label and the value overlap, resulting in a broken and confusing user interface. once the user focuses the affected item even once, the label immediately corrects itself and displays properly. When an issue is reported, several values are populated based on a single user input, causing the UI to appear misaligned and confusing for the end user. Here, I'll share a few tips to fix this issue. For example, employee details are populated based on the Employee name. In this case, the first True Action is used to set the values, and in the second True Action, paste the following code setTimeout(function () {   $("#P29_EMAIL,#P29_...

Conditional Cell Editing in Oracle APEX IG

While browsing the Oracle APEX forum, I noticed a question from a user asking how to disable all other cells in an Interactive Grid row until the first cell has a value. In this blog, we will explore how to disable all other cells in an Interactive Grid row until the first cell contains a value. This approach helps enforce proper data flow, avoids incomplete or invalid records, and improves overall data integrity.  By implementing a simple client-side logic using JavaScript and Dynamic Actions, we can gain fine-grained control over row-level editing behavior in Oracle APEX. Step1: Create IG with static ID of EMP. Step2: Paste the following code in function global declaration. function setCellsToReadOnly()  { var grid = apex.region("EMP").widget().interactiveGrid("getViews", "grid"); if (!grid || !grid.model) { return; } var model = grid.model; model.forEach(function (record, index, id) { var meta = model.getRecordMetadata(id); var fields ...

Automatically Adjust Interactive Grid Column Width Based on Data in Oracle APEX

In Oracle APEX, Interactive Grid column widths are usually fixed or manually adjusted.  However, in some scenarios, a static width may not be ideal—especially when the column data length varies significantly.  To improve readability and user experience, we can dynamically set the column width based on the actual data displayed. For example, consider the EMP table, where the ENAME column contains employee names of varying lengths.  Instead of assigning a fixed width, we can automatically adjust the column width so that it fits the longest value in the grid.  This ensures that the data is fully visible without unnecessary truncation or excessive whitespace. Step 1: Create an Interactive Grid and assign the static ID as EMP. Step 2: Paste the following JavaScript code in Execute JavaScript Code under Page Load. (function () {     var region = apex.region("EMP");     var ig$ = region.widget();     var gridView = ig$.interactiveGrid("getVie...

Building a Custom Debug Package for Oracle APEX Using PL/SQL

While developing Oracle APEX applications, debugging page processes and backend PL/SQL logic can be challenging—especially when values are lost between processes or execution flow is unclear.  Although DBMS_OUTPUT is useful, it doesn’t work well inside APEX runtime. To solve this, I built a custom PL/SQL debug Package that logs execution flow and variable values into a database table.  This approach helps trace exactly where the code reached, what values were passed, and whether a block executed or not - even inside page-level processes and packaged procedures Why a Custom Debug Package? Works seamlessly inside Oracle APEX page processes Persists debug information even after session ends Helps trace execution flow Captures runtime values Can be turned ON/OFF dynamically Does not interrupt business logic The Package consists of:- Debug Table                         -  Stores debug messages Sequence ...

Enhancing UX with Recently Visited Pages Navigation in APEX

  In this solution, I leverage Oracle APEX data dictionary views particularly the workspace activity log to capture detailed navigation audit information for each user within a given application.  This audit data includes which pages users visit, how frequently they access them, and their overall navigation patterns. Using this information, I create a Dynamic List in Shared Components, which automatically generates entries based on the most recently accessed pages for the logged-in user.  This list is then displayed on the Home page as a personalized dashboard. The result is a dynamic, user-specific " Recently Used Pages " dashboard that updates in real time.  Each user sees a tailored set of pages they frequently or recently visited, allowing them to quickly navigate back to their most relevant screens.  This is especially valuable for APEX applications where users routinely work across many pages and need faster access without searching through lengthy menu...

APEX Diff — A Snapshot Summary

APEX Diff gives us a clean, intelligent way to understand how Oracle APEX evolves across versions making it effortless to pinpoint what’s new, what’s changed, and what may impact our applications. APEX Diff gives you a quick glance at what has changed between APEX releases.  By default, the application shows the latest six APEX releases on the right side of the page. we can use the filter to select any 2 to 6 versions and compare what changed between them. If we want an overview of the metadata differences between any two selected releases, we can click on either the APEX Views Diff or PL/SQL APIs Diff. Selecting the APEX Views Diff option, for example, will display the differences in columns across APEX Views between the two selected releases. For Public PL/SQL APIs, the focus is on functions and procedures. Column level differences do not apply here. The app highlights additions, removals or updated definitions in the API signatures. As developers, we can easily identify deprecat...