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
Download Dashboard Cards
Import template_component_plugin_com_rodrigomesquita_dashboard_cards.sql file into your application.
Usage
Create a page item
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.