Think APEX

Modern applications rely on One-Time Password (OTP) verification for secure authentication. These inputs are typically designed as multiple input boxes, each accepting a single character, providing a structured and user-friendly experience. Oracle APEX does not provide a native OTP input component. This article demonstrates how to build a fully configurable OTP Input Item Plugin from scratch, tested on APEX 24.2. Overview Configurable number of input boxes (1 to 12) Customizable size and colors per instance Supports numeric-only or alphanumeric input modes Auto-advance to next box after each entry Backspace moves back and clears the previous box Arrow key navigation between boxes Paste distributes characters across all boxes automatically Blur validation — empty boxes turn red when user leaves the component Page submit validation — blocks form submission if any box is empty Plugin Creation Navigation: Shared Components → Plug-ins → Create ...

In modern business applications, role-based input restrictions are common. For example: Certain users can select only a limited number of options in multi-select fields. Others have no restriction. Sometimes, selection depends on another field value, like a designation. Implementing such dynamic validations in Oracle APEX can be done efficiently using JavaScript functions combined with Dynamic Actions, keeping logic reusable and maintainable. Key Components Global Validation Function: A single JavaScript function that validates any multi-select LOV based on a controlling field (e.g., designation). Dynamic Action on LOV Items: Executes the validation function whenever a user changes selection. Safety Dynamic Action on Controlling Field: Clears dependent LOVs if the controlling value changes to prevent invalid data. Benefits: Centralized and reusable logic...

Oracle APEX items allow Quick Picks, but they are usually static. In real-world business scenarios, we often need: Quick Picks generated dynamically Quick Picks styled for better UI Quick Picks controlled based on another item’s value Enable/Disable logic driven by business rules In this article, I’ll explain how I implemented dynamic quick picks for one date item based on another date item. 🎯 Scenario We have two Date Pickers: P5_DATE1 P5_DATE2 For P5_DATE2, I created two custom quick picks: 1️ Current Month – 1st date 2️ Next Month – 1st date 🧩 Business Logic Based on the value selected in P5_DATE1: If user selects 1st day of current month ✅ Enable "Current Month – 1st" ❌ Disable "Next Month – 1st" If user selects any other date ❌ Disable "Current Month – 1st" ✅ Enable "Next Month – 1st" Step 1: Add Custom Quick Picks in DATE2 (Post Text) In P5_DATE2 → Post Text: <span class="apex-quick-picks custom-quick-picks">     <a...

In most Oracle APEX applications, every page has a Page Title displayed at the top. While useful, this title occupies vertical space, especially in apps where screen real estate matters (dashboards, reports, dense forms). So the goal is simple: Show the page title near the APEX logo instead of consuming page content space. This keeps the UI clean, professional, and consistent across all pages. Instead of placing the page title inside the page body:         ✅ Fetch the current page title dynamically         ✅ Display it right after the APEX logo         ✅ Do it globally, so it works for every page All of this is achieved using:         ✅ Global Page (Page 0)         ✅ One Dynamic Action         ✅ PL/SQL + JavaScript Simple, effective, and reusable. 1️⃣ Create a Global Page Item On Page 0 (Global Page), create a hidden item:      P0_PAGE_TITLE This item wi...

Recently, I faced an interesting requirement in my project. I thought it would be worth sharing. In an APEX page, a Popup LOV with multi-select is used. Based on the end user's selection, Interactive Grid rows are generated dynamically, and the selected values are set into an IG column at the same time. If the user selects more than one value, multiple rows are generated and each selected value is set into a different row.  For example, if the end user selects 10, 20, and 30 from the Popup LOV, the Interactive Grid generates three rows, and the Dept No column is set to 10, 20, and 30 respectively. Step 1: Create a Popup LOV with multiple selection enabled (colon-separated delimited list). Step 2: Create an Interactive Grid with the static ID EMP . Step 3: Create a Submit button and add the below code in a Dynamic Action on the Click event. var region  = apex.region("EMP"); var actions = region.call("getActions"); var view    = region.call("getCurre...

This article explains how to implement a reusable character counter for text fields in Oracle APEX. The counter displays a live count of characters typed versus the maximum allowed length. It provides visual warnings (orange) and danger indicators (red) as the user approaches or reaches the limit. 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 =...

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

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

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