# Oracle APEX Plugin! Dashboard Cards!

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.

![](https://cdn.hashnode.com/res/hashnode/image/upload/v1698687273234/456e514d-eff1-46b6-9a20-f44be0c6544d.png align="center")

Let's add some colours

![](https://cdn.hashnode.com/res/hashnode/image/upload/v1698687411179/53fb6ff3-e23c-483a-bdee-1c0ec6140a98.png align="center")

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

![](https://cdn.hashnode.com/res/hashnode/image/upload/v1698687470872/c8e96c43-c38e-4e1b-a957-d28c1fccf8d9.png align="center")

Finally, a footer text and an action

![](https://cdn.hashnode.com/res/hashnode/image/upload/v1698687569889/177778d4-5df2-4dbf-8991-a12aa6eaf67c.png align="center")

## **Installation**

1. Download [**Dashboard Cards**](https://github.com/rodrigomesquitaorclapex/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**

```sql
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**

![Preview](https://github.com/rodrigomesquitaorclapex/dashboard-cards/raw/main/assets/configuration.jpg align="left")

## **Demo**

Clique [**here**](https://bit.ly/dashboard-cards) to see in action.