How do I Create a custom Card Report Template

 Introduction
Oracle APEX offers Card Reports as a powerful visual layout to present rows of data as modern, responsive cards. While the built-in templates are flexible and user-friendly, sometimes your application requires a unique design that better reflects branding or UX needs. In such cases, creating a custom Card Report template gives you full control over the HTML structure, layout, and styling of each card. This blog will walk you through the process of building a custom Card Report template in Oracle APEX, helping you tailor the visual presentation exactly to your needs.

How to Create a Custom Card Report Template in Oracle APEX

To create a custom Card Report Template in Oracle APEX, follow these steps:

1. Open the Application and Navigate to Shared Components

   • From the APEX App Builder, open your application.

   • Click on Shared Components.

   • Under User Interface, select Templates.

2. Create a New Template

   • Click on Create > Report Template.

   • Choose Report Template Type as Cards.

   • Provide a name like Custom Card Layout.

3. Define Template Details

   • In the template editor, you'll see sections for Template, Title, Body, Badge, Media, Actions, and Link.

   • Each section can hold substitution strings like #TITLE#, #BODY#, #BADGE#, etc., which are placeholders for the attributes defined later in the Card Region.

   Example template code:

 

 

Creating a custom Card Report template allows you to define how each card should look, and it can include custom HTML, CSS, and dynamic content. In this tutorial, I'll walk you through the steps to create a Custom Card Report Template and apply it to a Card Report.

Objective:

By the end of this tutorial, you'll know how to:

• Create a Custom Card Report Template.

• Apply it to your Card Report region.

• Use dynamic content and custom styling within the template.

Step 1: Create a New Application and Card Report Region

1. Create a New Application:

• Go to your Oracle APEX workspace.

• Create a New Application (either Blank or another template).

• Once your application is created, navigate to App Builder.

2. Create a Card Report Region:

• Click Create Region.

• Select Card Report from the region type.

• Choose the data source for the report (e.g., a SQL Query or a table).

• Example SQL query to pull employee data:

SELECT 

    employee_id,

    first_name,

    last_name,

    job_title,

    department_name,

    salary,

    hire_date

FROM

    employees

3. Save the region and preview it.

Step 2: Create a Custom Card Report Template

To create a custom card template, follow these steps:

1. Navigate to Shared Components:

• From the APEX App Builder, go to Shared Components (on the left panel).

• Under User Interface, select Templates.

2. Create a New Template:

• In the Templates section, click on Create.

• Choose Card as the template type.

3. Define Template Settings:

• Template Name: Give your template a name (e.g., Custom Card Template).

• Template Type: Select Card.

• In the Template Body section, you'll define the structure of each card using HTML.

4. Write the Template Code:

Below is an example of a custom card template that uses dynamic content for each card:

<div class="custom-card">

    <div class="custom-card-header">

        <h3 class="card-title">&FIRST_NAME. &LAST_NAME.</h3>

    </div>

    <div class="custom-card-body">

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

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

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

        <p><strong>Hire Date:</strong> &HIRE_DATE.</p>

    </div>

    <div class="custom-card-footer">

        <button class="view-details-button" onclick="location.href='f?p=&APP_ID.:DETAILS:&SESSION.::NO::P1_EMPLOYEE_ID:&EMPLOYEE_ID.'">View Details</button>

    </div>

</div>

Explanation:

• &FIRST_NAME., &LAST_NAME., &JOB_TITLE., etc., are APEX substitution variables that will be replaced by data from the report query for each row.

• The View Details button generates a dynamic link to view more details about the employee.

• The structure of the card includes a header, body, and footer. You can style them accordingly.

5. CSS Styling (Optional):

To style your custom cards, you can either add inline styles directly in the template or use an external CSS file. Here's an example of inline CSS:

<style>

    .custom-card {

        border: 1px solid #ddd;

        border-radius: 8px;

        padding: 20px;

        margin: 10px;

        box-shadow: 0 4px 6px rgba(0,0,0,0.1);

    }

    .custom-card-header {

        background-color: #f4f4f4;

        padding: 10px;

        text-align: center;

    }

    .custom-card-body {

        padding: 15px;

    }

    .custom-card-footer {

        text-align: center;

        margin-top: 10px;

    }

    .view-details-button {

        background-color: #4CAF50;

        color: white;

        padding: 10px 20px;

        border: none;

        border-radius: 5px;

        cursor: pointer;

    }

    .view-details-button:hover {

        background-color: #45a049;

    }

</style>

Explanation:

• This CSS will give the card a light shadow, a subtle header, and styled buttons. Feel free to modify the CSS to meet your design needs.

6. Save the Template.

Step 3: Apply the Custom Template to Your Card Report

1. Go to Your Card Region:

• Navigate to the Card Report region you created earlier.

2. Modify the Region Attributes:

• Under the Attributes tab for the Card Region, find the Template field.

• Select the Custom Card Template you just created from the dropdown list.

3. Customize Region Settings (Optional):

• You can further customize settings like the number of columns, pagination, and alignment of the cards in the region settings.

4. Save the Region and Run the Application.

Step 4: Test and Refine the Card Report

1. Preview the Application:

• Click Run or Preview to see how your custom card layout looks.

• Verify that each card displays the dynamic data correctly and that the styling appears as expected.

2. Inspect and Debug:

• If needed, use your browser's Developer Tools (F12) to inspect the elements and troubleshoot any layout or styling issues.

• You can adjust the CSS or template code as necessary.

3. Refining the Template:

• If you need additional dynamic content, you can further enhance the template with more substitution variables or even JavaScript for interactivity.

• Example: Adding an image or icon next to the employee’s name.

<div class="custom-card">

    <div class="custom-card-header">

        <img src="path/to/images/&PHOTO." alt="Employee Photo" class="employee-photo">

        <h3 class="card-title">&FIRST_NAME. &LAST_NAME.</h3>

    </div>

</div>

Conclusion
Custom Card Report Templates in Oracle APEX provide the flexibility to go beyond the default designs and build interfaces that truly match your application's aesthetic and user experience goals. Whether you're building a dashboard, a directory, or a data-driven UI, customizing your card layout allows you to highlight the most important information visually and intuitively. By following this approach, you ensure that your application stands out, remains easy to use, and fully supports your users’ needs.

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.