What is the Card Report?

 

Introduction
The Card Report in Oracle APEX is a highly visual, modern way to present data in a structured, tile-based layout. Unlike traditional reports, which emphasize tabular format, Card Reports focus on delivering a rich user experience through images, icons, titles, and descriptive text—all styled with templates that are both mobile-friendly and customizable. This feature is ideal for dashboards, summary views, and use cases where design and readability are key. In this blog, we’ll explore what a Card Report is, how to build one, and the many ways you can configure it to enhance your Oracle APEX application.

What is the Card Report and How to Use It in Oracle APEX

The Card Report (also referred to as a Card Region) is a region type in Oracle APEX that enables developers to display data in the form of individual cards—each card representing a row of data. These cards can include attributes like titles, subtitles, icons, avatars, media, and links.

To create a Card Report:

1. Create or Edit a Page

   • In Oracle APEX, go to the App Builder and select a page or create a new blank page.

2. Add a Card Region

   • In Page Designer, click the + icon to add a new region.

   • Select Cards under the Reports category.

   • This adds a Card region to your page.

3. Define the Data Source

   • Set the region’s source to a SQL query.
     Example:

     SELECT 
       EMPLOYEE_ID,
       FIRST_NAME,
       LAST_NAME,
       JOB_TITLE,
       DEPARTMENT,
       PROFILE_IMAGE
     FROM EMPLOYEES
     

4. Set Card Attributes

   • Under Card Attributes, you can define:

     • Title: Use FIRST_NAME || ' ' || LAST_NAME

     • Subtitle: Use JOB_TITLE

     • Body: Use DEPARTMENT

     • Media (Image): Use PROFILE_IMAGE if you store image URLs or blob content

     • Icon or Badge: Optionally use for indicators like status or role

5. Add Interactivity (Optional)

   • You can make cards clickable by defining navigation targets.

   • You can pass values to other pages using Set Items.

   • Dynamic Actions can also be applied to respond to card interactions.

6. Style and Template Options

   • Choose from different card templates: Compact, Badge, Media, etc.

   • Adjust layout settings such as number of columns, spacing, and responsiveness.

7. Run the Page

   • After saving your changes, run the page to view the cards rendered with real data.

 

A Card Report in Oracle APEX is a modern, flexible way to present data in a card-like layout. 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.

Objective:

You will learn how to use HTML Expressions to format the content of the Card Report Body in Oracle APEX.

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.

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

Conclusion
The Card Report in Oracle APEX is more than just a way to display data—it’s a tool for modernizing your application’s UI and improving user engagement. With built-in responsiveness, dynamic data binding, and navigation support, Card Reports can turn plain rows of data into a compelling, user-friendly experience. Whether you're building dashboards, summaries, or drill-down interfaces, the Card region helps you deliver style and structure with minimal effort.