# Nested Template Components

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](https://apexblog.dev/apex-template-components-and-10-lines-of-html-to-create-a-plugin).

In this demo, the plugin is used to display the timeline of a shopping order.

![](https://cdn.hashnode.com/res/hashnode/image/upload/v1716899744831/03e4d171-74e1-440a-8f75-470f2d88c97a.png align="center")

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](https://apexblog.dev/the-power-of-apex-template-directives).

We first need to identify where is the text that we want to change:

![](https://cdn.hashnode.com/res/hashnode/image/upload/v1716901188340/d1b5efb3-b0a9-476c-8927-50d36f6de575.png align="center")

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  

![](https://cdn.hashnode.com/res/hashnode/image/upload/v1716901447266/ca0bdd4a-350e-49da-9e9c-3419fd0e727d.png align="center")

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>**

```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/}
```

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).

```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>
           {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:  

![](https://cdn.hashnode.com/res/hashnode/image/upload/v1716902051507/4ff9771c-4a91-4d90-a8e4-b02d1e513b9b.png align="center")

and

![](https://cdn.hashnode.com/res/hashnode/image/upload/v1716902070527/cc72a9e6-f30d-4cf4-939c-001320ddef74.png align="center")