How Do I Use Card Templates – Details and Options in Oracle APEX

In Oracle APEX, Card Templates provide a dynamic way to display data in a structured, visually appealing card format. When using the Details template option, you gain full control over the layout by customizing HTML and mapping values to substitution strings. Along with that, the Card Options offer additional flexibility to format the content, set interactivity, control visibility, and fine-tune how each card behaves and appears. Whether you're building an employee directory, product showcase, or a visual dashboard, understanding how to use Card Templates – Details and Options helps you deliver high-impact user interfaces efficiently.

How to Use Card Templates – Details and Options in Oracle APEX

To use Card Templates effectively with the Details template and configuration options, follow these steps:

1. Create or Select a Card Region

   • Open your APEX application.

   • Navigate to the desired page or create a new page.

   • Add a region and select Cards under the Reports section.

   • Choose a SQL query as the data source. Example:

     sql
     SELECT employee_id,
            full_name,
            job_title,
            department,
            status,
            hire_date,
            profile_picture_url
       FROM employees
     

2. Switch the Card Template Type to "Details"

   • In Page Designer, go to the Card Region.

   • Under the Appearance section, find Template Type and choose Details.

   • This enables the full layout control using substitution strings and HTML structure.

3. Customize the Details Template Using Substitution Strings

   • Use the following built-in substitution strings in your HTML:

     • #TITLE# – Main card title (e.g., full_name)

     • #SUB_TITLE# – Secondary text (e.g., job_title)

     • #MEDIA# – Image or icon (e.g., profile_picture_url)

     • #BADGE# – Tag or label (e.g., status)

     • #BODY# – Description (e.g., department and hire_date)

     • #ACTIONS# – Action buttons or links

   Example Custom Template HTML:

   html
   <div class="employee-card">
     <img src="#MEDIA#" alt="Profile" class="avatar">
     <div class="content">
       <h3>#TITLE#</h3>
       <h5>#SUB_TITLE#</h5>
       <p>#BODY#</p>
       <span class="badge">#BADGE#</span>
       <div class="card-actions">#ACTIONS#</div>
     </div>
   </div>
   

4. Configure Card Options

   • In Card Attributes, map the following fields:

     • Title → full_name

     • Subtitle → job_title

     • Media → profile_picture_url

     • Badge → status

     • Body → combine fields using SQL or create a derived column

     • Link → Link to a form or detail page using employee_id

   • Enable or disable options such as:

     • Lazy Loading – Useful for large datasets

     • Responsive Columns – Automatically adjust card layout for screen size

     • Actions – Add buttons (e.g., Edit, View)

5. Add Styling with CSS

   • Use custom CSS in Inline CSS or Static Application Files to style your cards.

   • Example CSS:

     css
     .employee-card {
       border: 1px solid #ccc;
       border-radius: 8px;
       padding: 15px;
       background-color: #fdfdfd;
     }
     .avatar {
       width: 80px;
       height: 80px;
       border-radius: 50%;
     }
     .badge {
       background: #007bff;
       color: white;
       padding: 4px 8px;
       border-radius: 4px;
     }
     

Examples

Example 1: Employee Directory

• Card Title: Full Name

• Subtitle: Job Title

• Badge: Status (Active, On Leave, Terminated)

• Body: Department and Hire Date

• Action: Link to Edit Employee Page

Example 2: Product Listing

• Media: Product Image

• Title: Product Name

• Subtitle: Category

• Badge: “In Stock” or “Out of Stock”

• Body: Short Description

• Action: Add to Cart or View Details

Best Practices

• Keep HTML clean and semantic to ensure accessibility and mobile responsiveness.

• Use concise data mapping — don’t overload the card with too much content.

• Avoid hardcoded text — use dynamic SQL or APEX item references.

• Reuse templates where possible by creating shared templates in Shared Components.

• Preview your cards on different devices to verify the layout.

• Minimize custom code unless necessary — use declarative features first.

 

List Example:

Available Options

• Apply Theme Colors

• Display Subtitle

Style	Icons	Layout	Body Text	Icon Shape	Animation
Basic	No Icons	Stacked	Auto	Circle	Color Fill
Compact	Display Icons	2 Columns	2 Lines	Rounded Corners	Raise Card
Featured	Display Initials	3 Columns	3 Lines	Squares
Block		4 Columns	4 Lines
		5 Columns	Hidden
		Float
		Span Horizontally

The options

Style
Basic
Compact
Featured
Block

Icons
No Icons
Display Icons
Display Initials

Layout
Stacked
2 Columns
3 Columns
4 Columns
5 Columns
Float
Span Horizontally

Body Text
Auto
2 Lines
3 Lines
4 Lines
Hidden

Icon Shape
Circle
Rounded Corners
Squares

Animation
Color Fill (adds a light color to the card when selected)
Raise Card (slightly raises the card when selected)

 Region

Attributes:

Example 2: Cards Reports Templates

select

  id,

  project card_title,

  upper(substr(project,0,2)) card_initials,

  null card_text,

  null card_subtext,

  'fa-cloud' card_icon, 

  lower(created_by) created_by,

  created,

  lower(updated_by) updated_by,

  updated

from eba_UT_chart_projects

order by 2

Attributes

Oracle APEX Documentation

To explore Card Templates and their options in detail, visit the official Oracle APEX documentation:
https://docs.oracle.com/en/database/oracle/apex/
Search for "Card Region", "Card Template", and "Substitution Strings" to find the most relevant guides and examples.

Conclusion

Card Templates using the Details and Options in Oracle APEX give you precise control over how data is displayed, styled, and interacted with. By combining substitution strings with HTML and mapping card attributes correctly, you can create a highly customized and modern card-based layout for any application scenario. This approach not only improves visual appeal but also enhances usability, especially when presenting summaries, profiles, or actionable records. When used with best practices and careful planning, Card Templates become one of the most effective UI tools in Oracle APEX.