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.

Sample Query

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

Installation

1. Download Vertical Timeline

2. Import template_component_plugin_com_rodrigomesquita_vertical_timeline.sqlfile into your application.

Usage

1. Create a page item

2. Choose Vertical Timeline [Plugin] as a template component type

Configuration

Demo

Clique here to see in action.