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.

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