How do I Create a custom Card Report Template

 Introduction:

Creating a custom Card Report Template in Oracle APEX allows developers to transform tabular data into visually appealing, card-style layouts. This approach enhances user experience by presenting data in a more intuitive and organized format. Whether showcasing products, employees, or summary records, custom templates offer complete control over the visual structure of each card. By using HTML, CSS, and Oracle APEX substitution strings, you can define how each data point is displayed, styled, and formatted—all without relying on external tools.

Creating a custom Card Report Template in Oracle APEX allows developers to present rows of data in a visually engaging, card-style format. This is especially useful when displaying content like employee profiles, product listings, or any record-based information where visual context enhances understanding. Card Reports differ from traditional tabular reports by offering flexible layout and styling options through HTML, CSS, and APEX substitution strings.

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

1. Navigate to Shared Components
Open your APEX application
Go to Shared Components
Under User Interface, click Templates
Click Create and choose Report Template

2. Define Template Properties
Give your template a name, such as Custom Card Layout
Set Template Type to Cards
Choose HTML as the Template Syntax
Define the Row Template – this controls how each card is displayed
You will use HTML along with APEX substitution strings to reference column values

3. Sample Row Template Code

<div class="card">
  <div class="card-header">
    <h3>#TITLE#</h3>
  </div>
  <div class="card-body">
    <p>#DESCRIPTION#</p>
    <p><strong>Status:</strong> #STATUS#</p>
  </div>
  <div class="card-footer">
    <a href="f?p=&APP_ID.:15:&SESSION.::NO::P15_ID:#ID#" class="btn btn-primary">View Details</a>
  </div>
</div>

In this example, #TITLE#, #DESCRIPTION#, #STATUS#, and #ID# are column aliases from your SQL query.

4. Add CSS Styling
To improve the appearance, add CSS under Inline CSS or include it in your application’s Theme > Inline CSS section:

.card {
  border: 1px solid #ccc;
  border-radius: 10px;
  padding: 16px;
  margin: 10px;
  box-shadow: 0 2px 5px rgba(0,0,0,0.1);
}
.card-header h3 {
  margin: 0;
}
.card-footer {
  text-align: right;
}

5. Save the Template
Click Create Template or Apply Changes
Now your custom card template is saved and can be used across any Card Report in your application

6. Create the Card Report Page
From the Application Builder, click Create Page
Choose Report > Cards
Select a table or SQL query source
When prompted for a template, choose your custom card template
Make sure to alias the columns in your SQL query to match the placeholders used in the template
Example query:

SELECT 
  employee_name AS title,
  job_description AS description,
  status,
  employee_id AS id
FROM employees

7. Run and Test the Report
Once created, run your application and navigate to the card report page.
Each record should now be displayed using your custom template structure and styles.

Additional Tips:

• You can enhance the template with icons, conditional formatting, and images

• Use dynamic classes or APEX conditionals like {if STATUS = 'Active'} for even more flexibility

• If using Faceted Search or Pagination, your template still works seamlessly

By mastering custom card templates, you gain full control over how information is presented to end-users, leading to more intuitive and modern user interfaces.

Example

Card Report is a visually appealing and flexible way to present data in a card-like layout. Sometimes, the default card templates might not meet your exact needs, and in such cases, you can create and use a Custom Card Report Template.

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 provide a powerful way to present complex data in a clean and modern format. By designing your own layout using native APEX features, you ensure consistency in branding and usability across your application. With the flexibility to integrate dynamic content, images, conditional styling, and interactive elements, custom card templates help bring your APEX applications to life and deliver a more engaging experience for your users.