Botões de
navegação em Power Apps utilizam a função Navigate combinada com atualização de variáveis globais para
transportar o usuário entre telas, preservando o contexto de onde ele veio e
para onde está indo. A propriedade OnSelect de cada botão concentra tanto a ação de navegação quanto a
atualização do estado do sistema, enquanto a propriedade DisplayMode, condicionada por fórmulas, determina se aquele botão está
disponível para interação ou bloqueado, refletindo visualmente em qual tela o
usuário se encontra no momento.
Pré-requisito: você precisa ter concluído o tutorial de variáveis, com a
pirâmide varGlobal_Atividade, varGlobal_Acao e varGlobal_Tarefa já compreendida em nível conceitual, e o ícone e os três
botões já inseridos, ainda sem configuração, dentro do Painel_NavegacaoCad.
Variáveis: A Inteligência do Sistema
📌 Guia de Navegação
1. Configurando os Botões de Navegação
O que Você Vai Aprender Neste Tutorial
Você vai
aprender o que é uma fórmula em Power Fx e como ela se diferencia de uma
função, vai conhecer a função Navigate e as propriedades DisplayMode e OnSelect em profundidade, e vai configurar por completo o ícone e os
três botões do Painel_NavegacaoCad: IconMenuInicial_Cad, BtCadastros_Cad, BtCatalogo_Cad e BtAlocacao_Cad.
Por que Este Tutorial é Importante e sua Conexão com o Anterior
No tutorial
anterior você aprendeu o conceito de variáveis globais e a pirâmide Atividade
→ Ação → Tarefa, mas ainda em nível teórico, sem
uma fórmula real amarrada a um controle. Este tutorial é o primeiro em que essa
pirâmide ganha vida de verdade: cada botão que você vai configurar aqui
atualiza as três variáveis simultaneamente, e é justamente essa atualização que
vai orientar o restante do sistema — os rótulos informativos, os painéis
condicionais, tudo o que ainda vamos construir.
2. Fórmulas, Funções e Mudança de Estado dos Botões
Antes de
escrever qualquer código, vale separar dois conceitos que costumam se
confundir: fórmula e função.
Uma fórmula,
em Power Fx, é qualquer expressão que calcula um resultado — pode ser um
número, um texto, uma cor, uma ação inteira. Uma fórmula é composta pela
combinação de três elementos: funções (ações pré-definidas pela própria
plataforma, como Navigate, Set
ou If), operadores (símbolos que
somam, comparam ou concatenam valores, como +, =,
&) e referências (apontamentos
para dados, controles ou propriedades já existentes, como Self.Fill ou varGlobal_Atividade).
Uma função,
por sua vez, é apenas uma das peças dentro dessa fórmula — um bloco de ação
pronto, que você invoca pelo nome, seguido de parênteses contendo seus
argumentos. Navigate(Tela_Cadastros;
ScreenTransition.None) é uma função sendo usada dentro de
uma fórmula; a fórmula completa de um OnSelect, como você vai ver a seguir, normalmente encadeia várias
funções diferentes, uma atrás da outra.
Essa
distinção importa porque, ao ler um código como o que vamos configurar agora,
você não está lendo "uma função" — está lendo uma fórmula inteira,
montada com múltiplas funções (Navigate, Set),
conectadas por operadores de sequência (;;), e referenciando variáveis já conhecidas.
Mudança de Estado: Uma Regra de Usabilidade do Sistema
Além do
conceito geral de fórmula, existe uma regra de usabilidade específica deste
sistema que rege a aparência dos botões de navegação: eles têm o fundo
transparente durante a edição — ou seja, quando estão disponíveis para toque —
e assumem a cor do painel principal correspondente quando pressionados, momento
em que também ficam desativados.
Essa regra
não é estética por acaso: ela cria um indicador visual de "você está
aqui" sem precisar de nenhum texto adicional. Quando o usuário toca em
"Catálogo", o botão perde a transparência e assume o verde de
identidade do Catálogo, ao mesmo tempo em que se torna intocável — porque não
faz sentido navegar para onde você já está.
3. Escrevendo o Código dos Botões de Navegaçãoa
Agora vamos configurar, um a um, os quatro controles
que fazem parte do Painel_NavegacaoCad.
Configurando os controles do Painel de Navegação
Antes de escrever qualquer código, localize na Árvore
do Aplicativo o controle que será configurado. Em seguida, confirme se ele
realmente está selecionado. Esse cuidado é importante, pois um código inserido
no controle errado pode causar comportamentos inesperados e dificultar a
identificação do problema.
Depois de selecionar o controle correto, observe
atentamente qual propriedade será configurada. Somente então copie ou
digite o código apresentado.
Atenção: Antes de confirmar qualquer
alteração, verifique sempre duas coisas:
- Se o controle selecionado é realmente o indicado na explicação.
- Se a propriedade exibida é exatamente a que será configurada.
- Painel de
Propriedades:
localizado à direita da tela, com suas respectivas abas. Selecione a
propriedade desejada e faça a alteração.
- Lista de
Propriedades:
localizada na parte superior da tela, ao lado da barra de fórmulas. Clique na
caixa de combinação, escolha a propriedade desejada e, em seguida, digite ou
cole o código na barra de fórmulas.
Ao longo deste curso utilizaremos, na maioria das
vezes, a lista de propriedades da barra superior, pois ela permite
localizar rapidamente qualquer propriedade do controle. Entretanto, você pode
utilizar o método com o qual se sentir mais confortável.
IconMenuInicial_Cad
Icon_MenuInicial_Cad:
Control: Classic/Icon@2.5.0
Properties:
BorderColor (Cor da Borda): RGBA(0; 18; 107; 1)
BorderThickness (Espessura da Borda): 2
Color (Cor): RGBA(30; 14; 91; 1)
DisabledBorderColor (Cor da Borda Desabilitado): RGBA(0; 13; 75; 1)
DisabledColor (Cor Desabilitado): RGBA(0; 13; 75; 1)
DisabledFill (Preenchimento Desabilitado): RGBA(255; 255; 255; 1)
DisplayMode (Modo de Exibição):
HoverColor (Cor ao Passar o Mouse): RGBA(255; 191; 0; 1)
Icon (Ícone): Icon.Home
LayoutMinHeight (Altura Mínima do Layout): 60
LayoutMinWidth (Largura Mínima do Layout): 60
OnSelect (Ao Selecionar):
Set(varGlobal_Atividade;"Tela Inicial");;
PaddingLeft/PaddingRight (Preenchimento
Esquerdo/Direito): 5
Tooltip (Dica de Ferramenta):
"Menu"
Width (Largura): 50
X: 39
Y: 29
BtCadastros_Cad
Tooltip (Dica de Ferramenta): "Menu"
Width (Largura): 50
X: 39
Y: 29
BtCadastros_Cad:
Control: Classic/Button@2.2.0
Properties:
BorderColor (Cor da Borda): RGBA(30; 14; 91; 1)
Color (Cor): RGBA(30; 14; 91; 1)
DisabledBorderColor (Cor da Borda Desabilitado): RGBA(30; 14; 91; 1)
DisabledColor (Cor Desabilitado): RGBA(30; 14; 91; 1)
DisabledFill (Preenchimento Desabilitado): RGBA(232; 247; 255; 1)
DisplayMode (Modo de Exibição):
Font (Fonte): Font.'Open Sans'
Height (Altura): 50
HoverBorderColor (Cor da Borda ao Passar o Mouse): ColorFade(Self.BorderColor; 20%)
HoverColor (Cor ao Passar o Mouse): RGBA(255; 255; 0; 1)
HoverFill (Preenchimento ao Passar o Mouse): ColorFade(RGBA(56; 96; 178; 1); -10%)
LayoutMinWidth (Largura Mínima do Layout): 150
RadiusBottomLeft/BottomRight/TopLeft/TopRight (Raio dos Cantos): 0
Size (Tamanho): 13
Text (Texto): "Cadastros"
Tooltip (Dica de Ferramenta): "Cadastros"
Width (Largura): 140
X: 12
Y: 70
BtCatalogo_Cad
BtCatalogo_Cad:
Control: Classic/Button@2.2.0
Properties:
DisplayMode (Modo de Exibição):
OnSelect (Ao Selecionar):
Tooltip (Dica de Ferramenta): "Catálogo"
(demais propriedades idênticas ao BtCadastros_Cad)
BtAlocacao_Cad
BtAlocacao_Cad:
Control: Classic/Button@2.2.0
Properties:
DisplayMode (Modo de Exibição):
Fill (Preencher): RGBA(0; 0; 0; 0)
OnSelect (Ao Selecionar):
Tooltip (Dica de Ferramenta): "Alocação"
(demais propriedades idênticas ao BtCadastros_Cad)
4. Argumento por Argumento: A Lógica por Trás do OnSelect e do DisplayMode
Vamos abrir
a fórmula mais completa — a do IconMenuInicial_Cad — argumento por argumento, porque a estrutura lógica se
repete, com pequenas variações de contexto, nos três botões seguintes.
O OnSelect: Quatro Ações em Sequência
Set(varGlobal_Atividade;
"Tela Inicial");;
Set(varGlobal_Acao;
"Selecione uma Ação no Menu");;
Set(varGlobal_Tarefa;
"Opções");;
Navigate(Tela_Inicial;
ScreenTransition.None)
As três
primeiras linhas atualizam, em sequência, a pirâmide inteira de variáveis
globais que você aprendeu no tutorial anterior. varGlobal_Atividade recebe "Tela
Inicial" — o nível macro, informando em que
área geral do sistema o usuário está agora. varGlobal_Acao recebe "Selecione uma
Ação no Menu" — o nível intermediário, orientando
o próximo passo. varGlobal_Tarefa recebe "Opções" — o nível mais específico, indicando a micro-etapa atual.
A quarta
linha, Navigate(Tela_Inicial;
ScreenTransition.None), é a função responsável pela troca
de tela propriamente dita. Ela recebe dois argumentos: o primeiro é o nome
exato da tela de destino — aqui, Tela_Inicial — e o segundo é o tipo de transição visual entre uma tela e
outra. ScreenTransition.None significa uma troca instantânea, sem nenhum efeito de
esmaecimento ou deslizamento.
Repare que a
ordem importa: as variáveis são atualizadas antes da navegação
acontecer. Isso garante que, no exato instante em que a Tela_Inicial aparece na
frente do usuário, o resto do sistema já sabe que a atividade mudou — nenhum
rótulo ou painel condicional vai mostrar informação desatualizada, nem que seja
por uma fração de segundo.
O DisplayMode: Uma Condição, Dois Resultados Possíveis
DisplayMode:
If(varGlobal_Atividade = "Tela Inicial"; DisplayMode.Disabled;
DisplayMode.Edit)
A função If aqui recebe três argumentos: uma condição (varGlobal_Atividade
= "Tela Inicial"), o
resultado a aplicar se essa condição for verdadeira (DisplayMode.Disabled), e o resultado a aplicar se for falsa (DisplayMode.Edit). Traduzindo: se a atividade atual já for "Tela
Inicial", o ícone trava, impedindo o toque — porque não faz sentido
navegar para onde o usuário já está. Em qualquer outra atividade, o ícone
permanece clicável.
Os Três Botões Seguintes: Mesma Lógica, Contexto Diferente
BtCadastros_Cad, BtCatalogo_Cad e BtAlocacao_Cad seguem exatamente essa mesma arquitetura de OnSelect e DisplayMode — a única coisa que muda, de um botão para o outro, é o
contexto: qual tela é o destino de Navigate, qual texto cada variável da pirâmide recebe, e qual valor
de varGlobal_Atividade
cada DisplayMode testa.
Vale destacar uma variação importante no BtCatalogo_Cad: seu DisplayMode testa duas condições com o operador || — varGlobal_Atividade = "Catálogo de Bens" || varGlobal_Atividade = "Movimentação de Bens". Isso significa que o botão trava tanto quando o usuário está vendo o Catálogo quanto quando está vendo as Movimentações de Bens, já que essas duas atividades compartilham a mesma origem de navegação.
5. O que Você Aprendeu e os Cuidados para Não Errar
Você
aprendeu a diferença entre fórmula e função em Power Fx, entendeu a regra de
usabilidade que rege a mudança de estado visual dos botões de navegação, e
configurou por completo o ícone e os três botões do Painel_NavegacaoCad, entendendo, argumento por argumento, como OnSelect atualiza a pirâmide de variáveis antes de navegar, e como DisplayMode decide, com uma única condição If, se cada controle está disponível ou travado.
Atenção Técnica
Sempre
atualize as variáveis globais antes de chamar Navigate dentro do mesmo OnSelect. Se a ordem for invertida, a tela de destino pode aparecer
antes que o resto do sistema saiba da mudança de atividade, gerando uma fração
de segundo de informação desatualizada em rótulos e painéis condicionais.
Erro
Comum
O erro mais
comum ao configurar vários botões de navegação seguidos é esquecer de trocar o
valor testado no DisplayMode de cada um — copiar a fórmula de um botão para o outro sem
atualizar a condição faz com que dois botões diferentes travem na mesma
situação, ou que nenhum deles trave quando deveria.
O Que Vem a Seguir
No próximo
tutorial vamos aprender a clonar painéis inteiros e colar em cada tela na qual
precisamos deles, e também a renomear corretamente cada controle clonado, para
finalmente ver os botões de navegação em funcionamento.
Nenhum comentário:
Postar um comentário