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 Oracle Forms New features in 14.1.2. It got me thinking: Could these new features be accomplished in APEX? what it would take to recreate them? and… are they even interesting enough for me to consider using them in APEX?

First I’ll compare the features then finish with a conclusion

Please note, my JavaScript and CSS examples have been provided for illustration purposes only.

Comparison

Concealed Data

This is about concealing sensitive information in text boxes. e.g passwords

Forms

How to do it? edit Registry.dat and add

default.concealedData.character=\u25cf

\u25cf is a black circle ●

Set 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 Hide Password Visibility

List of Values Button

Forms

A tiny black button is appearing 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 finger. When the user clicks on this button the associated LOV will be presented.

APEX

APEX already supports Popup LOVs … Something like this? - Inspiration from Louis’ blog post

Custom Fonts

Forms

Add this into registry.dat file

default.fontMap.defaultMapping=partial

APEX

Easy-peasy. I 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.

Enable the Character Counter

Optionally add some CSS to pull it to the right, otherwise its left aligned

.apex-item-textarea-counter {
    float: right;
}

Placeholder and Persistent Placeholder

This is an Interesting feature here for Oracle Forms

Forms

• A placeholder (left) gets overwritten by text

• A persistent placeholder (right) places the placeholder text in the upper left corner

APEX

The way APEX can do this is by using a placeholder text (all 3 above examples) and using no label (left) a label (middle) or by using the JavaScript below to mimic the Persistent Placeholder Functionality - but why would you? - both the no label and label approaches are adequate.

Example again with all fields filled

$(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);
    }
  });
});

Progress Bar

Forms

APEX

APEX has a Native Percent Progress Bar Item to resemble the Forms Percent style

For the Value style, 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 Images and Labels at the same time. 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 Help) alignment

It doesn’t support 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;
}

If you really wanted images 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? no. 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 OK. Well there is this Icon Hover Animation to Push the icon to the side - that’s quite nice.

If you really must… I 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, lets 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 all one word) doesn’t offer this. However it does narrow down the results as you type, so you just have click on JAMES. I imaging there’s some clicking involved for Forms to complete the phrase anyway. If you really want this 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, spin down again, to return to the first record.

APEX

It doesn’t exist in APEX and if it did, I probably would not use it as I dont 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’s 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 insisted .. 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 one.

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 specific CSS styling to make them solid

.apex-rds-item {
    background-color: bisque;
    border-radius: 3px;
    margin-right: 2px;
}

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');

to 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, in this example, APEX is not going to draw ridiculous blank lines to fill in the space. You can however 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 then you can run this 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("&nbsp;");
            });
            $blankRow.find("td").html("&nbsp;"); // 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 on here called Christ 🙏

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 you own movie app built on the The Movie Database (TMDB) REST API by following this guide.

Other Features

Ive skipped the remaining features as they are based on the Builder, Runtime, FSAL or Launcher features of of Forms. But you are welcome to read 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 that I 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, 90’s style images. In APEX, modern Theme Styles are provided to you, you can change the Colors and effects, but gradients are out!

Maybe its just me, but alternative names have been chosen… Cards is a standard component, but Forms calls it Tiling. In the web world, we call it transparent, in the forms world it’s glass effect.

The webinar explains APEX as the best option for Modernizing your Forms Application - heck APEX even has AI assisted development, whats not to like?

So perhaps 2025 is high time to migrate your Oracle Forms application to APEX. If you are considering a Forms to APEX redevelopment project, we have tooling that accelerates the process, so please get in touch.

ENJOY!

Whats the picture? Its lambing season in Yorkshire. This is a newborn lamb with its mother.