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.

How to Create and Use APEX CASE Directive with TEMPLATE_TEXT Using {case}, {when}, {otherwise}, and {endcase}

 In Oracle APEX, the CASE directive is a powerful template feature that enables dynamic content rendering based on conditions directly within your HTML templates. Using the CASE directive along with the keywords {case}, {when}, {otherwise}, and {endcase}, developers can implement conditional logic inside templates without writing complex PL/SQL code. This approach allows you to customize how data and UI elements are displayed based on specific values or states, improving the flexibility and user experience of your APEX applications.

To create and use the APEX CASE directive with TEMPLATE_TEXT, you start by embedding the CASE syntax within your HTML or region templates. The structure begins with {case expression}, where the expression is evaluated, followed by one or more {when value} blocks that define the output for matching values. The {otherwise} block specifies a default output if none of the conditions match, and the directive is closed with {endcase}. This simple yet effective logic lets you show different content, styles, or icons based on the data. For example, you might display a green badge for "Active" status and a red badge for "Inactive," all controlled inside the template with CASE directives.

Using the CASE directive enhances maintainability and readability of your templates by centralizing conditional display logic. It reduces the need for multiple static templates or complicated dynamic actions and can be combined seamlessly with other substitution variables. Mastering this directive empowers developers to build highly customizable interfaces that adapt dynamically to underlying data values, providing end-users with clearer visual cues and context-sensitive information.

In Oracle APEX, the CASE directive is a versatile feature used within TEMPLATE_TEXT to add conditional logic to your templates. This directive enables you to control what content or formatting is displayed based on dynamic values, all within the template itself, without needing to write additional PL/SQL code. The directive uses the keywords {case}, {when}, {otherwise}, and {endcase} to define conditions and their corresponding outputs, allowing for clean, maintainable, and powerful template customization.

To create and use the APEX CASE directive, start by embedding the {case expression} at the point in your template where you want to evaluate a variable or column value. The expression inside {case} typically references a substitution string, such as a column name or an item. Following this, you define one or more {when value} blocks. Each {when} block specifies the output to render when the expression matches that particular value. If none of the {when} conditions match, the {otherwise} block defines a default output. The directive is closed with {endcase} to signal the end of the conditional logic.

Here is a basic example to illustrate the syntax:

{case STATUS}
{when ACTIVE}
Active
{when INACTIVE}
Inactive
{otherwise}
Unknown
{endcase}

In this example, the value of STATUS is checked. If it is "ACTIVE", a green "Active" label is shown; if "INACTIVE", a red "Inactive" label; otherwise, a generic "Unknown" label appears. This allows you to create dynamic and visually distinct displays based on data values without complex logic elsewhere.

To implement this in Oracle APEX:

1. Open your application and navigate to Shared Components.

2. Select Templates, then choose the template you want to modify, such as a report or card template.

3. Locate the TEMPLATE_TEXT field where you want to add conditional logic.

4. Insert the CASE directive syntax with appropriate substitution strings matching your application’s columns or items.

5. Save your changes and run your page to see the conditional rendering in action.

Using the CASE directive improves maintainability because it consolidates conditional formatting within the template itself, avoiding scattered logic across multiple components or processes. It also enhances user experience by providing clear visual cues directly tied to data states.

The APEX CASE directive with TEMPLATE_TEXT is a powerful tool to add dynamic, condition-based content rendering inside your templates. By mastering the use of {case}, {when}, {otherwise}, and {endcase}, developers can create cleaner templates, reduce code duplication, and build flexible, user-friendly interfaces that respond intelligently to underlying data values.

Example

In Oracle APEX, you can use CASE directives in templates to dynamically generate content based on specific conditions. The syntax {case}, {when}, {otherwise}, and {endcase} are used in APEX templates to create conditional logic, allowing you to show or hide content based on certain values or conditions.

In this tutorial, we’ll demonstrate how to use these directives to display different content dynamically in your APEX application.

Step 1: Understanding the Syntax

Here’s the basic structure of a CASE directive using TEMPLATE_TEXT with {case}, {when}, {otherwise}, and {endcase}:

{case NAME/}

    {when string1/}

        TEMPLATE_TEXT1

    {when string2/}

        TEMPLATE_TEXT2

    {otherwise/}

        TEMPLATE_TEXT

{endcase/}

• {case NAME/}: This begins the CASE block and is followed by a name or expression. The block will evaluate conditions based on the value of NAME.

• {when string1/}: This specifies a condition (string1). If NAME matches string1, the content (TEMPLATE_TEXT1) will be displayed.

• {when string2/}: This specifies another condition (string2). If NAME matches string2, the content (TEMPLATE_TEXT2) will be displayed.

• {otherwise/}: If no conditions match, this content will be displayed as the default.

• {endcase/}: This closes the CASE block.

Step 2: Example 1 - Showing Different Content Based on User Role

Suppose you want to display different messages to users based on their roles (e.g., Admin, User, Guest). You can create a CASE directive that evaluates the &APP_USER. (the current user) and shows different text depending on the role.

Steps:

1. Create a Static Content Region.

2. In the HTML Expression field, use the following template:

{case &APP_USER./}

    {when 'ADMIN'/}

        <h2>Welcome, Administrator!</h2>

        <p>You have full access to the system.</p>

    {when 'USER'/}

        <h2>Welcome, User!</h2>

        <p>You have limited access to certain features.</p>

    {otherwise/}

        <h2>Welcome, Guest!</h2>

        <p>Please log in to access more features.</p>

{endcase/}

• Explanation: This block checks the value of &APP_USER. (the logged-in user):

• If the user is 'ADMIN', it shows a message welcoming the admin.

• If the user is 'USER', it shows a message for the standard user.

• If the user is neither, it displays a default guest message.

Expected Output:

If &APP_USER. is 'ADMIN':

Welcome, Administrator!

You have full access to the system.

If &APP_USER. is 'USER':

Welcome, User!

You have limited access to certain features.

If &APP_USER. is any other value (e.g., 'GUEST'):

Welcome, Guest!

Please log in to access more features.

Step 3: Example 2 - Showing Content Based on Page Item Value

In this example, let's say you want to show different content depending on the value selected in a page item (P1_STATUS). For instance, the status could be either 'Active', 'Inactive', or 'Pending'.

Steps:

1. Create a Page Item: Create a page item called P1_STATUS with possible values: 'Active', 'Inactive', and 'Pending'.

2. Create a Static Content Region.

3. In the HTML Expression field, use the following template:

{case :P1_STATUS/}

    {when 'Active'/}

        <h2>Status: Active</h2>

        <p>The system is running smoothly.</p>

    {when 'Inactive'/}

        <h2>Status: Inactive</h2>

        <p>The system is currently inactive. Please contact support.</p>

    {when 'Pending'/}

        <h2>Status: Pending</h2>

        <p>The system status is pending. Please wait for further updates.</p>

    {otherwise/}

        <h2>Status: Unknown</h2>

        <p>The status could not be determined.</p>

{endcase/}

• Explanation: This block evaluates the value of the P1_STATUS page item:

• If P1_STATUS is 'Active', it shows a message indicating that the system is running smoothly.

• If P1_STATUS is 'Inactive', it shows a message about the system being inactive.

• If P1_STATUS is 'Pending', it shows a message about the pending status.

• If none of these values are selected, it shows a default message.

Expected Output:

If P1_STATUS is 'Active':

Status: Active

The system is running smoothly.

If P1_STATUS is 'Inactive':

Status: Inactive

The system is currently inactive. Please contact support.

If P1_STATUS is 'Pending':

Status: Pending

The system status is pending. Please wait for further updates.

If P1_STATUS is any other value:

Status: Unknown

The status could not be determined.

Step 4: Example 3 - Customizing Output Based on a Session Variable

In this example, let’s use a session variable to customize content dynamically. You can create a condition that checks whether the session variable SESSION_STATUS is 'LOGGED_IN' or 'LOGGED_OUT' to display different messages.

Steps:

1. Set a session variable: Set the SESSION_STATUS session variable to 'LOGGED_IN' or 'LOGGED_OUT' based on the user’s login state.

2. Create a Static Content Region.

3. In the HTML Expression field, use the following template:

{case :SESSION_STATUS/}

    {when 'LOGGED_IN'/}

        <h2>Welcome Back!</h2>

        <p>You're logged in and ready to go.</p>

    {when 'LOGGED_OUT'/}

        <h2>Logged Out</h2>

        <p>You have been logged out. Please log in again to continue.</p>

    {otherwise/}

        <h2>Status Unknown</h2>

        <p>Your session status could not be determined. Please try again later.</p>

{endcase/}

• Explanation: This block evaluates the session variable SESSION_STATUS:

• If SESSION_STATUS is 'LOGGED_IN', it shows a welcome message.

• If SESSION_STATUS is 'LOGGED_OUT', it shows a message indicating the user is logged out.

• If neither condition is met, it shows a default "status unknown" message.

Expected Output:

• If SESSION_STATUS is 'LOGGED_IN':

• Welcome Back!

• You're logged in and ready to go.

• If SESSION_STATUS is 'LOGGED_OUT':

• Logged Out

• You have been logged out. Please log in again to continue.

• If SESSION_STATUS has any other value:

• Status Unknown

• Your session status could not be determined. Please try again later.

Step 5: Using Dynamic Content with CASE Directive in Regions

You can dynamically change the content of entire regions based on conditions. The CASE directive can be used to show or hide entire regions or provide different content within regions depending on the condition being evaluated.

For instance, you can conditionally show a region only for certain user types or based on a condition.

Example Code:

{case :USER_ROLE/}

    {when 'ADMIN'/}

        <h2>Admin Dashboard</h2>

        <p>You have full control over the application settings and users.</p>

    {when 'MANAGER'/}

        <h2>Manager Dashboard</h2>

        <p>You can manage your team's performance and reports.</p>

    {otherwise/}

        <h2>User Dashboard</h2>

        <p>Access basic application features.</p>

{endcase/}

Expected Output:

• If USER_ROLE is 'ADMIN':

• Admin Dashboard

• You have full control over the application settings and users.

• If USER_ROLE is 'MANAGER':

• Manager Dashboard

• You can manage your team's performance and reports.

• If USER_ROLE is anything else:

• User Dashboard

• Access basic application features.

By applying these techniques, you can provide a personalized experience to your users by displaying the right content based on various conditions, ensuring a more dynamic and interactive user interface.

 Key Takeaways:

• {case NAME/} begins the conditional block and evaluates the value of NAME.

• {when value/} is used to specify a condition and display content when the condition is met.

• {otherwise/} defines the default content when no conditions match.

{endcase/} closes the CASE block.

In conclusion, the APEX CASE directive with TEMPLATE_TEXT offers a streamlined and efficient way to embed conditional logic directly within templates. By using {case}, {when}, {otherwise}, and {endcase}, developers can create versatile, responsive user interfaces that adapt based on data values, all while keeping template code clean and maintainable. Leveraging this directive unlocks new possibilities for dynamic presentation in Oracle APEX applications, making it an essential tool for advanced customization.