How do I Customize a Card Report

 

Introduction
Oracle APEX Card Reports are a visually engaging way to present rows of data using a card-style layout. Each record becomes a tile or card, often containing a title, subtitle, image, and action buttons. While the default card templates work well, there are many situations where you may want to fine-tune the look, feel, and behavior of these cards to better match your application's branding or UX goals. This blog post will guide you through the process of customizing a Card Report in Oracle APEX to gain full control over layout, interactivity, and style.

How to Customize a Card Report in Oracle APEX

1. Create or Open a Card Report Region

   • Open your application in the APEX App Builder.

   • Go to the target page or create a new one.

   • Add a new region and set the Type to Cards.

   • Set the source to a table, SQL query, or REST data source.

2. Configure Card Attributes

   • In the Card Attributes section, define which columns map to each card component:

     • Title → usually the primary identifier (e.g., name or ID)

     • Subtitle → secondary info (e.g., department or category)

     • Body → a description or status

     • Badge → useful for counts or labels

     • Media → for images or avatars

     • Link → for navigation to a detail page

   • Use PL/SQL expressions, HTML, or even icons in the attribute values.

3. Customize the Template

   • Still in the Card region settings, go to Appearance > Template.

   • Choose a built-in template like “Basic”, “Compact”, or “Floating”.

   • For full control, create a custom card template under Shared Components > Templates > Report.

   • Use substitution strings like #TITLE#, #SUB_TITLE#, #BODY#, #BADGE#, #MEDIA#, and #LINK# to define your layout.

4. Add Conditional Styling

   • Go to the Custom Attributes section of the Card Region.

   • Add static CSS classes based on logic using a case statement in SQL or dynamic actions.

   • Example: assign a different class to cards with overdue items so they appear red.

5. Use Icons and Media

   • Use the Media Source property to display icons or images.

   • You can use URLs, blob images, or Font APEX icon classes like fa-user, fa-home, etc.

   • For icons, set the media type to “Icon Class” and provide a dynamic value from your query.

6. Make the Card Interactive

   • Under the Link section, specify a Target Page and map values to page items using the Set Items property.

   • Add Dynamic Actions to respond to clicks, highlight selection, or open modals.

   • Use JavaScript if you want even more advanced interactivity, like showing tooltips or expanding cards.

7. Style with Custom CSS

   • Add custom CSS classes under Page > CSS or in Shared Components > CSS.

   • Use these classes in your card template to control fonts, padding, hover behavior, borders, or shadows.

   • Example:

     .custom-card {
       background-color: #f5f5f5;
       border-radius: 10px;
       padding: 12px;
       transition: box-shadow 0.3s;
     }
     .custom-card:hover {
       box-shadow: 0 4px 12px rgba(0,0,0,0.1);
     }
     

8. Test and Optimize

   • Run the page and inspect how your cards appear.

   • Make sure the design is responsive and works well on mobile.

   • Test links and actions to ensure navigation and logic are working as expected.

 

When creating or customizing a Card Report, using HTML allows you to have greater control over the design and presentation of data within the report. To enhance your card layout, Oracle APEX provides various tools and features for customizing Card Report Templates. These tools allow you to inject dynamic data, format the card layout, and apply interactive features using HTML.

Objective:

This tutorial will explain the tools available for customizing Card Report Templates using HTML, providing real-world examples to help you understand how to create and customize a Card Report Template.

Step 1: Understanding Card Report Template Structure

A Card Report typically consists of several sections:

• Card Header: The top section where titles or images are often displayed.

• Card Body: The main content area, where you usually display detailed information.

• Card Footer: This section is used for actions like buttons or links.

Step 2: Tools Available for Card Report Template Customization Using HTML

Oracle APEX provides several tools that can be used to enhance the HTML structure and the content inside each card in a Card Report. These tools primarily include:

1. APEX Substitution Variables

2. HTML Expressions

3. CSS for Styling

4. JavaScript for Interactivity

5. Dynamic Actions for Behavior Control

We'll cover each of these tools with examples.

Tool 1: APEX Substitution Variables

APEX Substitution Variables allow you to inject dynamic data from your SQL query into your HTML. These variables are placeholders for the column values returned from your query and are essential for customizing Card Reports.

Example:

Here’s an example SQL query and how to use APEX Substitution Variables in a Card Report template:

SQL Query:

SELECT 

    employee_id,

    first_name,

    last_name,

    job_title,

    department_name,

    salary

FROM employees

HTML Template:

<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>

    </div>

</div>

Explanation:

• &FIRST_NAME., &LAST_NAME., &JOB_TITLE., etc., are APEX substitution variables. They will be replaced by the corresponding data values for each row returned by the SQL query.

• Each card will dynamically display information for each employee, such as their name, job title, and salary.

Tool 2: HTML Expressions for Dynamic Formatting

You can use HTML Expressions to include custom HTML formatting, conditionally display content, or adjust the layout based on dynamic conditions. HTML expressions allow you to embed logical conditions and CSS directly in the template.

Example with Conditional Formatting:

You can add conditional formatting based on a value from the data source (e.g., highlighting the salary if it exceeds a certain value).

HTML Template with Conditional Logic:

<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 style="color: &IF &SALARY. > 70000 THEN 'green'; ELSE 'red'; END IF;">

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

        </p>

    </div>

</div>

Explanation:

• The IF-THEN-ELSE logic in the style attribute changes the color of the salary text based on its value. If the salary is greater than $70,000, it will be green; otherwise, it will be red.

• This dynamic behavior is achieved using HTML Expressions embedded in the template.

Tool 3: CSS for Styling

In Oracle APEX, CSS is used to style the HTML elements in the Card Report. You can either add inline styles or link to external CSS files to customize the appearance of your cards.

Example with Custom CSS:

You can apply custom styles to make your cards look more attractive and responsive.

CSS:

/* Style the card container */

.custom-card {

    border: 2px solid #ddd;

    border-radius: 10px;

    padding: 20px;

    margin: 15px;

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

}

/* Style the header */

.custom-card-header {

    background-color: #f4f4f4;

    text-align: center;

    padding: 10px;

}

/* Style the body */

.custom-card-body {

    padding: 15px;

    font-family: Arial, sans-serif;

}

/* Style the salary */

.custom-card-body p {

    font-size: 16px;

    color: #333;

}

/* Add button styling */

.view-details-button {

    background-color: #4CAF50;

    color: white;

    padding: 10px;

    border-radius: 5px;

    cursor: pointer;

}

.view-details-button:hover {

    background-color: #45a049;

}

Apply Custom CSS to Template: In your HTML template, you can either include the styles inline or link to the external CSS file.

<style>

    /* (CSS code as shown above) */

</style>

Explanation:

• Card Styling: This example gives the card a border, rounded corners, shadow, and padding to make it visually appealing.

• Font and Button Styling: It styles the text and button inside the card, making the "View Details" button green with a hover effect.

Tool 4: JavaScript for Interactivity

If you want to add interactivity to your Card Report, such as clicking on a card to show more details or triggering an event, you can use JavaScript within the Card Report Template.

Example: Dynamic Button to Open a Modal with Details

JavaScript (within HTML Template):

<script>

    function showDetails(employeeId) {

        alert('Showing details for employee ID: ' + employeeId);

    }

</script>

HTML Template with JavaScript Button:

<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>

    </div>

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

        <button class="view-details-button" onclick="showDetails(&EMPLOYEE_ID.)">View Details</button>

    </div>

</div>

Explanation:

• JavaScript is used to create a simple showDetails() function that displays an alert with the employee's ID when the "View Details" button is clicked.

• Dynamic Content: The employee ID is passed dynamically using the substitution variable &EMPLOYEE_ID..

Tool 5: Dynamic Actions for Behavior Control

Dynamic Actions in Oracle APEX allow you to add interactivity and change behavior without writing much JavaScript. For example, you can use Dynamic Actions to toggle visibility, show alerts, or trigger AJAX calls.

Example: Toggle Card Details Visibility Using Dynamic Action

1. Create a Dynamic Action:

• In the APEX App Builder, go to your Card Region.

• Add a Dynamic Action to show or hide the details inside the card when a button is clicked.

2. Define the Dynamic Action:

• Event: Click

• Action: Toggle

• Affected Element: A region or card body.

You can add this behavior with minimal JavaScript or use APEX Dynamic Action tools to handle this interaction.

Oracle APEX provides a robust set of tools to help you customize Card Report Templates using HTML, including:

• APEX Substitution Variables to dynamically inject data.

• HTML Expressions for formatting and dynamic logic.

• CSS for advanced styling and visual enhancements.

• JavaScript for adding interactivity and custom behavior.

• Dynamic Actions for behavior control without writing custom JavaScript.

These tools allow you to fully control the design, layout, and interactivity of your Card Reports, making them more powerful and user-friendly. By combining these techniques, you can create sophisticated and highly customizable Card Reports to meet your business needs.

Conclusion
Customizing a Card Report in Oracle APEX allows you to present your data with clarity, personality, and visual appeal. Whether you're enhancing the layout, changing the behavior, or injecting your brand’s style, the card region gives you the tools to make it happen. With a few adjustments to templates, attributes, and CSS, you can turn standard data rows into a rich, interactive experience for your users.