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.