Search for a command to run...
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
One of the fantastic aspects of template component plugins is that there's no need to delve into complex APIs to develop a plugin. If you have a bit of understanding of HTML and CSS, you can swiftly create impressive plugins.
Introducing the Vertical Timeline: Witness how a plugin can be created with minimal code in no time.
Looks pretty cool, and it's all done with just 10 lines of HTML and a touch of CSS.
{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/}
Additionally, it comes with an action menu. In the demo, I've set up five menu items, each with its own server-side condition to show selectively on specific timeline entries, based on the flag column in the query below.
SELECT
'Order Received' AS event_text,
'01-AUG-2023' AS event_date,
'9:00 AM' as event_time,
'fa-shopping-cart' as card_icon,
'Y' edit_flag,
'Y' cancel_flag,
'N' track_flag,
'N' review_flag,
'N' return_flag
FROM DUAL
UNION ALL
SELECT
'Order is being processed in our warehouse' AS event_text,
'02-AUG-2023' as event_date,
'10:00 AM' as event_time,
'fa-package' as card_icon,
'N' edit_flag,
'Y' cancel_flag,
'N' track_flag,
'N' review_flag,
'N' return_flag
FROM DUAL
UNION ALL
SELECT
'Your order is shipped' AS event_text,
'02-AUG-2023' as event_date,
'1:00 PM' as event_time,
'fa-plane' as card_icon,
'N' edit_flag,
'N' cancel_flag,
'Y' track_flag,
'N' review_flag,
'N' return_flag
FROM DUAL
UNION ALL
SELECT
'Your order has arrived in Leeds - UK' AS event_text,
'03-AUG-2023' as event_date,
'2:00 PM' as event_time,
'fa-map-marker-o' as card_icon,
'N' edit_flag,
'N' cancel_flag,
'Y' track_flag,
'N' review_flag,
'N' return_flag
FROM DUAL
UNION ALL
SELECT
'Your order has been pickup by the driver' AS event_text,
'03-AUG-2023' as event_date,
'03:00 PM' as event_time,
'fa-truck' as card_icon,
'N' edit_flag,
'N' cancel_flag,
'Y' track_flag,
'N' review_flag,
'N' return_flag
FROM DUAL
UNION ALL
SELECT
'The order has been delivered' AS event_text,
'03-AUG-2023' as event_date,
'06:00 PM' as event_time,
'fa-home' as card_icon,
'N' edit_flag,
'N' cancel_flag,
'N' track_flag,
'Y' review_flag,
'Y' return_flag
FROM DUAL
Download Vertical Timeline
Import template_component_plugin_com_rodrigomesquita_vertical_timeline.sqlfile into your application.
Create a page item
Choose Vertical Timeline [Plugin] as a template component type
Clique here to see in action.