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.