CARD Report HTML Template

 Introduction:

In Oracle APEX, the Card Report region type offers a visually appealing way to present data using custom layouts that resemble business cards, profile tiles, or dashboards. The foundation of these displays lies in the HTML Template, which controls how each card appears using simple HTML combined with APEX-specific placeholders. By customizing the Card Report HTML Template, developers can inject branding, layout structures, icons, colors, and conditional formatting—giving full control over how records are visually rendered without requiring JavaScript or heavy client-side logic.

In Oracle APEX, the Card Report is a powerful and visually appealing way to display data. The Card Report Body Advanced Formatting using HTML Expression allows you to customize how each card's body content appears, adding more flexibility for developers.

You can display rows of data in a grid of cards, and each card represents a data record. The body of the card is usually populated with data from a report query, but with advanced formatting, you can modify how the content appears using HTML expressions.

 In Oracle APEX, the Card Report HTML Template defines how each card in a Card Report region is visually rendered. This template uses a blend of standard HTML and APEX substitution syntax to allow developers to design highly customizable layouts for displaying rows of data as card-style tiles.

To configure the HTML Template of a Card Report:

1. Navigate to the Card Report Region
   In the Page Designer, locate and select the Card Report region. This type of region is often used for visually rich displays such as employee profiles, product summaries, or dashboards.

2. Access the Template Settings
   Under the region’s Attributes, scroll to the Card Template section. You will see a field labeled HTML Template—this is where you define the layout for each individual card.

3. Use APEX Substitution Strings
   You can reference column values in the report query by wrapping the column alias in # symbols. For example:

   <div class="card">
     <h3>#FULL_NAME#</h3>
     <p>#JOB_TITLE#</p>
     <span class="location">#STATE#</span>
   </div>
   

   Each #COLUMN_NAME# will be replaced with the corresponding value from the query.

4. Enhance with HTML and CSS
   You can include standard HTML elements like <img>, <div>, <span>, and even inline CSS or CSS classes to control the appearance of the card. For example, to display a profile picture:

   <div class="profile-card">
     <img src="#PHOTO_URL#" alt="Profile Photo" class="photo" />
     <div class="info">
       <strong>#FULL_NAME#</strong><br>
       <em>#DEPARTMENT#</em>
     </div>
   </div>
   

5. Use Template Directives for Conditional Logic
   APEX supports simple template directives like {if}, {case}, {loop}, etc., within card templates. Example:

   {if STATUS/}
     <span class="badge badge-success">Active</span>
   {endif/}
   

   These directives allow you to change the card’s content based on data values.

6. Test and Refine
   After entering the HTML Template, run the application and examine the layout. Use browser developer tools to inspect the generated HTML and adjust your CSS and layout as needed.

Example SQL Source for a Card Report:

SELECT
  employee_id,
  full_name,
  job_title,
  department,
  status,
  photo_url
FROM employees

Corresponding HTML Template:

<div class="employee-card">
  <img src="#PHOTO_URL#" alt="#FULL_NAME#" class="photo">
  <div class="card-details">
    <h2>#FULL_NAME#</h2>
    <p>#JOB_TITLE# - #DEPARTMENT#</p>
    {if STATUS = 'Active'/}
      <span class="status-active">Active</span>
    {else/}
      <span class="status-inactive">Inactive</span>
    {endif/}
  </div>
</div>

By leveraging the Card Report HTML Template, you can craft unique and responsive layouts tailored to your users’ expectations. This feature empowers you to go beyond default data grids, making applications visually modern and easier to scan and interact with.

Example

Step-by-Step Tutorial

Step 1: Create a New Application

1. Open your Oracle APEX instance and create a new application.

2. Choose a Blank Application or any template you prefer.

3. Click Create.

Step 2: Create a Card Report Region

After the application is created, go to the App Builder.

Add a new Region by clicking on Create Region.

Choose the Card Report type from the list.

Choose the Source (typically a SQL Query or Table) for the report. Example SQL query:

SELECT

    employee_id,

    first_name,

    last_name,

    job_title,

    department_name,

    salary

FROM

    employees

Step 3: Customize Card Body with HTML Expressions

To apply advanced formatting to the card body, follow these steps:

1. Navigate to the Card Body Section:

• Go to the Card Region you just created.

• In the Attributes tab, find the Card Body section. This is where you'll add your HTML expressions.

2. Using HTML Expressions:

• In the Card Body area, you can use HTML and APEX substitution variables to format the content dynamically.

• The general syntax for using substitution variables is &COLUMN_NAME. where COLUMN_NAME is the name of the column in your query.

3. Basic Example: Add an HTML expression to format the card body content with a simple greeting and the employee's information:

HTML Expression (example for Card Body):

<div class="card-content">

    <h3>Hello, &FIRST_NAME. &LAST_NAME.</h3>

    <p>Job Title: &JOB_TITLE.</p>

    <p>Department: &DEPARTMENT_NAME.</p>

    <p>Salary: $&SALARY.</p>

</div>

• Explanation:

• This example dynamically injects the employee's first name, last name, job title, department, and salary into the card body.

• We use HTML tags like <div>, <h3>, and <p> to organize the content.

• The &COLUMN_NAME. syntax will be replaced with actual data from the query for each row.

4. More Advanced Example: Add conditional formatting (e.g., salary-based color change):

<div class="card-content">

    <h3>&FIRST_NAME. &LAST_NAME.</h3>

    <p>Job Title: &JOB_TITLE.</p>

    <p>Department: &DEPARTMENT_NAME.</p>

    <p style="color: #FFF; background-color: 

       <% IF &SALARY. > 70000 THEN

            'green';

       ELSE

            'red';

       END IF; %>;">

       Salary: $&SALARY.

    </p>

</div>

• Explanation:

• Here, we use a conditional block (<% IF ... THEN ... END IF; %>) to check the salary.

• If the salary is greater than $70,000, the background color of the salary will be green, otherwise, it will be red.

Step 4: Add CSS for Additional Styling

Sometimes, you might want to apply custom styles to your card body. This can be done via CSS.

1. In the Shared Components menu, go to CSS under Themes.

2. Add custom CSS to style the card report. For example:

.card-content h3 {

    color: #2c3e50;

    font-size: 18px;

}

.card-content p {

    font-size: 14px;

    color: #7f8c8d;

}

.card-content p.salary-high {

    background-color: #27ae60;

}

.card-content p.salary-low {

    background-color: #e74c3c;

}

In the HTML Expression part of your card body, apply custom classes:

<div class="card-content">

    <h3>&FIRST_NAME. &LAST_NAME.</h3>

    <p>Job Title: &JOB_TITLE.</p>

    <p>Department: &DEPARTMENT_NAME.</p>

    <p class="salary-high">Salary: $&SALARY.</p>

</div>

• The salary-high class will style the salary as per your CSS.

Step 5: Preview and Fine-Tune

1. Run the Application by clicking on Run or Preview.

2. Test how the cards look and ensure that the data displays correctly in each card.

3. Refine the HTML expression to adjust any styling or layout issues.

Use Developer Tools (F12) in your browser to inspect elements and tweak styles further.

Conclusion:
Mastering the Card Report HTML Template in Oracle APEX enables you to transform plain datasets into rich, interactive visual cards that enhance user engagement and data clarity. With the use of template directives and substitution strings, you can easily fine-tune the appearance of individual elements while preserving performance and responsiveness. Whether you’re building dashboards, profile grids, or summary views, leveraging this templating feature gives your application a polished, professional feel tailored to your business needs.