When working with Oracle APEX, one of the joys (and occasional challenges) is finding simple, elegant solutions to unique client requirements. Recently, I came across an interesting use case that I thought would be worth sharing.

The Challenge

The requirement was pretty straightforward: we needed to display a block of text, but limit the number of characters or lines visible, with a button that allows the user to toggle between viewing the full text and collapsing it back to the limited version.

This kind of feature is great for improving user experience on pages where long text descriptions can clutter the interface. It also gives users more control over how much information they want to see at a glance.

The first step towards a solution

Luckily, Oracle APEX's Universal Theme made this much easier than I anticipated. There’s a native CSS class that can help us handle text truncation: The u-lineclamp-N class will limit the displayed lines to the number specified in the class, ranging from 1 to 5.

You can find the official documentation here.

Let's showcase this with a simple example. Imagine a classic report like the following:

As you can see, excessive text can disrupt the user experience. As an alternative, we can limit the number of visible lines in a block of text to two, which can be easily achieved using the following code in an HTML Expression in a report column:

<span class="u-lineclamp-2">#EMP_BIO#</span>

This simple class ensures that only two lines of text are displayed initially, with the rest hidden, regardless of screen size. This is where the added value lies.

The result may be a more compact report that visually simplifies finding the right record in the table:

Now that we have limited the number of lines, we might consider giving the user control over displaying the full text.

Adding Expand/Collapse Functionality

Using a simple piece of JavaScript, we can technically solve the problem by toggling classes in the previously mentioned <span>. In this case, we replace u-lineclamp-2 with a non-existent one, such as no-line-clamp. jQuery offers a solution out of the box; here’s the basic idea:

$("CSS_Selector").toggleClass('u-lineclamp-2 no-line-clamp')

This function will switch the specified classes on the element in the selector, displaying the full text or hiding it again, regardless of screen size.

The simplest way to incorporate this code is once again in the HTML expression of the report column.

<span 
    class="u-lineclamp-2"
    onclick="$(this).toggleClass('u-lineclamp-2 no-line-clamp');">
    #EMP_BIO#
</span>

As you can see, with two simple lines of code, the user experience can increase dramatically.

Now it's up to you to trigger that action from a better position or style the span element to clearly indicate to the user that the text is clickable.

Final Thoughts

This approach leverages the built-in classes of Oracle APEX's Universal Theme, making it both efficient and clean. There's no need to reinvent the wheel or write complex custom CSS—the APEX Team has already done that for you! :)

Enjoy life!