{Template Directives/}

Jorge Rimblas, DRW

Of Course, You Can Do That with APEX! 

Jorge Rimblas

DRW, Enterprise APEX Development Team Lead

@rimblas

rimblas.com/blog

  • Oracle DB since 1995
  • APEX since it was HTMLDB in 2004
  • Always involved in web technologies
  • Ex-Enkitec, Ex-independent, Ex-Insum

{What?/}

Processing of Substitution Strings

Introduced in

APEX 20.2

Process

Conditional processing

1.IF

2.CASE

Case Conditions

3.LOOP

Looping Directive

# What

{Examples/}

Tags

Badges

Conditional Content

Cards

Any chunk of HTML...

{How/}

{Syntax/}

{command/}

{command/}

content

{if COLUMN/}

{endif/}

IF checks for value equality

Value for

Checks

True
or
False

True False
Y N
T F
1 0
any value empty

Falsy / Truthy Table

{if AVAILABLE/}
#PRODUCT#
{endif/}


{if !AVAILABLE/}
#PRODUCT# (Out of Stock)
{endif/}

# IF CODE
#PRODUCT#
{if AVAILABLE/}
#QUANTITY# available
{else/}
Out of Stock
{endif/}

select product
     , quantity
     , case 
       when quantity > 0 then
         1 
       else
         0 
       end available
from products

{Demo/}

IF Modifiers

# IF MODIFIERS
Source: apex.oracle.com/ut

{case/}

Compare to values of column or Item  

New on APEX 23.1

# CASE
{case ITEM/}
    {when VALUE1/}
    ...
    {when VALUE2/}
    ...
    {otherwise/}
    ...
{endcase/}
# CASE
{case CART_STATUS/}
    {when NOT_IN_CART/}
      <button>Add to cart</button>
    {when IN_CART/}
      <button>Remove from cart</button>
    {otherwise/}
      <button>View cart</button>
{endcase/}

{Demo/}

{loop/}

Useful for small datasets of parent-child data

select p.first_name || ' ' || p.last_name attendee
     , '<table class="table-pref-list " > <tbody>  <tr><td>' 
         || listagg (         
              apex_escape.html(prefs.track_name) || '</td> ', '</tr> <tr><td> ')   
            within group (order by prefs.track_name)  
         || '</td></tr>  </tbody> </table> ' track_preference
# Via SQL
APEX
Core & DB
Emerging Tech
ks_attendee
ks_tracks
ks_track_xref
{loop "|" COLUMN/}

{endloop/}
# LOOP CODE

Separator

Values to split

| , : ~

{loop "|" COLUMN/}
APEX$I : APEX$ITEM
{endloop/}
# LOOP CODE
APEX|Core & DB|Emerging Tech
1 : APEX
2 : Core & DB
3 : Emerging Tech
APEX$ITEM
// Value of the current item on the list
# Special Symbols

Substitution Symbols

APEX$I
// 1 based index of the current item 
// on the list

{Demo/}

{Demo/}

{Combo}

{Multi-Split/}

Desired Output for an individual

Track         Allocation
------------- ----------
APEX                  50
Core & DB             40
Emerging Tech         10
# Alloc Split

One element split

APEX|Core & DB|Emerging Tech
# Alloc Split
{loop "|" COLUMN/}
APEX$ITEM
{endloop/}
APEX~50|Core & DB~40|Emerging Tech~10
# Alloc Split
Track         Allocation
------------- ----------
APEX                  50
Core & DB             40
Emerging Tech         10

Desired Output for an individual

# Alloc Split
{loop "|" COLUMN/}
  {loop "~" APEX$ITEM/}
    APEX$ITEM <br>
  {endloop/}
{endloop/}
APEX
50
Core & DB
40
Emerging Tech
10
# Alloc Split
{loop "|" TRACK_PREFERENCE/} 
    {loop "~" APEX$ITEM/}
      {case APEX$I/}
      {when 1/}
      Track: &APEX$ITEM.
      {otherwise/}
      Alloc: &APEX$ITEM.<br>
      {endcase/}
    {endloop/}
{endloop/}
Track: APEX Alloc: 50
Track: Core & DB Alloc: 40
Track: Emerging Tech Alloc: 10

Different Approach

# ALLOC LOOP
T|APEX|P|50|$|

  • Same Separator for everything

  • Data Type indicators

T|APEX|P|70|$|
T|DB|P|30|$|

Loop

<div class="row">
{loop "|" TRACK_PREFERENCE/} 
    {case APEX$ITEM/}
    {when T/}<div class="col col-8">
    {when P/}<div class="col col-4 u-tR">
    {when $/}</div><div class="row">
    {otherwise/}&APEX$ITEM.</div>
    {endcase/}
{endloop/}
# ALLOC LOOP
T|APEX|P|50|$|
<div class="row">
{loop "|" TRACK_PREFERENCE/} 
    {case APEX$ITEM/}
    {when T/}<div class="col col-8">
    {when P/}<div class="col col-4 u-tR">
    {when $/}</div><div class="row">
    {otherwise/}&APEX$ITEM.</div>
    {endcase/}
{endloop/}
# ALLOC LOOP
T|APEX|P|50|$|
<div class="row">
  <div class="col col-8">APEX<div>
  <div class="col col-4 u-tR">50</div>
</div>

{Demo/}

{Template Components/}

New in 23.1

{with/}
  LABEL_DISPLAY:=#BADGE_LABEL_DISPLAY#
  LABEL:=#BADGE_LABEL#
  VALUE:=#BADGE_VALUE#
  ICON:=#BADGE_ICON#
  STATE:=#BADGE_STATE#
{apply THEME$BADGE/}
# BADGE CODE

Badge Template Component

Template Internal Name

{with/}
  LABEL_DISPLAY:=Y
  LABEL:=Unread Messages
  VALUE:=7
  ICON:=fa-circle
  STATE:=danger
{apply THEME$BADGE/}
# BADGE CODE
{apply THEME$BADGE/}
  LABEL_DISPLAY:=#BADGE_LABEL_DISPLAY#
  LABEL:=#BADGE_LABEL#
  VALUE:=#BADGE_VALUE#
  ICON:=#BADGE_ICON#
  STATE:=#BADGE_STATE#
{with/}
# BADGE CODE
function THEME$BADGE (
  LABEL_DISPLAY => :BADGE_LABEL_DISPLAY
  LABEL => :BADGE_LABEL
  VALUE => :BADGE_VALUE
  ICON  => :BADGE_ICON
  STATE => :BADGE_STATE
)
return pretty_template

# BADGE CODE

Function Call for Templates

{Template Components/}

Functions for your Templates!

{Demo/}

{Template Directives}

Jorge Rimblas, DRW

{Q&A}