How Do I Use Card Regions in Oracle APEX

 Card Regions in Oracle APEX provide a modern, responsive, and highly customizable way to present data in a visual format. Unlike traditional reports or tabular layouts, Card Regions display each row of data as a separate "card" — making it ideal for showcasing summaries, profiles, dashboards, and interactive galleries. Card Regions support declarative design features such as media (icons/images), titles, subtitles, badges, and actions, allowing you to create a visually appealing and mobile-friendly user interface with minimal effort.

How to Use Card Regions in Oracle APEX

To use a Card Region in Oracle APEX, follow these steps:

1. Create a Page or Add a Card Region to an Existing Page

   • From the APEX App Builder, either create a new page or open an existing one.

   • Click + Region and choose Cards under the Reports category.

2. Set Up the Data Source

   • The Card Region needs a SQL Query or Web Source as its data source.

   • Example SQL Query:

     SELECT id,
            name AS title,
            job_title AS subtitle,
            department,
            salary,
            hire_date,
            photo_url AS media
       FROM employees
     

   • You can select this query as the source in the region’s Source property.

3. Configure the Card Attributes

   • Under Layout > Card, map the following attributes:

     • Title: Primary label for each card (e.g., name)

     • Subtitle: Secondary label (e.g., job_title)

     • Media: Image URL or icon (e.g., photo_url)

     • Badge: Small label with color, ideal for statuses or categories

     • Body: Short description or custom text

     • Actions: Enable links, buttons, or menus per card

4. Add Interactivity

   • Enable features such as:

     • Link: Navigate to a detailed page (e.g., Edit Employee page)

     • Client-side filtering: Add search and filters to cards

     • Pagination or Lazy Loading for large data sets

5. Customize Appearance

   • Use CSS classes or templates for additional styling

   • Adjust card size (small, medium, large) based on layout preferences

   • Enable Grid or Masonry layout under Display Options

Example Use Case

Employee Directory Page

• SQL Query returns employee names, titles, photos, and departments

• Card Title: Employee Name

• Subtitle: Job Title

• Media: Employee photo

• Badge: Department name

• Action: Link to Edit Page with employee ID passed as a parameter

• Layout: 3 cards per row, responsive for mobile

Product Catalog Page

• SQL shows product image, name, price, and availability

• Badge: “In Stock”, “Out of Stock” with color coding

• Link: Opens product details

Best Practices

• Keep content focused and minimal
  Avoid overcrowding the card with too much data. Use concise labels and avoid overly long text.

• Use images or icons purposefully
  Only show images when they add meaning (e.g., profile photo, product image). If not available, use icons as fallbacks.

• Use badges for quick visual cues
  Status indicators, tags, or categories work well as color-coded badges.

• Enable filtering or search
  Improve user experience by enabling client-side filters, especially with many cards.

• Test on different screen sizes
  Ensure your card layout is responsive and doesn’t break on mobile or tablet devices.

• Use declarative features first
  Avoid custom code unless needed. APEX provides most visual and behavioral options out-of-the-box.

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

You can find more about Card Regions in the official Oracle APEX documentation:
https://docs.oracle.com/en/database/oracle/apex/
Search for “Card Region” to locate relevant examples and attributes.

Conclusion

Card Regions in Oracle APEX offer a visually rich and flexible way to present individual records with clarity and style. Whether you’re building an employee directory, a product catalog, or a dashboard summary, Card Regions help make your application more modern and engaging. With built-in declarative support for media, badges, and links, you can implement powerful user interfaces quickly and effectively. By following best practices and leveraging the customization options available, you can ensure that your application is both functional and visually appealing.