Search for a command to run...
No comments yet. Be the first to comment.
Oracle APEX already includes Font APEX as the default icon library for Universal Theme. In most cases, that is enough. But in one of my APEX apps, I needed a few icons that were not available there, s
Looking to give your Oracle APEX mobile app a modern, native feel? Here’s a quick hack: add a floating action button that stays anchored at the bottom corner just like in popular mobile apps. This sma
APEX 26.1 has been updated to the Universal Theme. While much of the attention in this release is on AI features, I think the UT improvements are just as important for developers like me who care abou
The apex_barcode package offers a PL/SQL API to generate various types of barcodes. You can output barcodes as SVG (Scalable Vector Graphics) values or as PNG file blobs, making it easy to embed them
Oracle APEX makes it easy to get data on screen fast, but often, the default tabular output isn’t enough. What if you want to highlight statuses, add icons, or display badges all without writing compl
Oracle APEX allows us to call a template component plugin inside another plugin, saving us time by reusing functionalities from another plugin without the need to rewrite them.
To show how it works, I will use the vertical timeline TC plugin. To learn more about this plugin, click here.
In this demo, the plugin is used to display the timeline of a shopping order.
We want to highlight when the order is canceled or delivered. For this, we are going to call the Badge plugin inside the Vertical Timeline. To call a plugin, we use the 'with/apply' template directive. This is explained in the blog post The Power of APEX Template Directives.
We first need to identify where is the text that we want to change:
We now know that the text we want to change comes from the description. By looking at the plugin custom attributes, we can see that the description is identified by VT_DESC
Looking at the code, we can now easily identify where we need to make a change and call the bagde plugin
<div class="vt-item-text">#VT_DESC#</div>
{if APEX$IS_LAZY_LOADING/}
<div><span aria-hidden="true" class="fa fa-refresh fa-2x fa-anim-spin"></span></div>
{else/}
<span class="fa #VT_ICON# vt-icon" aria-hidden="true"></span>
<div class="vt-header">
<div class="vt_header_text">#VT_TEXT#<br> #VT_SUBTEXT#</div>
<div>{if APEX$HAS_ACTION_BUTTONS/} #MENU_ACTION# {endif/}</div>
</div>
<div class="vt-item-text">#VT_DESC#</div>
{endif/}
The code will then be changed by adding the with/apply for the Order Canceled (using danger state) and The order has been delivered (using success state).
{if APEX$IS_LAZY_LOADING/}
<div><span aria-hidden="true" class="fa fa-refresh fa-2x fa-anim-spin"></span></div>
{else/}
<span class="fa #VT_ICON# vt-icon" aria-hidden="true"></span>
<div class="vt-header">
<div class="vt_header_text">#VT_TEXT#<br> #VT_SUBTEXT#</div>
<div>{if APEX$HAS_ACTION_BUTTONS/} #MENU_ACTION# {endif/}</div>
</div>
{case VT_DESC/}
{when Order Canceled/}
{with/}
LABEL:=
VALUE:=#VT_DESC#
STATE:=danger
ICON:=fa-times-circle-o
LABEL_DISPLAY:=N
STYLE:=t-Badge--md
SHAPE:=t-Badge--circle
{apply THEME$BADGE/}
{when The order has been delivered/}
{with/}
LABEL:=
VALUE:=#VT_DESC#
STATE:=success
ICON:=fa-times-circle-o
LABEL_DISPLAY:=N
STYLE:=t-Badge--md
SHAPE:=t-Badge--circle
{apply THEME$BADGE/}
{otherwise/}
<div class="vt-item-text">#VT_DESC#</div>
{endcase/}
{endif/}
and finally we have the below:
and
