Oracle APEX – Taking Advantage of Helper Classes

Glad to see that the helper classes I missed in previous APEX versions—and had been discussing theoretically with the APEX Universal Theme team—have now been natively integrated into the latest version, 24.2.

Sounds like a great opportunity to share a quick post to help others who faced the same issue—or perhaps didn’t even realize there was one!

In this example, we'll use some of the bundled helpers from the Oracle APEX Universal Theme to solve common UI challenges.

The Problem

They say a picture is worth a thousand words, so here’s a great example of a common problem I face—and maybe one you’ll notice from now on too.

1# Automatic Column Span

My issue in this case is related to the automatic region span. By default, APEX evenly distributes regions within the same row unless specified otherwise. If you want to change this—especially if you're new to the low-code world—you should know that you can control both the column span and starting position declaratively from the region Layout attributes.

As you might know, the Universal Theme implements a 12-column grid system. You can learn more about it here. In my case, it would be enough to set the Instruction regions to use 4 out of the 12 columns, allowing the Charts to automatically span across the remaining 8 columns.

The result might already look a bit more attractive on a desktop:

But unfortunately, that wouldn’t be the case for a mobile or even a tablet display:

To solve this issue, there isn't a "no-code" solution, but a low-code approach is available instead.

By manually setting the breakpoints for our regions using native CSS classes, we can control when the region spans change. In this case, adding the following CSS classes to the Column CSS attribute for the Chart and Instruction regions will improve the situation:

col-xxs-12 col-xs-12 col-sm-6

The col-AAA-NN classes define how many columns a specific element will span on different screen sizes. When setting multiple elements on the same row, make sure that the total column span for each screen size always adds up to 12.

For example, if you have two regions and one is set to col-xxs-12 col-xs-6 col-sm-4 col-md-3 col-lg-2, the second region will need to have classes that complete the 12 columns. In this case, it should be set to: col-xxs-12 col-xs-6 col-sm-8 col-md-9 col-lg-10.

2# Growing containers

You might notice in our example that the instruction boxes next to the charts don’t match the charts' size. While they might align on certain screen sizes, APEX doesn’t guarantee this by default. Fortunately, there’s a simple way to fix it using flex helper classes, which I have already explained here.

The result after applying the u-flex-grow-1 class:

#3 Fonts

A real added value, at least for me, are the new typography classes. You can read more about them in the official Universal Theme documentation here.

As a quick demo, I just added these classes: u-text-body-md u-text-lighter u-hyphen in the CSS attribute of the region, alongside the already existing u-flex-grow-1 (see the previous topic).

The result would look something like this:

#4 Collapse Order

Last but not least, there's the problem that bothers me the most. In the case of an alternate layout, where there is an intercalation of text and images or charts and text, like in this example, the collapse order becomes crucial. Typically, on a mobile device, there will be two images (or charts) displayed next to each other, which makes the order of their collapse important.

Take this example and notice that the two instruction regions are now stacked, one on top of the other:

Ugly enough, right? Luckily, in APEX 24.2, a native solution for this has been included that allows us to set the collapse order of the regions using the same principle we use for the column span.

By adding u-order-xxs-2 u-order-xs-2 to the already existing u-flex col-xxs-12 col-xs-12 col-sm-6, we can achieve the final version of our dashboard:

Enjoy Life!