{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}

Template Directives

By Jorge Rimblas

Template Directives

Out of the box, Oracle APEX has a powerful templating engine. But this session is not about APEX Templates but Template Directives. Introduced in APEX 20.2, Template Directives provide developers with another tool for creating beautiful and powerful layouts. We'll explore the syntax and capabilities with step-by-step examples. After this presentation, it won't take long before you see how to apply these techniques everywhere.

  • 557

More from Jorge Rimblas