A clonagem
de containers no Power Apps preserva toda a estrutura interna do controle
original — propriedades, fórmulas e controles filhos — permitindo replicar um
conjunto inteiro de painéis entre diferentes telas de um mesmo aplicativo sem
reconstrução manual. Esse recurso é especialmente relevante em arquiteturas de
layout compartilhado, onde múltiplas telas mantêm a mesma estrutura visual e
navegacional, exigindo apenas ajustes pontuais de nomenclatura para preservar a
rastreabilidade de cada controle dentro da árvore do aplicativo.
Pré-requisito: você precisa ter concluído o tutorial anterior, com o IconMenuInicial_Cad, o BtCadastros_Cad, o BtCatalogo_Cad e o BtAlocacao_Cad totalmente configurados dentro do Painel_NavegacaoCad, incluindo as fórmulas de OnSelect e DisplayMode.
Botões e Ícones: Controles de Navegação e de Ação
Variáveis: A Inteligência do Sistema
Configurando os Botões de Navegação
📌 Guia de Navegação
1. Clonando Painéis e Testando a Navegação entre as Quatro Telas
Você vai
aprender a selecionar múltiplos containers de uma vez, copiar esse conjunto
inteiro e colar em outras telas, preservando toda a estrutura e as fórmulas
internas já configuradas. Vai aprender o cuidado essencial de renomear cada
controle clonado com o sufixo correto da nova tela, e vai finalmente testar o
aplicativo em modo de visualização, vendo a navegação acontecer entre as quatro
telas do sistema.
Por que Este Tutorial é Importante e sua Conexão com o Anterior
Até agora,
toda a configuração de navegação que você construiu existe apenas dentro da
Tela_Cadastros. As outras três telas — Inicial, Catálogo e Alocação — continuam
vazias, sem nenhum painel de navegação, sem nenhum botão funcional. Este
tutorial fecha esse ciclo: é aqui que o mesmo conjunto de painéis, já testado e
funcionando numa única tela, se espalha para as quatro, e você finalmente vê,
pela primeira vez, o sistema de navegação inteiro em ação.
2. Por que Clonar em Vez de Reconstruir Cada Painel
Você já
sentiu, ao longo dos últimos tutoriais, o tanto de detalhe que existe em
configurar um único painel: cores, posições, fórmulas de DisplayMode, cadeias de Set dentro do OnSelect. Repetir esse processo inteiro, do zero, para mais três
telas seria não só cansativo — seria arriscado. Copiar valor por valor
manualmente, propriedade por propriedade, é a receita perfeita para um erro de
digitação silencioso, exatamente do tipo que você já viu discutido em tutoriais
anteriores deste curso: um erro que não trava o aplicativo, só entrega um
resultado sutilmente errado.
Clonar o
conjunto inteiro de painéis resolve isso pela raiz: você garante que a
estrutura visual e a lógica de navegação cheguem idênticas em todas as telas, e
sua única responsabilidade, depois de colar, é ajustar exatamente o que precisa
mudar — no caso, os nomes dos controles.
Copiando os Três Painéis e Colando nas Demais Telas
Preparando o Terreno: as Telas de Destino Precisam Estar Vazias
Antes de
qualquer coisa, confirme que a Tela_Inicial, a Tela_Catalogo e a Tela_Alocacao
estão completamente vazias, sem nenhum container ou controle dentro delas. Isso
importa por um motivo prático: ao colar um conjunto de containers numa tela, o
Power Apps posiciona esse conjunto de acordo com as coordenadas X e Y
originais dos próprios containers — e como o Painel_NavegacaoCad, o Painel_InformativoCad e a Area_TrabalhoCad já vêm com posições absolutas definidas, eles vão colar
exatamente nessas mesmas posições na tela nova.
Se já
existir algum controle na tela de destino, você corre dois riscos: os painéis
colados podem se sobrepor a esse controle já existente, escondendo-o ou sendo
escondidos por ele, e fica mais difícil visualizar com clareza a árvore
recém-formada para fazer a renomeação limpa que vamos fazer a seguir. Antes de
prosseguir, abra cada uma das três telas de destino e confirme, olhando a
árvore lateral, que elas não têm nenhum filho — devem aparecer como uma tela
solitária, sem nenhuma seta de expansão ao lado do nome.
Selecionando e Copiando os Três Painéis da Tela_Cadastros
Abra a Tela_Cadastros e vá até a árvore lateral. Clique sobre o Painel_NavegacaoCad para selecioná-lo — e aqui vem a parte nova: segure a tecla Ctrl (ou, se preferir manter a mão no mouse, mantenha pressionada a tecla Shift para seleção em intervalo) e clique também sobre o Painel_InformativoCad e sobre a Area_TrabalhoCad. Os três devem aparecer destacados ao mesmo tempo na árvore, indicando que estão todos selecionados juntos.
Com os três
selecionados, use Ctrl+C
para copiar. Essa combinação de teclado copia o conjunto inteiro, com toda a
estrutura interna de cada container — incluindo o IconMenuInicial_Cad, o BtCadastros_Cad, o BtCatalogo_Cad e o BtAlocacao_Cad, que vivem dentro do Painel_NavegacaoCad — e todas as propriedades e fórmulas já configuradas em
cada um deles.
Colando na Tela_Inicial, na Tela_Catalogo e na Tela_Alocacao
Navegue até
a Tela_Inicial dentro do próprio Studio — clique sobre ela na árvore lateral
para abri-la na área de edição central. Com a Tela_Inicial selecionada, e não
nenhum controle dentro dela, use Ctrl+V para colar. Os três painéis vão aparecer de uma só vez,
exatamente nas mesmas posições e com as mesmas configurações visuais que tinham
na Tela_Cadastros — inclusive os botões e o ícone dentro do painel de
navegação, com suas fórmulas de OnSelect intactas.
Repita
exatamente o mesmo processo para a Tela_Catalogo e para a Tela_Alocacao: volte
até a Tela_Cadastros, copie de novo por segurança, navegue até a tela de
destino, confirme que ela está vazia, e cole com Ctrl+V.
Neste ponto,
as quatro telas do sistema têm a mesma estrutura de navegação — só falta
corrigir os nomes.
3. Copiando os Três Painéis e Colando nas Demais Telas
Esta é a
etapa mais delicada do tutorial, e onde mais se perde tempo se não for feita
com método. Vamos abrir a Tela_Inicial primeiro.
Na árvore
lateral, você vai encontrar o Painel_NavegacaoCad, o Painel_InformativoCad e a Area_TrabalhoCad — todos ainda com o sufixo Cad, porque o Power Apps não renomeia nada sozinho ao colar,
ele só duplica exatamente como estava. Clique em cada um, use o mesmo processo
de sempre (duplo clique no nome, ou botão direito → Renomear) e troque o sufixo
Cad pelo sufixo correspondente da nova
tela.
Para a
Tela_Inicial: Painel_NavegacaoIni, Painel_InformativoIni, Area_TrabalhoIni.
Para a
Tela_Catalogo: Painel_NavegacaoCat, Painel_InformativoCat, Area_TrabalhoCat.
Para a
Tela_Alocacao: Painel_NavegacaoAloc, Painel_InformativoAloc, Area_TrabalhoAloc.
Depois,
expanda cada painel de navegação renomeado e renomeie também os quatro filhos
dele: o ícone e os três botões, trocando o sufixo _Cad pelo sufixo correspondente em cada nome — IconMenuInicial_Ini, BtCadastros_Ini, BtCatalogo_Ini, BtAlocacao_Ini, e assim sucessivamente para Catálogo e Alocação.
Por que Renomear é Obrigatório e Não Só Estético
Vale reforçar por que esse passo de renomeação não pode ser pulado, mesmo que o aplicativo "funcione" sem ele. Se você deixasse o IconMenuInicial_Cad duplicado na Tela_Inicial com o mesmo nome que o original na Tela_Cadastros, o Power Apps automaticamente adicionaria um sufixo numérico, tipo IconMenuInicial_Cad_1, para evitar nomes duplicados dentro do mesmo aplicativo. Só que esse nome automático não diz nada sobre onde aquele controle vive. Renomear com o sufixo correto é o que garante que, daqui a um mês, ao abrir a árvore de qualquer tela, você saiba instantaneamente, só pelo nome, exatamente onde está e para que serve cada controle, sem precisar clicar em cada um para descobrir.
4. Testando a Navegação em Funcionamento
Chegou o
momento de testar todo o trabalho realizado até aqui. Esses testes finais são
fundamentais para garantir que a navegação do aplicativo funcione exatamente
como foi planejada e que a experiência do usuário seja agradável e consistente.
Últimos Ajustes
Agora que
todas as telas possuem painéis de navegação idênticos, faça uma conferência
visual da posição de cada painel.
É comum que,
ao copiar e colar um painel em outra tela, ele fique alguns pixels acima,
abaixo ou deslocado lateralmente. Embora seja uma diferença pequena, ela pode
comprometer a sensação de continuidade durante a navegação.
A correção é
simples: volte ao tutorial de configuração e compare as posições dos painéis.
Como todos possuem exatamente o mesmo tamanho e a mesma localização, basta
ajustar aqueles que estiverem fora do alinhamento.
Manter todos
os painéis na mesma posição faz com que o usuário navegue entre as telas sem
perceber a troca. Essa foi uma decisão de projeto.
Você deve
ter percebido que não configuramos nenhuma animação ou transição entre as
telas. Isso foi intencional. O objetivo é que apenas o conteúdo seja alterado,
enquanto a interface permanece visualmente estável, proporcionando uma
navegação mais natural e profissional.
Para
facilitar os testes, adicione temporariamente um Rótulo (Label) em cada
tela e configure a propriedade Text com o nome da respectiva tela. Dessa
forma, sempre que navegar pelo aplicativo, você saberá exatamente em qual tela
está. Ao concluir os testes, esses rótulos poderão ser removidos.
Navegando entre as Telas
Agora chega
a parte mais gratificante: ver todo o sistema funcionando.
Inicie os
testes na Tela_Inicial. Observe que o IconMenuInicial_Ini já
deverá aparecer desabilitado, utilizando a cor escura que representa o estado
de botão bloqueado. Isso acontece porque a variável varGlobal_Atividade
foi definida como "Tela Inicial" no momento em que o
aplicativo foi aberto.
Agora clique
em BtCadastros_Ini. O aplicativo deverá navegar para a Tela_Cadastros.
Assim que a tela for carregada, o botão correspondente deverá aparecer
automaticamente desabilitado, utilizando a cor azul-clara definida para o
módulo de Cadastros.
Esse
comportamento comprova que a variável global está controlando toda a navegação
do aplicativo. Com apenas uma alteração em seu valor, todos os painéis são
atualizados automaticamente, sem a necessidade de programar cada tela
individualmente.
Continue
realizando os testes:
Clique
em BtCatalogo_Cad e confirme a navegação para Tela_Catalogo. O
botão correspondente deverá permanecer desabilitado, utilizando a cor
verde-clara definida para essa tela.
Em
seguida, clique em BtAlocacao_Cat e verifique a navegação para Tela_Alocacao,
observando se o botão correspondente também assume automaticamente a cor de
identidade dessa tela.
Repita esse
procedimento navegando entre todas as telas do aplicativo. Verifique se os
botões corretos permanecem desabilitados, se as cores são alteradas conforme
esperado e se todas as navegações ocorrem sem falhas.
Ao concluir os testes, pressione Esc no teclado ou clique no X, no canto superior da tela de visualização, para retornar ao modo de edição do Power Apps Studio.
5. O que Você Aprendeu e os Cuidados para Não Errar
Você
aprendeu a selecionar múltiplos containers de uma vez, copiar essa seleção
inteira e colar em outras telas, preservando toda a estrutura e as fórmulas
internas — e aprendeu que essa velocidade só é segura se, logo em seguida, você
renomear cuidadosamente cada controle clonado com o sufixo correto da nova
tela. Você também viu, pela primeira vez, o sistema de navegação e a pirâmide
de variáveis globais funcionando de ponta a ponta, entre as quatro telas do
sistema, no modo de visualização.
Atenção
Técnica
Sempre
renomeie os painéis-pai antes de renomear os controles filhos dentro deles.
Trabalhar de fora para dentro — painel primeiro, depois os filhos — deixa a
árvore mais fácil de acompanhar visualmente enquanto você faz a renomeação,
porque você não perde a referência de qual grupo já foi ajustado.
Erro
Comum
O erro mais
comum aqui é esquecer de renomear algum controle filho — geralmente o ícone ou
um dos botões — deixando ele com o sufixo antigo dentro de uma tela que já tem
outro sufixo. O resultado observável só aparece muito depois, quando você for
escrever uma fórmula referenciando aquele controle pelo nome esperado e o Power
Apps não encontrar nada com aquele nome na lista de sugestões — obrigando você
a voltar e caçar, controle por controle, qual ficou para trás na renomeação.
O Que Vem a Seguir
Com as quatro telas navegáveis, clonadas e visualmente
padronizadas, o próximo tutorial retorna à Tela_Cadastros. A partir dela, começaremos a construir a
área responsável pelos cadastros da classificação dos bens, reunindo os
componentes necessários para organizar categorias, subcategorias, tipos,
modelos e demais estruturas que darão base ao sistema.
Esse módulo ainda faz parte do curso básico de Power
Apps, mas já prepara a entrada no conteúdo intermediário. Começaremos com
painéis de cadastro mais simples, para consolidar a base, e avançaremos
gradualmente para estruturas mais completas, incluindo painéis mais elaborados,
filtros, cascatas e novos recursos importantes para ampliar a lógica do
sistema.
Nenhum comentário:
Postar um comentário