Cartões de Dashboard com Plug-in Oracle APEX

 

A Oracle introduziu componentes de modelo APEX na versão 23.1, fornecendo uma maneira fantástica de criar modelos personalizados. Nesta postagem do blog, demonstrarei meu primeiro plugin de componente de modelo e orientarei você no processo simples de criação de cartões elegantes.

Esta é a versão mais básica, apresentando apenas um título e um corpo.

Vamos adicionar algumas cores

Parece melhor, no entanto, podemos melhorar sua aparência adicionando alguns ícones.

Finalmente, um texto de rodapé e uma ação

Instalação

1. Baixar cartões do painel
2. Importe o arquivo: "template_component_plugin_com_rodrigomesquita_dashboard_cards.sql" para sua aplicação.

Uso

1. Crie um item de página
2. Escolha Dashboard Cards [Plugin] como tipo de componente de modelo

Consulta de amostra

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

Configuração

Demonstração

Clique aqui para ver em ação.

Fonte: Rodrigo Mesquita | APEX BLOG