Skip to Main Content

This is a repeater group from our FlowForms plug-in.

Click or scroll for help

Bring your dream designs to life with the APEX Template Studio

The APEX Template Studio is an online playground for designing components with the Oracle APEX template syntax. It allows you to quickly adjust the HTML and CSS of your APEX templates and see the results in real-time. Test out new ideas, refine existing templates, or explore shared creations.

How does it work?

On the right side, you can see the output, and on the left there are three editors:

HTML: Create the HTML structure of your template. Use the Oracle APEX Template Directives

CSS: Add style definitions to the CSS tab.

Data: For each attribute, you can provide a value to see how it looks in real life. Add multiple sets of data to view different variations of your template at a glance.

Template Syntax / Template Directives

Template Directives allow you to add conditions to your HTML layout.

Attributes / Placeholders

Add placeholders for variable values by enclosing the attribute name with hashes: #NAME#

<span>#NAME# is #AGE# yeas old.<span>

Case statements

Use this to do value checks.

<span class="fa 
  {case PROJ_STATUS/}
    {when COMPLETED/}
      fa-flag-checkered
    {when DEVELOPMENT/}
      fa-apex
    {otherwise/}
      fa-question-circle-o
  {endcase/}">
</span>

If conditions

Use if conditions for simple true/false checks. If you want to check values, use case statements instead.

{if ATTR/}
  TRUE
{elseif ?ATTR/}
  FALSE
{else/}
  NULL
{endif/}

Loops

If you have a separated value, you can loop over it. Pass the separator as the second parameter, and use &APEX$ITEM. to reference each value.

<ul>
{loop ":" CATEGORIES/}
  <li>&APEX$ITEM.</li>
{endloop/}
</ul>

With/apply

With/apply syntax lets you reuse another template/theme component inside your component.

ATS currently only supports the universal theme included theme components (most importantly: button, badge, and avatar). This example shows how to include a badge. Specify which component you want to call after the "apply" keyword set the attributes with ":=" after the "with" keyword:

{with/}
    LABEL:=Status
    VALUE:=Completed
    STATE:=
    ICON:=fa fa-check
    LABEL_DISPLAY:=N
    STYLE:=success
    SHAPE:=t-Badge--circle
    SIZE:=
{apply THEME$BADGE/}
More theme component examples

CSS variables

Instead of reinventing the wheel, you can also make use of existing CSS variables that match your Universal Theme style. There is a great example of that in the Universal Theme app.

Template Components

One way to use the created templates is to set up reusable Template Component plug-ins. You can create one by going into Shared Components > Plug-ins > New . Check out the in depth tutorial on how to do it on Philipp's blog. You can find other people's Template Components on apex.world.

Shortcuts

  • Ctrl/⌘ + S: save

More from United Codes

These plug-ins make APEX Template studio possible

Follow United Codes