Most of the latest features introduced in Oracle Forms 14.1.2 can be seamlessly recreated within APEX. This article shows you precisely how to do this. However, in the case of many of these new Forms features, the real question is: do you really want them?
I recently attended a webcast called Oracle Forms Modernization: discover your modernization options on demand, hosted by Oracle Product Managers from the world of Forms and APEX.
There was a large section dedicated to new Oracle Forms features in version 14.1.2. It got me thinking: Could these new additions be accomplished in APEX? What would it take to recreate them? And – the key question, really – are they even interesting enough for me to consider using them in APEX?
In this article, I’ll compare some of the key features with APEX alternatives, and then summarize their usefulness in the conclusion.
Please note that my JavaScript and CSS examples have been provided for illustration purposes only.
Comparison
Concealed Data
This feature lets you conceal sensitive information in text boxes. e.g passwords.
Forms
How to do it? Edit Registry.dat and add the following:
default.concealedData.character=\u25cf
\u25cf is a black circle ●
Set the Item Property Concealed Data Button to enable the button.
APEX
In APEX, all password fields are concealed. The Password Visibility button is on by default.
To turn off visibility, just check the Hide Password Visibility box in Live Template Options.
List of Values Button
Forms
A tiny black button appears in the top right corner. Can you see it? When the user moves the mouse over this button, it will cause the mouse pointer to change to a hand with a finger. When the user clicks on this button, the associated LOV will be presented.
APEX
APEX already supports Popup LOVs. How to get something like this? Check out Louis’ Louis’ blog post for inspiration.
Custom Fonts
Forms
Add this to the Registry.dat file:
default.fontMap.defaultMapping=partial
APEX
That’s easy-peasy. I simply added something like this into the Inline CSS:
@import url('https://fonts.googleapis.com/css2?family=Bangers&display=swap');
:root {
--a-base-font-family: 'Bangers', cursive;
}
Character Counter
Forms
To add a character counter for a text item, enable the Display Character Counter property.
APEX
For this, we use a Textarea Page Item.
You also need to enable the Character Counter:
Optionally, you can add some CSS to pull it to the right (otherwise it’s left-aligned):
.apex-item-textarea-counter {
float: right;
}
Placeholder and Persistent Placeholder
Forms
Now, this is an interesting Oracle Forms feature. Here’s what it does:
- A placeholder (left) gets overwritten by text
- A persistent placeholder (right) places the placeholder text in the upper left corner
APEX
The way you can do this in APEX is by using a placeholder text (all 3 examples below) and using no-label (left), or label (middle).
You can also use the JavaScript below to mimic the Persistent Placeholder functionality – but why would you? Both the no-label and label approaches are adequate.
$(document).ready(function() {
var pageItem = '#P5_P_PLACEHOLDER'
var $input = $(pageItem);
var $label = $(pageItem + '_LABEL');
var originalLabel = $label.text();
var placeholderText = $input.attr('placeholder');
$input.on('input', function() {
if ($(this).val().length > 0) {
// Change label text to placeholder text while typing
$label.text(placeholderText);
} else {
// Revert label text when input is empty
$label.text(originalLabel);
}
});
});
Example again with all fields filled:
Progress Bar
Forms
APEX
APEX has a Native Percent Progress Bar item that resembles the Forms percent style.
For the Value style, however, you’ll have to use a plugin, of which there are many (here is one such example).
Gauge and Half Gauge
Forms
APEX
APEX delivers these as Chart Regions in the form of Pie and Status Gauge Meter Charts – see here for all Charts (about 25 of them).
Images and Label Push Buttons
Forms
Forms now allows using images and labels simultaneously. The label can be positioned on any one of the four sides of the image.
APEX
APEX prefers to use modern icons with left and right (e.g, the Help icon below) alignment.
It doesn’t support using icon on top out of the box, but with CSS, anything is possible:
#PRINT {
display: flex;
flex-direction: column;
align-items: center; /* Horizontally centers icon and label */
justify-content: center;
}
#PRINT .t-Icon {
margin-bottom: 0.25em; /* Space between icon and label */
display: block;
}
#PRINT .t-Button-label {
text-align: center;
width: 100%; /* Ensures label is centered under icon */
}
#PRINT .t-Icon--right {
display: none;
}
So, if you really want to make your buttons look like something from the 90’s, you can do it!
Just set your button label to something like this:
<span class="u-flex u-align-items-center"> <img src="#APP_FILES#save-file.png" id="saveIcon" alt="Save Icon"> <span class="u-margin-left-sm">Save</span> </span>
Rollover buttons
Forms
By setting a button’s Rollover Color Swap property, the button’s foreground and background colors will switch when the user moves the mouse over the button.
APEX
APEX does this by default.
Normal:
Rolled over:
Do I need to change the rollover color? Not really. But I could if I really wanted to:
#ROLLOVER:hover {
--a-button-hover-background-color: pink !important;
--a-button-hover-text-color: black !important;
}
Rollover Image Swap
Forms
APEX
Err, okay. Well there is this Icon Hover animation to push the icon to the side – that’s quite nice.
If you really must… I’ve created some crazy icon swop code for you. Here is the JS (I’m not proud of it):
const btn = document.getElementById('SAVE_FILE_BTN');
const img = document.getElementById('saveIcon');
const defaultSrc = apex.env.APP_FILES + 'save-file.png';
const hoverSrc = apex.env.APP_FILES + 'laptop.png';
btn.addEventListener('mouseenter', () => {
img.src = hoverSrc;
});
btn.addEventListener('mouseleave', () => {
img.src = defaultSrc;
});
To be honest… what’s the actual point?
Button Gradient Color
Forms
APEX
Fine, let’s make a horrible-looking button in APEX! 😡
Happy now?
#GRADIENT_BUTTON {
background: linear-gradient(to bottom, var(--ut-palette-success), var(--ut-palette-success-shade )); /* Green to Light Green */
color: white; /* Adjust text color for contrast */
border: none; /* Optional: remove border */
}
Combo Box
Forms
The Combo Box now offers auto completion based on elements in the list.
APEX
The APEX Combobox (note it’s one word) doesn’t offer this. While it does narrow down the results as you type, you have to click on the word (JAMES in this case) to pick it. I imagine there’s some clicking involved for Forms to complete the phrase anyway, but if you really want this exact same feature in APEX, I suggest you log it as an idea.
Spin Box
Forms
A spin box allows the user to spin down to the last record, and spin down again, to return to the first record.
APEX
This feature doesn’t exist in APEX, and if it did, I probably would not use it as I don’t want to confuse my users. If I had to use it, there are plenty of JS examples that I could create an APEX plugin with.
Slider
Forms
The Slider is a new item in Forms. However, it only accepts numbers. So what are those animals doing there? 3 ponies please.
APEX
Slides do not exist as a native Item Type in APEX. However, there are a couple of great plugins for this.
Switches
Forms
APEX
Native in APEX:
Toggle Buttons
Forms
APEX
Native in APEX. You have to select a 2 Column Radio Group and set it to display as a Pill Button.
Glass Buttons
Forms
APEX
Just use a Simple style to make the button transparent:
Graphics
Forms
APEX
I guess you could draw some SVG shapes if you really needed to. Oh, I think I missed one.
<svg width="400" height="120" xmlns="http://www.w3.org/2000/svg"> <!-- Left set: thin strokes --> <ellipse cx="50" cy="60" rx="40" ry="30" stroke="black" stroke-width="2" fill="none"/> <rect x="110" y="30" width="60" height="60" stroke="black" stroke-width="2" fill="none"/> <line x1="200" y1="20" x2="200" y2="100" stroke="black" stroke-width="2"/> <!-- Right set: thick strokes --> <ellipse cx="270" cy="60" rx="40" ry="30" stroke="black" stroke-width="6" fill="none"/> <rect x="330" y="30" width="60" height="60" stroke="black" stroke-width="6" fill="none"/> <line x1="420" y1="20" x2="420" y2="100" stroke="black" stroke-width="6"/> </svg>
Alerts
Forms
Custom Alerts support up to 1000 characters, an increase from the previous limit of 200. Custom images can now also be used.
APEX
1000 chars you say? With icons?
apex.message.alert(
"Leeds United has been absolutely phenomenal this season, showcasing a level of skill, determination, and teamwork that has truly impressed fans and critics alike. Their attacking style of play has been both exciting and effective, with players consistently delivering outstanding performances on the pitch. The team's resilience in tough matches and their ability to come back from setbacks demonstrate their strong character and commitment to success. Leeds United's defense has been solid, making it difficult for opponents to break through, while their midfield creativity has been a key factor in controlling games and creating scoring opportunities. The coaching staff deserves immense credit for their tactical acumen and ability to motivate the squad to perform at their best week after week. Fans have been treated to thrilling matches, memorable goals, and a sense of pride that comes from supporting a team that plays with heart and passion. As the season progresses, Leeds United continues",
function(){
console.log("Alert closed");
},
{
title: "Leeds United",
style: "information",
okLabel: "MOT!",
iconClasses: "fa fa-soccer-ball-o fa-2x"
}
);
Stacked Canvas Splitter
Forms
APEX
There’s a Splitter Plugin here, which does much more than the Forms feature.
Tab Bar Transparency & Selected Color
Forms
APEX
This is on by default for all Region Display Selectors. I made it pink to stand out (I like pink).
You have to apply a specific CSS styling to make them solid.
.apex-rds-item {
background-color: bisque;
border-radius: 3px;
margin-right: 2px;
}
Use CSS again to change the selected tab color:
.apex-rds-selected {
background-color: cornsilk;
}
Row Banding
Forms
Use this:
SET_BLOCK_PROPERTY ('EMP', PINSTRIPE1_COLOR, 'r56g248b67');
SET_BLOCK_PROPERTY ('EMP', PINSTRIPE2_COLOR, 'r146g220b255');
You’ll get this:
McDonald?
APEX
You can use CSS if you must:
#EMP .a-IRR-table tr:nth-child(odd) td {
background-color: #66ff66; /* Bright green for odd rows */
color: #000; /* Black text for contrast */
}
#EMP .a-IRR-table tr:nth-child(even) td {
background-color: #bfefff; /* Light blue for even rows */
color: #000;
}
Auto-Size Block
Forms
APEX
Well, you can do rows per page:
However, if there are fewer than 5 rows, APEX is not going to draw ridiculous blank lines to fill in the space. However, you can use Headers Fixed to Region to get a fixed height – in my example, I use 300px which gives me a vertical scrollbar.
If you absolutely want filler lines, you can run the following JavaScript after region refresh & fire on initialization, but it looks daft. In the picture below, the SQL shows 7 rows, but the JavaScript tops it up to 10 blank rows, which is the number of rows per page.
(function() {
var regionId = "EMP"; // Replace with your IR static ID
var $table = $("#" + regionId + "_ir .a-IRR-table");
// Get the first DATA row (skip headers in tbody)
var $dataRow = $table.find("tbody tr")
.not(".a-IRR-header-row, .a-IRR-group-header") // Exclude headers
.has("td") // Ensure row contains data cells (td)
.first();
if ($dataRow.length) {
var ir$ = apex.region(regionId).widget().interactiveReport("option");
var currentRowsPerPage = ir$.currentRowsPerPage;
var currentRowCount = $table.find("tbody tr").not(".a-IRR-header-row").length;
var rowsToAdd = currentRowsPerPage - currentRowCount + 1;
if (rowsToAdd > 0) {
// Clone the data row and convert any <th> to <td>
var $blankRow = $dataRow.clone();
$blankRow.find("th").replaceWith(function() {
return $("<td>").html(" ");
});
$blankRow.find("td").html(" "); // Clear content
// Add blank rows
for (var i = 0; i < rowsToAdd; i++) {
$table.find("tbody").append($blankRow.clone());
}
}
}
})();
Tiling
Forms
Look, there’s a guy here called Christ! 🙏
BTW, Christ also makes an appearance on page 24 about treating Dry Eye Disease.
APEX
Cards, as they are known, are pretty much bread and butter for APEX apps.
REST
Forms
Using a new Form Builder REST Package Designer (RPD), special Forms Program Units are generated that allow the application developer to access a REST service from Forms PL/SQL.
APEX
You can build your own movie app built on the The Movie Database (TMDB) REST API by following this guide.
Other Features
I’ve skipped the remaining features as they are based on the Builder, Runtime, FSAL or Launcher features of Forms. But you are welcome to read about all the new features.
Summary
You could say: that’s a lot of APEX CSS & JS for something that’s now out of the box for Forms. However, I don’t really want, or need, to recreate these features in APEX. Maybe the Row Banding would be nice out of the box for APEX… but it’s impossible for me to think of one of those features as something that I simply have to have in APEX right now.
The use of CSS & JS actually expands what APEX provides to perform custom enhancements that would be really challenging to do in Forms.
It seems like there has been an attempt to modernize in Forms 14 with some improved inputs & components that resemble web applications. I would say that these changes are welcome, although I have to disagree with some of the color choices, use of gradients, and 90’s style images. In APEX, modern theme styles are provided, so you can change the colors and effects, but gradients are out!
Maybe it’s just me, but it seems alternative names have been chosen… Cards are a standard component, but Forms calls them Tiling. In the web world, we call it Transparent, in the Forms world, it’s a Glass Effect.
The webinar I mentioned in the introduction explains why APEX is the best option for modernizing your Forms application. Heck, APEX even has AI-assisted development. What’s not to like? So, perhaps 2025 really is the high time to migrate your Oracle Forms application to APEX.
If you are considering a Forms to APEX redevelopment project, we have a tool that accelerates the process, so please get in touch with us. You can write to hello@pretius.com or simply use the contact form below.
And if you’re interested in more APEX-related content, check out some of my other articles on this blog:
- SQLcl Project Reference: A summary of everything you need to know
- Oracle 23c Free Docker, APEX & ORDS – all in one simple guide
- APEX User Interface Defaults: A deep dive into Table Dictionary and Attribute Dictionary
- Globalization in APEX: A deep dive into Multi-Language and Locales
- Sorting in APEX: A deep dive into Classic Reports and Card Regions
