How do I Customize a Card Report

 Card Reports in Oracle APEX offer a visually engaging way to present data using flexible, tile-based layouts. Customizing a Card Report allows developers to go beyond the default appearance and behavior by adjusting the HTML structure, adding dynamic content, and applying custom styles through CSS. This customization enhances the readability, branding, and usability of the application. Whether you're displaying employee profiles, product listings, or summarized metrics, a well-tailored Card Report can significantly improve the user experience and interface design.

Customizing a Card Report in Oracle APEX allows you to enhance the way data is displayed visually by tailoring layout, formatting, and interactivity. Oracle APEX Card Reports are driven by templates using HTML and substitution strings, which give you full control over the structure and design of each card.

To begin, open your application in Application Builder. Select the page that contains the Card Report, or create a new page by choosing Report > Cards from the Create Page wizard. Choose the table or SQL query that provides the data source for your cards.

Once your Card Report is created, customize it by editing the Card Template. Go to the Card region and expand the Attributes section. You'll see various template parts such as:

• Title: Use a column or substitution string like #EMPLOYEE_NAME#.

• Subtitle: Add secondary information, such as #JOB_TITLE#.

• Body: Use this to add HTML content, such as a paragraph with #DESCRIPTION#, styled with <p> tags or additional formatting.

• Media: Display images by referencing a column containing image URLs, e.g., #PHOTO_URL#.

• Badge: Optional label or indicator; often used for status or counts.

• Link Target: Define what happens when the user clicks on a card. This could navigate to a detail page using page item substitutions like f?p=&APP_ID.:10:&SESSION.::&DEBUG.:RP:P10_ID:#EMPLOYEE_ID#.

You can further enhance the appearance of your cards using CSS Classes. In the Card Template settings, assign custom classes to different parts of the card. Then, go to the page’s Inline CSS section (under Page > CSS) or add a CSS file to your application to define styles like padding, borders, font sizes, colors, and hover effects.

If your application uses themes that support Universal Theme Cards, you can also enable or disable options such as Media Position (top, left, right), Badge Position, and Card Size (small, medium, large) to refine layout and responsiveness.

For even more control, use the Custom Template option under the Card Template selection. Here, you can enter raw HTML and use Oracle APEX substitution syntax like #COLUMN_NAME#, {if CONDITION} directives, or loops with {for} to generate dynamic and conditional content.

By customizing your Card Report, you ensure that the display of your application data is not only functional but also aligned with your branding and user experience goals.

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.

Customizing a Card Report in Oracle APEX empowers you to align the visual presentation of your data with the specific needs of your application and users. By taking advantage of template options, substitution strings, dynamic classes, and CSS styling, you can transform basic data into a highly interactive and attractive component. With this flexibility, your application not only delivers data but does so in a modern and professional format that supports both functionality and design consistency.