Search for a command to run...
Experienced Business Analyst with a demonstrated history of working in the airlines/aviation industry. Strong research professional with a engineer focused and a strong technical background. Skilled in SQL/PLSQL, Linux System Administration. A proud Oracle APEX Consultant.
Thank you sofian safy, glad you liked it.
Audit Information The Audit section captures key metadata about each component in your APEX application. Specifically, it records: Changed By: The username of the last developer who modified the component. Changed On: The timestamp of the last modi...
In this fifth post of The Standard Component Attributes Anatomy series, I’m focusing on the Configuration attribute—better known as Build Options. Since Build Options are managed in Shared Components, we’ll take a quick look at that area as well. Con...
Comments The Comment attribute might be one of the most universally available fields in Oracle APEX. It allows developers to quickly leave notes or remarks—for themselves or for teammates—that are never shown to end users during runtime. You'll find ...
In this fourth post of The Standard Component Attributes Anatomy Series, we’re diving deep into the Help standard attribute. Although often overlooked, the Help attribute plays an important role in improving the user experience by providing clear, co...
In this third post of The Standard Component Attributes Anatomy Series, I’m tackling the Security attribute. Since the Security section includes references to Authorization Schemes from Shared Components, we’ll briefly touch on that as well. And beca...
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 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.
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.
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.
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!