APEX Field Notes: Create and Use APEX Loop Directives

Introduction

In Oracle APEX, Loop Directives are a powerful feature within the TEMPLATE_TEXT of region templates, particularly for Classic Reports and Card Reports. These directives allow developers to iterate over a collection of data rows and generate repeated HTML elements dynamically. With the ability to define reusable structures using syntax like {loop} and {endloop}, Loop Directives simplify the rendering of structured, row-based content in a clean and maintainable format. This technique is especially useful when displaying complex card layouts, lists, or custom components where uniform styling and logic need to be repeated across rows.

In Oracle APEX, Loop Directives are used within HTML templates—especially in Classic Reports and Card Reports—to dynamically repeat a block of content for each row returned by a SQL query. This gives developers a way to control the layout of repeating elements like cards, rows, and formatted blocks using clean HTML and APEX’s templating syntax.

To create and use a Loop Directive in Oracle APEX, follow these steps:

Step 1: Navigate to the Report Attributes

Go to the APEX App Builder
Open the page that contains your Classic or Card Report
Click on the report region
Under the Layout section, locate Template Type and ensure it is set to HTML Expression (Legacy) or Custom Template depending on your version

Step 2: Create or Edit the Template

Click on Shared Components
Under User Interface, select Templates
Filter by Region Templates or Report Templates, depending on where you want to apply the loop
Choose or create a template
Edit the Template Text field

Use the following basic Loop Directive structure:

{loop}
  <div class="card">
    <h2>{ENAME}</h2>
    <p>Department: {DEPTNO}</p>
  </div>
{endloop}

Here, {loop} and {endloop} define the block that will be repeated for each row of your query. {ENAME} and {DEPTNO} are substitution strings matching the columns from your SQL query.

Step 3: Reference the Template in the Report

Return to your report region
Set the Report Template to the one that uses the loop directive
Make sure your SQL Query returns the columns needed for the template:

SELECT ENAME, DEPTNO
FROM EMP

Step 4: Test and Preview

Run the page to see the repeated structure generated by the loop
Each row from the query will produce one HTML block as defined in the template

Optional Enhancements

You can use these additional template variables:

{APEX$ITEM} – Reference a report column as an item
{APEX$I} – Reference the current row index
{APEX$ID} – Create unique HTML IDs per row
{APEX$META} – Access row metadata

These make it possible to add dynamic JavaScript hooks, conditional logic, or styling based on the position of each row.

Use Cases for Loop Directives

Custom card layouts
Rendering media grids
Structured profile or product displays
Simplified HTML structure instead of default tabular format

Loop Directives give you full control over how repeated data looks, without needing to write JavaScript or manually repeat HTML for each row.

By combining SQL queries, custom HTML, and APEX Loop Directives, you can build powerful, user-friendly, and dynamic report presentations in your Oracle APEX applications.

Example

In Oracle APEX, loop directives allow you to repeat a section of content multiple times. They are particularly useful when you want to display multiple rows of data dynamically in regions, reports, or templates.

What are Loop Directives?

The loop directive in APEX follows the format {loop}, {endloop}, and is used to iterate through a collection of items, such as a list, an array, or a result set from a query. It is a way to repeat content for each item in the collection.

There are two types of loop syntax in APEX:

Loop using a "SEP" separator:

{loop ["SEP"] NAME/}

TEMPLATE_TEXT

{endloop/}

Loop using a "MODEL_ID" reference:

{loop MODEL_ID/}

TEMPLATE_TEXT

{endloop/}

In both cases, the content defined inside {loop} is repeated for each item in the collection, and the loop will automatically stop when all the items have been processed.

Step 1: Loop Using "SEP" Separator

This loop directive is often used when you want to iterate through a collection of values and insert separators between items.

Syntax Explanation:

{loop ["SEP"] NAME/}: The SEP represents a separator that will be placed between each iteration (like a comma, space, or other separator). The NAME is the collection that you want to loop through.
{endloop/}: Marks the end of the loop.

Example 1: Loop with Separator for a List of Tags

Suppose you want to display a list of tags associated with an article, separated by commas.

Define a Collection: Assume that you have a page item or session variable that stores a list of tags, like this: 'APEX, Oracle, SQL, Data, Reports'.
Create a Static Content Region.
Use the loop directive in the HTML Expression:

{loop [", "] :P1_TAGS/}

{endloop/}

Explanation: This example loops through the tags stored in the page item :P1_TAGS, and it separates each tag with a comma (,). Each tag is wrapped in a <span> element for styling.
:P1_TAGS: This represents a page item that contains the list of tags, and ITEM is used to represent each tag in the loop.

Expected Output:

For a list like 'APEX, Oracle, SQL, Data, Reports', the output will be:

<span class="tag">APEX</span>, <span class="tag">Oracle</span>, <span class="tag">SQL</span>, <span class="tag">Data</span>, <span class="tag">Reports</span>

Step 2: Loop Using "MODEL_ID" Reference

The second syntax for looping uses a MODEL_ID, which refers to a specific collection or dataset, often linked to a query result or model.

Syntax Explanation:

{loop MODEL_ID/}: This will loop over the results of the model or collection identified by MODEL_ID.
{endloop/}: Marks the end of the loop.

Example 2: Loop through Query Results

Let’s say you have a list of orders in your database and want to display them in a formatted list.

Create a SQL Query to fetch order data:

SELECT order_id, order_date, amount

FROM orders

WHERE order_status = 'SHIPPED'

ORDER BY order_date;

Create a Static Content Region in APEX.
Use the loop directive to display order information in the HTML Expression:

{loop ORDERS/}

<h3>Order #{ORDER_ID}</h3>

<p>Date: {ORDER_DATE}</p>

<p>Amount: {AMOUNT}</p>

</div>

{endloop/}

Explanation: In this case, the ORDERS model refers to the result set from the query that retrieves orders. The loop will go through each row of the query result and output the ORDER_ID, ORDER_DATE, and AMOUNT for each order.
{ORDER_ID}, {ORDER_DATE}, {AMOUNT}: These are the data points from the query that will be rendered dynamically within the loop.

Expected Output:

If the query returns the following rows:

ORDER_ID	ORDER_DATE	AMOUNT
1001	2025-03-20	250
1002	2025-03-21	450
1003	2025-03-22	350

The output will be:

<h3>Order #1001</h3>

<p>Amount: 250</p>

</div>

<h3>Order #1002</h3>

<p>Amount: 450</p>

</div>

<h3>Order #1003</h3>

<p>Amount: 350</p>

</div>

Step 3: Combining Both Loop Types for Dynamic Data Rendering

You can combine the use of both loop types (with separator and model) to display dynamic content in a more complex scenario.

Example 3: Looping Through Product Categories and Products

Imagine you have a list of product categories, and each category contains a list of products. You can use the loop directives to display categories and their associated products.

Create a SQL Query to fetch product categories and products:

SELECT category_name, product_name

FROM products

ORDER BY category_name, product_name;

Create a Static Content Region and use the following HTML Expression:

{loop PRODUCTS/}

<h3>{CATEGORY_NAME}</h3>

<ul>

{loop [", "] :PRODUCT_NAMES/}

{endloop/}

</ul>

{endloop/}

Explanation: The outer loop ({loop PRODUCTS/}) will iterate over the categories, and the inner loop ({loop [", "] :PRODUCT_NAMES/}) will loop through the list of products in each category. The :PRODUCT_NAMES can be a collection or model that holds product names for each category.

Expected Output:

For categories like "Electronics" with products like "Laptop", "Smartphone", and "Headphones", and "Clothing" with "Shirt", "Jeans":

<h3>Electronics</h3>

<ul>

<li>Laptop</li>, <li>Smartphone</li>, <li>Headphones</li>

</ul>

<h3>Clothing</h3>

<ul>

<li>Shirt</li>, <li>Jeans</li>

</ul>

Step 4: Using Loop with Dynamic Data Models

You can create loops that iterate over dynamic data models in APEX. APEX’s Interactive Reports, Classic Reports, and Collections are great sources of dynamic data that can be used with the loop directive.

For example, if you have a Dynamic Action or SQL Query generating data, you can bind it directly to a loop structure.

Example 4: Looping Through a Dynamic Collection

Suppose you have a collection of items, and you want to display them dynamically:

Create a collection in APEX:

Use the APEX_COLLECTION.CREATE_COLLECTION function to create a collection with items.

Loop through the collection using the loop directive:

{loop ITEM_COLLECTION/}

{endloop/}

This loops through each item in the collection and displays its name.

Key Takeaways:

{loop ["SEP"] NAME/}: Loops through a collection with a separator between each item.
{loop MODEL_ID/}: Loops through a collection or dataset defined by MODEL_ID.
Use in Reports: Loop directives can dynamically display data in reports, collections, or interactive regions.
Data Binding: Bind loop directives to collections, page items, or query results to render dynamic content.

With these techniques, you can create more interactive, dynamic, and personalized pages within your Oracle APEX applications.

Conclusion
By incorporating APEX Loop Directives in your report templates, you unlock greater flexibility in customizing how data is displayed without the need for complex PL/SQL or JavaScript. This method improves development efficiency by enabling consistent, template-driven rendering of repeated data patterns. Whether you're building card-based layouts, custom lists, or enhanced UI components, Loop Directives offer a structured, elegant way to enhance your Oracle APEX applications.

APEX Field Notes

Search This Blog

Tuesday, July 1, 2025

How to Create and Use APEX Loop Directives

Building your very first application with ORACLE APEX