Oracle introduced APEX template components in version 23.1, providing a fantastic way to create custom templates. In this blog post, I'll demonstrate my very first template component plugin and walk you through the simple process of creating stylish cards.

This is the most basic version, featuring just a title and a body.

Let's add some colours

Looks better however, we can enhance its appearance by adding some icons.

Finally, a footer text and an action

Installation

1. Download Dashboard Cards

2. Import template_component_plugin_com_rodrigomesquita_dashboard_cards.sql file into your application.

Usage

1. Create a page item

2. Choose Dashboard Cards [Plugin] as a template component type

Sample Query

SELECT 1 id_pk,
        'New Members' as title,
        to_char((select count(*) from demo_customers)) as card_value,
        '50% INCREASE' as footer_text,
        '#40af73' as background_color,
        'fa-users' as card_icon,
        '#ffffff' as font_color,
        '2' as page_id
 FROM DUAL
union
 SELECT 2 id_pk,
       'Top Customers' as title,
       '7' as card_value,
       '20% INCREASE' as footer_text,
       '#317ac1' as background_color,
       'fa-badge-check' as card_icon,
       '#ffffff' as font_color,
        '9' as page_id
 FROM DUAL
 union
 SELECT 3 id_pk,
        'System Alerts' as title,
       '5' as card_value,
       '' as footer_text,
       '#d83f3f' as background_color,
       'fa-bell' as card_icon,
       '#ffffff' as font_color,
        '10' as page_id
 FROM DUAL
   union
 SELECT 4 id_pk, 
       'Products on Sale' as title,
       to_char((select count(*) from demo_product_info)) as card_value,
       '50% SALE!' as footer_text,
       '#c78e27' as background_color,
       'fa-badge-dollar' as card_icon,
       '#ffffff' as font_color,
        '6' as page_id
 FROM DUAL 
    union
 SELECT 5 id_pk, 
       'Today''s Orders' as title,
       to_char((select sum(order_total) from demo_orders),'FML999G999G999G999G990D00') as card_value,
       '' as footer_text,
       '#c78e27' as background_color,
       'fa-shopping-cart' as card_icon,
       '#ffffff' as font_color,
        '4' as page_id
 FROM DUAL

Configuration

Demo

Clique here to see in action.