LIÇÃO 29Componentes Reutilizáveis

Um componente com propriedades personalizáveis

Um único componente cmpHeader gera os dois cabeçalhos. As propriedades PropTitulo e PropIcone são configuradas em cada instância — o design e o comportamento ficam centralizados no componente.

Passo a passo

1. Crie um componente de cabeçalho

   → Painel esquerdo → Components → + New component
   → Renomeie para: cmpHeader
   → Ajuste o tamanho: Width = App.Width, Height = 60

   Components vs. Screens: Componentes não são telas — são grupos de elementos que você insere dentro de telas. O painel de componentes fica na mesma barra lateral das telas, mas em uma seção separada.
2. Adicione propriedades de entrada ao componente

   → Com cmpHeader selecionado → + New custom property no painel direito

   Propriedade 1:
   Name: PropTitulo · Type: Input · Data type: Text · Default: "Título"
   
   Propriedade 2:
   Name: PropIcone · Type: Input · Data type: Text · Default: "📋"
   
   Propriedade 3:
   Name: PropMostrarVoltar · Type: Input · Data type: Boolean · Default: false
3. Construa o visual do componente usando as propriedades

   Dentro do cmpHeader, adicione os elementos usando as propriedades como dados:

   Rectangle (fundo): Fill = RGBA(15,23,41,1) · Width = Parent.Width · Height = Parent.Height
   
   Label (ícone): Text = cmpHeader.PropIcone
   
   Label (título): Text = cmpHeader.PropTitulo
   
   Icon (voltar): Icon = Icon.ChevronLeft
   Visible = cmpHeader.PropMostrarVoltar
   OnSelect = Back()

   Referência ao componente dentro dele mesmo: Dentro do componente, as propriedades são acessadas com o prefixo do nome do componente: cmpHeader.PropTitulo. Fora do componente (quando você usa a instância em uma tela), você configura cada propriedade no painel direito.
4. Use o componente nas telas

   → Vá para a ListaScreen
   → Painel esquerdo → Components → arraste cmpHeader para a tela
   → Posicione no topo (Y=0, X=0, Width=App.Width)

   Com a instância selecionada, configure no painel direito:

   PropTitulo: "Meus Casos"
   PropIcone: "📋"
   PropMostrarVoltar: false

   Na DetalheScreen, adicione outra instância com:

   PropTitulo: "Detalhe do Caso"
   PropIcone: "←"
   PropMostrarVoltar: true

   Mudança global: Se você alterar a cor de fundo do cmpHeader, ambas as instâncias — em todas as telas — atualizam automaticamente. É o poder dos componentes: manutenção centralizada.
5. Crie uma Component Library para compartilhar entre apps

   → make.powerapps.com → + Create → Component library
   → Name: Biblioteca Suporte Técnico

   Mova o cmpHeader para a biblioteca: no app original, selecione o componente → Export as component library item. Na biblioteca, importe-o.

   Para usar em outro app:
   → No novo app → Insert → Get more components
   → Selecione a biblioteca Biblioteca Suporte Técnico
   → Importe o cmpHeader

   Component Library vs. componente local: Componentes locais existem só no app atual. A Component Library é publicada no ambiente e pode ser importada por qualquer app. Use Library quando tiver 2+ apps que compartilham os mesmos componentes.
6. Adicione uma propriedade de saída — evento OnAcao

   Componentes podem também emitir eventos de volta para a tela que os contém:

   Nova propriedade no cmpHeader:
   Name: OnAcaoPrincipal · Type: Output · Data type: Boolean

   No ícone de ação do componente:

   OnSelect do ícone de ação:
   cmpHeader.OnAcaoPrincipal()

   Na tela, na propriedade OnAcaoPrincipal da instância:

   Navigate(NovoCasoScreen, ScreenTransition.Cover)

   Agora o botão dentro do componente pode disparar navegações e lógica que vivem na tela — sem o componente precisar conhecer os detalhes do app.

Checklist

• Criou o componente cmpHeader com 3 propriedades de entrada
• Usou as propriedades dentro do componente com prefixo cmpHeader.PropX
• Instanciou o componente em duas telas com configurações diferentes
• Verificou que uma mudança no componente reflete em todas as instâncias
• Criou uma Component Library e entende quando usar library vs. local
• Adicionou uma propriedade de saída para eventos do componente

Temas e estilos — consistência visual em todo o app

O Power Apps tem um sistema de temas básico, mas para controle total de cores e tipografia, a abordagem mais robusta é criar um componente de tema — um componente que não tem visual próprio, mas expõe todas as cores e tamanhos do design como propriedades de saída.