# APEX Template Components and 10 lines of HTML to create a plugin

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.

![](https://cdn.hashnode.com/res/hashnode/image/upload/v1698965016372/aea81322-ffc5-42e2-a659-0e1d664eb6c8.png align="center")

Looks pretty cool, and it's all done with just 10 lines of HTML and a touch of CSS.  

```xml
{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.

![](https://cdn.hashnode.com/res/hashnode/image/upload/v1698965391528/925860e4-d61c-4109-a0e6-0c6a0c5e62d8.png align="center")

## **Sample Query**

```sql
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**](https://github.com/rodrigomesquitaorclapex/verticalTimeline)
    
2. Import *template\_component\_plugin\_com\_rodrigomesquita\_vertical\_timeline.sql*file into your application.
    

## **Usage**

1. Create a page item
    
2. Choose *Vertical Timeline \[Plugin\]* as a template component type
    

## **Configuration**

![](https://cdn.hashnode.com/res/hashnode/image/upload/v1698965831672/c1fe419d-8c97-4ac7-a6d5-bded44b8388e.png align="center")

## **Demo**

Clique [**here**](https://apex.oracle.com/pls/apex/r/rodrigo_sandbox/vertical-timeline/home) to see in action.