How Do I Use Card Templates in Oracle APEX

Card Templates in Oracle APEX provide a powerful and flexible way to control the visual layout and formatting of individual cards within a Card Region. While Card Regions define how data is presented in card-style formats, Card Templates let developers fine-tune the appearance of each card, using HTML and substitution strings. This feature is ideal when you need more control over the layout, want to apply advanced formatting, or display multiple custom elements within each card.

How to Use Card Templates in Oracle APEX

Card Templates are created and managed through Shared Components and applied directly to Card Regions. Here's how to set them up:

1. Access Card Templates

   • Open your APEX application in App Builder.

   • Click Shared Components.

   • Under User Interface, click Templates.

   • Click Create and choose Region as the Template Type.

   • Select Cards as the template category.

   • Name your template, for example, “Custom Product Card”.

2. Define the Template HTML

   • In the Template section, use HTML with APEX substitution strings to control layout.

   • Common substitution strings include:

     • #TITLE# – Main title of the card

     • #SUB_TITLE# – Subtitle or secondary info

     • #MEDIA# – Image or icon URL

     • #BADGE# – Visual badge (e.g., status or category)

     • #BODY# – Main content or description

     • #ACTIONS# – Card-level buttons or links

   Example Custom HTML:

   <div class="custom-card">
     <img src="#MEDIA#" alt="Card Image" class="card-image"/>
     <div class="card-content">
       <h3>#TITLE#</h3>
       <h5>#SUB_TITLE#</h5>
       <p>#BODY#</p>
       <span class="badge">#BADGE#</span>
       <div class="actions">#ACTIONS#</div>
     </div>
   </div>
   

3. Apply the Card Template to a Card Region

   • Go to the Page Designer where your Card Region is.

   • In the Card Region settings, locate the Template property.

   • Select the custom template you just created.

   • Map your columns to substitution strings in the Card Attributes section.

4. Customize with CSS (Optional)

   • Use Inline CSS or reference a static CSS file to style .custom-card, .badge, .card-image, and other classes.

   • Apply responsive design if needed by using APEX grid classes or media queries.

Examples

Employee Profile Card Template

• Uses #MEDIA# for profile picture

• #TITLE# = Full Name

• #SUB_TITLE# = Job Title

• #BADGE# = Department

• #BODY# = Contact Info

• #ACTIONS# = View or Edit links

Product Card Template

• #MEDIA# = Product image

• #TITLE# = Product name

• #SUB_TITLE# = Price

• #BODY# = Product description

• #BADGE# = Availability status

• #ACTIONS# = Add to Cart button

Best Practices

• Use semantic HTML for accessibility and screen reader support

• Keep templates modular by breaking layout into clean sections like media, content, and actions

• Avoid inline styles when possible; use class-based styling for easier maintenance

• Use conditionals or computed columns in your SQL if you need to dynamically control content visibility

• Test across devices to ensure responsiveness, especially if your cards include images or actions

Card regions are used for displaying information in small blocks. They can display text, icons, images, and initials, Just like other reports they have customizable attributes such as:

Data

• Title

• Subtitle

• Card body text

• Secondary card body text

UI Attributes

• Card Icon

• Card badge

• Card Image

In addition, card regions can also have buttons and pagination added to complete the package.

The card information is generally displayed via a query that identifies the attributes to be used. Here is a generalized example query:

select

  -- data

  card_primary_key,    -- primary key

  card_secondary_key,  -- secondary key if needed

  card_title,          -- title

  card_subtitle,       -- subtitle

  card_body,           -- card body text

  card_secondary_body, -- card secondary text, positioned near bottom

  -- ui and other attributes

  card_icon,           -- icon class, e.g. fa-cloud

  card_badge,          -- badge, can be a small text

  card_image           -- image url, url or blob columns

from dual

Example 1: Using all attributes

Region 

Example 2: Cards with Background

Region 

select id,

       category,

       title,

       subtitle,

       substr(body,1,100)||'...' as agenda,

       secondary_body as speakers,

       icon_class,

       badge,

       '#APP_FILES#' || image_url as image,

       to_char(start_date, 'fmDDfm Month YYYY fmHHfm:MI PM') || ' - ' || to_char(end_date, 'fmHHfm:MI PM') as event_date

  from eba_ut_demo_cards

 where category = 'conference'

   and id >= 4

Attribute Settings:

Output

Example 3: Cards with Badges

select id,

       category,

       title,

       subtitle,

       body,

       secondary_body,

       icon_class,

       'badge' badge,

       '#APP_FILES#' || image_url as image,

       to_char(start_date, 'fmDDfm Month YYYY fmHHfm:MI PM') as start_date,

       to_char(end_date, 'fmHHfm:MI PM') as end_date

  from eba_ut_demo_cards

 where category = 'badge';

Attributes

Example:

Example 4: Cards Using Image First

select id,

       category,

       title,

       subtitle,

       substr(body,1,100)||'...' as agenda,

       secondary_body as speakers,

       icon_class,

       badge,

       '#APP_FILES#' || image_url as image,

       to_char(start_date, 'fmDDfm Month YYYY fmHHfm:MI PM') as start_date,

       to_char(end_date, 'fmHHfm:MI PM') as end_date

  from eba_ut_demo_cards

 where category = 'workshop'

   and id < 10

Attribute

Example 5: Grid Card Layout

select id,

       category,

       title,

       subtitle,

       substr(body,1,100)||'...' as agenda,

       secondary_body as speakers,

       icon_class,

       badge,

       '#APP_FILES#' || image_url as image,

       to_char(start_date, 'fmDDfm Month YYYY fmHHfm:MI PM') as start_date,

       to_char(end_date, 'fmHHfm:MI PM') as end_date

  from eba_ut_demo_cards

 where category = 'workshop'

   and id >= 9

Attribute:

Oracle APEX Documentation

For official reference and examples, visit the Oracle APEX documentation:
https://docs.oracle.com/en/database/oracle/apex/
Search for “Card Templates” or review the “Templates” and “Card Regions” sections.

Conclusion

Card Templates in Oracle APEX allow you to create fully customized layouts for your card-based UI components. By leveraging substitution strings, HTML, and CSS, you can design intuitive, responsive, and visually rich interfaces tailored to your application's needs. Whether you're building an employee directory, a product catalog, or a dashboard with actionable insights, Card Templates give you the flexibility to present data exactly how you want. By combining declarative APEX features with smart template design, you can achieve both beauty and functionality with ease.