How do I Customize a Card Report

 Customizing a Card Report in Oracle APEX lets you tailor the appearance and behavior of your data cards to match your application’s design and user needs. Whether you want to change the layout, apply custom CSS styles, adjust card fields, or use a bespoke HTML template, APEX provides declarative and template‑driven options. By mapping your SQL query columns to card attributes—like title, subtitle, image, and link—and applying template or CSS overrides, you can create a card interface that is both visually engaging and functionally intuitive.

Customizing a Card Report in Oracle APEX allows developers to present data in a visually engaging format, where each record is displayed as an individual card. This is particularly useful for dashboards, summary views, and mobile-friendly interfaces. Oracle APEX provides flexible options to define what content is shown in each part of the card—such as title, subtitle, body, media, and actions—using SQL queries, substitution strings, and templates.

To begin customizing a Card Report, first navigate to the App Builder, then select your application. Create a new page or edit an existing one and choose the Report → Cards component. When defining the SQL Query for your card report, ensure it includes the fields you want to map to card attributes. Typical fields might be EMPLOYEE_NAME, JOB_TITLE, IMAGE_URL, and LINK_URL.

Once the SQL source is defined, proceed to the Attributes section of the Card Region. In this area, you map each part of the card layout to a column in your query:

• Title: Use a meaningful column like employee name or product name.

• Subtitle: Typically used for a secondary field such as job title or category.

• Body: Can contain summary information or a description.

• Media: Assign a column that contains an image URL or icon name.

• Badge/Tag: Useful for showing status or category labels.

• Link: This defines where the card should navigate when clicked. Use a dynamic URL or page reference and pass any required parameters.

To further customize the visual appearance, use the HTML Expression section in the Advanced region. This enables you to wrap your content in HTML and insert dynamic values using substitution strings like #EMPLOYEE_NAME#.

For layout styling, Oracle APEX offers multiple predefined card templates, and you can apply additional CSS classes via the CSS Classes property. If you need deeper control, you can define a custom Card Template by going to Shared Components → Templates → Report → Create. In this custom template, you write HTML using template directives like #TITLE#, #SUBTITLE#, and #BODY#, which will be replaced dynamically by the runtime engine.

You can also add icons or buttons by defining an Action Position (e.g., footer or header) and supplying either a static button or a dynamic link generated via a SQL column. These actions can navigate to other pages, open modals, or trigger JavaScript functions.

Finally, test the Card Report on both desktop and mobile views to ensure responsiveness and usability. Use developer tools and CSS tweaks to fine-tune spacing, colors, and alignment.

With these options, Oracle APEX allows full customization of Card Reports to deliver data in a stylish and functional layout tailored to user expectations.

Example

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.

In conclusion, a well‑customized Card Report enhances the user experience by presenting information clearly and attractively. By leveraging APEX’s built‑in template options, CSS classes, and HTML substitution strings, you can achieve a unique look and feel without sacrificing maintainability. With these techniques, your Card Reports will not only display data effectively but also reinforce your application’s branding and usability.