Conhecendo o Menu Lateral do Power Apps: Todas as Opções a seu Dispor.
Este post parte
do que você aprendeu nos dois anteriores. No Post 1 você conheceu os cincoelementos que formam qualquer aplicativo de tela. No Post 2 você dominou aBarra Superior — o painel de controle do topo. Agora você vai explorar o painel
que fica à sua esquerda. Se a Barra Superior é a mesa de controle do estúdio, o
Menu Lateral é o arquivo de projetos — tudo que existe no seu aplicativo está
organizado e acessível dali.
📌 Guia de Navegação
1. Objetivo: O Painel que Organiza Tudo que existe no Seu App
O que você vai aprender neste post
O Menu Lateral
do Power Apps Studio é uma estrutura de duas colunas verticais que fica
permanentemente à esquerda da tela de trabalho. A primeira coluna exibe os
ícones de acesso. A segunda coluna abre o conteúdo do item selecionado. Juntas,
essas duas colunas concentram sete recursos fundamentais: a Vista de Árvore, o
Inserir, os Dados, as Variáveis, o Procurar, um menu de contexto com
ferramentas avançadas e as Definições do aplicativo.
Neste post você
vai aprender o que cada um desses recursos faz, quando usar cada um e como eles
se relacionam com o desenvolvimento do sistema da Escola,.
Por que este post vem depois da Barra Superior
Na Barra
Superior você aprendeu a controlar o ciclo de vida do aplicativo — salvar,
publicar, testar. No Menu Lateral você vai aprender a navegar dentro do
aplicativo enquanto o constrói. São dois tipos de controle completamente
diferentes: a Barra Superior age sobre o app inteiro; o Menu Lateral age sobre
o que existe dentro dele. Entender essa distinção é o que vai fazer você se
mover pelo Studio com naturalidade, sem confundir onde está cada ferramenta.
2. Conceito: O Menu Lateral: Duas Colunas, Diversos Recursos
O Menu Lateral é
uma estrutura de duas colunas verticais que ocupa a faixa esquerda do Power
Apps Studio. A primeira coluna é estreita e exibe apenas ícones — um para cada
recurso disponível. A segunda coluna é mais larga e abre o conteúdo
correspondente ao ícone selecionado na primeira. Quando você clica em um ícone,
o painel da segunda coluna se abre com as opções daquele recurso. Quando você
clica no mesmo ícone novamente, o painel fecha e a tela de trabalho ganha mais
espaço.
Esse
comportamento de abrir e fechar é intencional: o Studio prioriza o espaço da
tela de trabalho, que é onde você constrói. O Menu Lateral existe para ser
consultado quando necessário — não para ficar permanentemente aberto.
Vamos percorrer cada um dos sete recursos do alto ao baixo.
3. Prática: Entendendo o que cada Item representa
O que é a Vista de Árvore e como ela funciona
A Vista de
Árvore é o primeiro recurso do Menu Lateral e o que você vai usar com mais
frequência. Pense nela como o índice de um livro: tudo que existe no seu
aplicativo — cada tela, cada componente dentro de cada tela, cada grupo e cada
container — está listado ali, em ordem hierárquica, do maior para o menor.
Quando você
clica no ícone da Vista de Árvore, o painel da segunda coluna se abre e exibe
duas abas: Ecrãs e Componentes. O termo "Ecrãs" é mais
uma das variações de tradução do Power Apps — no contexto deste curso e do
sistema da Escola,, "ecrã" e "tela" significam a mesma
coisa. Sempre que você encontrar "ecrãs" na interface, leia
"telas".
A aba Ecrãs
exibe a lista de todas as telas do aplicativo. Ao expandir qualquer tela
clicando na seta ao lado do seu nome, todos os componentes que vivem dentro
dela aparecem abaixo, em recuo — containers dentro da tela, componentes dentro
dos containers, e assim por diante. Essa hierarquia visual é o que dá o nome de
"árvore" ao recurso: o tronco são as telas, os galhos são os
containers e painéis, e as folhas são os componentes individuais.
A aba Componentes
exibe os componentes reutilizáveis criados para o aplicativo — peças que foram
construídas uma vez e podem ser inseridas em múltiplas telas sem precisar ser
recriadas. Essa funcionalidade será explorada em profundidade quando o curso
chegar nos posts dedicados à arquitetura de reutilização do sistema.
O que mais está disponível na Vista de Árvore
Além das duas
abas, o painel da Vista de Árvore oferece quatro recursos adicionais que
aparecem dentro da aba Ecrãs.
O campo Pesquisar
permite localizar qualquer componente pelo nome dentro de toda a árvore do
aplicativo. Em um sistema com dezenas de componentes espalhados por quatro
telas — como o sistema da Escola, — encontrar um componente específico
navegando manualmente pela árvore pode tomar tempo. Digitar o nome no campo de
pesquisa leva você direto até ele.
O botão Inserir
novo Ecrã adiciona uma nova tela ao aplicativo diretamente a partir da
Vista de Árvore, sem precisar ir à Barra Superior. É um atalho de conveniência
— o resultado é idêntico ao botão Novo ecrã que você viu no Post 2.
Os itens App,
Telas e Componentes que aparecem como entradas fixas na árvore
merecem atenção especial. O item App não é uma tela — é o próprio
aplicativo tratado como um objeto com propriedades configuráveis. Clicando
nele, você acessa propriedades globais que afetam o comportamento do app
inteiro, como o que acontece quando o aplicativo é iniciado. O sistema da
Escola, usa as propriedades do objeto App para carregar as coleções globais e
inicializar as variáveis da Pirâmide de Controle assim que o usuário abre o
sistema — você vai entender essa lógica em detalhes quando chegar nos posts de
arquitetura.
Como a Vista de Árvore é usada no sistema da Escola,
No sistema da
Escola,, a Vista de Árvore é uma ferramenta de trabalho diária. Como o sistema
segue o padrão de nomenclatura rigoroso do Documento Zero — cada componente com
seu prefixo, nome semântico e sufixo de tela —, a árvore se torna um mapa
legível. Ao olhar para ela, você consegue identificar imediatamente o que cada
elemento é e em qual tela pertence, sem precisar clicar em nada.
É também pela
Vista de Árvore que você renomeia componentes para garantir que sigam o padrão
correto. Há três formas de renomear um componente, e este curso vai mostrar as
três para que você nunca fique travado:
A primeira forma
é dar dois cliques diretos sobre o nome do componente na árvore. O nome
entra em modo de edição e você digita o novo nome.
A segunda forma
é clicar nos três pontinhos que aparecem ao lado do componente quando
você passa o mouse sobre ele na árvore, e selecionar a opção Renomear no
menu de contexto que se abre.
A terceira forma
é selecionar o componente na tela de trabalho e alterar o campo de nome
diretamente no painel de Propriedades à direita — onde o nome do
componente aparece como um campo editável no topo do painel.
As três formas
produzem o mesmo resultado. Use a que for mais cômoda para o seu fluxo de
trabalho.
Inserir: O Catálogo de Componentes à Sua Esquerda
O segundo ícone
do Menu Lateral abre o painel Inserir — o catálogo de todos os
componentes disponíveis para adicionar à tela. Ao clicar nele, a segunda coluna
exibe uma lista organizada por categorias: componentes de entrada de dados, de
exibição, de mídia, de layout e outros. Você encontra botões, galerias,
formulários, campos de texto, rótulos, imagens, ícones e muito mais.
Inserir um
componente a partir deste painel e inserir a partir do botão + Inserir
da Barra Superior produz exatamente o mesmo resultado — o componente é
adicionado à tela ativa. A diferença é apenas o caminho: o painel lateral deixa
a lista de categorias sempre visível enquanto você trabalha, sem precisar abrir
e fechar o menu da Barra Superior a cada inserção.
O painel Inserir
também contém um link para a pasta de componentes — os componentes
reutilizáveis que foram construídos especificamente para o aplicativo, os
mesmos que aparecem na aba Componentes da Vista de Árvore. Isso permite inserir
um componente personalizado com a mesma facilidade que inserir um componente
nativo do Power Apps.
Dados: A Ponte com o SharePoint
O terceiro ícone
do Menu Lateral abre o painel Dados. É aqui que você gerencia as
conexões do aplicativo com fontes de dados externas — e no sistema da Escola,,
isso significa as listas do SharePoint.
Quando uma
conexão já está estabelecida, o painel Dados exibe todas as fontes ativas com
seus nomes. Quando você precisa conectar uma nova fonte, é daqui que o processo
começa — o mesmo que seria iniciado pelo botão Adicionar dados da Barra
Superior. As duas entradas levam ao mesmo lugar.
O painel Dados é
consultado frequentemente durante o desenvolvimento para confirmar que as
conexões estão ativas e que os nomes das tabelas estão corretos antes de
escrever fórmulas que dependem delas. Uma conexão quebrada ou com nome
diferente do esperado é causa comum de fórmulas que parecem corretas mas não
funcionam.
Variáveis: O Mapa do Estado do Seu Aplicativo
O quarto ícone
do Menu Lateral abre o painel Variáveis. Este é um dos recursos mais
valiosos para quem está aprendendo e também para quem já tem experiência —
porque ele torna visível algo que normalmente é invisível: o estado atual de
cada variável do aplicativo.
Ao abrir o
painel, você vê duas listas: as variáveis globais — criadas com a função Set()
e acessíveis em qualquer tela — e as variáveis de contexto — criadas com
UpdateContext() e válidas apenas dentro da tela onde foram criadas. Para cada
variável, o painel exibe o nome, o tipo de valor e onde ela é usada no
aplicativo.
No sistema da
Escola,, as variáveis globais da Pirâmide de Controle — varGlobal_Painel,
varGlobal_Atividade, varGlobal_Acao e varGlobal_Tarefa — aparecem neste painel.
Durante o desenvolvimento e o teste, abrir o painel de Variáveis e observar os
valores em tempo real é uma técnica essencial para entender por que uma fórmula
está se comportando de determinada forma. Se o botão não está respondendo como
esperado, verificar se a variável que ele lê tem o valor correto é sempre o
primeiro passo do diagnóstico.
Procurar: Localizar e Substituir em Todo o Aplicativo
O quinto ícone
do Menu Lateral abre o painel Procurar. Ele funciona de duas formas
complementares.
A primeira é a localização:
você digita um termo — o nome de uma variável, o nome de uma coluna do
SharePoint, o nome de um componente — e o painel lista todas as ocorrências
desse termo em todo o aplicativo, indicando em qual tela e em qual componente
cada uma aparece. Em um sistema com dezenas de fórmulas espalhadas por quatro
telas, encontrar todas as referências a uma variável específica manualmente
seria impraticável.
A segunda é a substituição:
além de localizar, o painel permite substituir um termo por outro em todas as
ocorrências de uma vez. Isso é especialmente útil quando uma fonte de dados é
renomeada, quando uma variável precisa ter o nome trocado, ou quando um padrão
de nomenclatura precisa ser corrigido em larga escala. Em vez de abrir fórmula
por fórmula e corrigir uma a uma, você usa Procurar e Substituir e o trabalho é
feito de uma vez.
O Menu de Contexto: Ferramentas para Situações Específicas
O sexto recurso
do Menu Lateral aparece como um ícone de três pontinhos — e ele nem sempre está
visível. Esse comportamento é intencional: esse menu de contexto aparece apenas
quando a tela ativa oferece recursos adicionais que fazem sentido naquele contexto
específico.
Ao clicar nele,
um submenu se abre com três opções: Suporte de Dados, Power Automate
e Ferramentas avançadas.
Suporte de
Dados abre recursos relacionados à gestão e diagnóstico das conexões de
dados ativas — útil quando você precisa investigar problemas de leitura ou
escrita com as listas do SharePoint.
Power
Automate é o ponto de integração entre o Power Apps e os fluxos de
automação. É daqui que você conecta um botão do aplicativo a um fluxo do Power
Automate — por exemplo, o botão que gera um relatório em PDF no sistema da
Escola,. Quando esse botão é pressionado, não é o Power Apps que gera o
arquivo: ele chama um fluxo do Power Automate, que executa a tarefa e retorna o
resultado. Essa integração será explorada em profundidade quando o curso chegar
nos posts de automação do sistema.
Ferramentas
avançadas abre recursos de diagnóstico e depuração para desenvolvedores com
necessidades mais específicas — análise de performance, monitor de fórmulas e
outros instrumentos que se tornam relevantes à medida que o sistema cresce em
complexidade.
Definições: As Configurações Globais do Aplicativo
O último ícone
do Menu Lateral — posicionado no final da primeira coluna, separado dos demais
— abre o painel Definições. É aqui que ficam as configurações que afetam
o aplicativo como um todo, organizadas em quatro abas.
A aba Geral
contém o nome do aplicativo, a descrição, o ícone e outras informações que
identificam o app no ambiente do Microsoft 365. É também aqui que você ajusta o
comportamento global, como o idioma padrão da interface.
A aba Apresentar
controla as dimensões da tela do aplicativo — largura, altura e orientação. No
sistema da Escola,, essas dimensões foram definidas no início do projeto e não
foram alteradas desde então. Mudar as dimensões depois que o sistema está
construído exige reposicionar todos os componentes — uma operação trabalhosa
que reforça a importância de definir o tamanho da tela antes de começar a
construir.
A aba Atualizações
exibe as funcionalidades experimentais e de pré-lançamento que a Microsoft
disponibiliza para ativação voluntária. Algumas dessas funcionalidades depois
se tornam padrão na plataforma — outras são descontinuadas. Ativar uma
funcionalidade experimental em um sistema em produção exige avaliação
cuidadosa.
A aba Suporte
oferece acesso a ferramentas de diagnóstico, versões do aplicativo e
informações técnicas que são úteis principalmente quando você precisa reportar
um problema ou investigar um comportamento inesperado da plataforma.
4. Entendimento: Por que o Menu Lateral Foi Projetado Assim
O Menu Lateral
segue o mesmo princípio de design que a Barra Superior: separar tipos
diferentes de ação em lugares diferentes. A Barra Superior cuida do ciclo de
vida do aplicativo. O Menu Lateral cuida do que vive dentro dele — a estrutura,
os dados, as variáveis e as configurações.
A organização em
ícones na primeira coluna e conteúdo na segunda é uma escolha que preserva o
espaço da tela de trabalho. Como a tela de trabalho é o espaço onde você vê e
constrói o aplicativo visualmente, qualquer centímetro que pode ser devolvido a
ela melhora a experiência de desenvolvimento. O Menu Lateral ocupa espaço
apenas quando você precisa dele — e se retrai quando você não precisa.
Para o sistema da
Escola,, o Menu Lateral foi especialmente importante em dois momentos do
desenvolvimento: na construção da estrutura inicial, quando a Vista de Árvore
era consultada constantemente para garantir que todos os componentes seguiam o
padrão de nomenclatura do Documento Zero; e durante os testes de lógica, quando
o painel de Variáveis permitia acompanhar em tempo real se os valores das
variáveis da Pirâmide de Controle estavam sendo definidos corretamente a cada
clique.
5. Fixação: Muitos Recursos, Uma Estrutura, Um Mapa
Você chegou ao
fim do Post 3. O Menu Lateral é a sua base de navegação durante todo o
desenvolvimento. Veja o que ficou:
O Menu Lateral é
uma estrutura de duas colunas verticais permanente no lado esquerdo do Studio.
A primeira coluna exibe os ícones; a segunda exibe o conteúdo do item
selecionado. Os sete recursos, do alto ao baixo: Vista de Árvore com as
abas Ecrãs e Componentes, campo de pesquisa, botão de novo ecrã e acesso ao
objeto App; Inserir com o catálogo de componentes e o link para
componentes reutilizáveis; Dados para gerenciar as conexões com fontes
externas; Variáveis para visualizar o estado de todas as variáveis
globais e de contexto; Procurar para localizar e substituir termos em
todo o aplicativo; o menu de contexto com Suporte de Dados, Power
Automate e Ferramentas avançadas; e Definições com as abas Geral,
Apresentar, Atualizações e Suporte.
Atenção Técnica
O objeto App
que aparece na Vista de Árvore não é uma tela — é o próprio aplicativo tratado
como um elemento com propriedades configuráveis. Clicar nele no lugar de clicar
em uma tela é um erro que acontece com frequência quando a árvore está retraída
e os itens ficam próximos visualmente. O resultado observável é ver
propriedades globais no painel lateral quando você esperava ver as propriedades
de uma tela específica. Sempre verifique o que está selecionado na árvore antes
de começar a configurar propriedades.
O painel de
Variáveis exibe os valores das variáveis conforme eles existem no momento em
que o painel é aberto durante um teste no modo de visualização. Fora do
modo de visualização, as variáveis não têm valor ativo — elas existem na
fórmula, mas não foram executadas. Para ver os valores reais, você precisa
estar rodando o aplicativo no modo de play.
Erro Comum
O erro mais
frequente no Menu Lateral é renomear um componente diretamente na tela de
trabalho — clicando duas vezes sobre ele na tela — em vez de renomeá-lo pela
Vista de Árvore ou pelo painel de Propriedades. O Power Apps permite renomear
pela tela em alguns casos, mas o comportamento pode variar dependendo do tipo
de componente e do contexto. A forma mais confiável e consistente é sempre usar
a Vista de Árvore: dois cliques no nome do componente na lista, digitar o novo
nome seguindo o padrão do Documento Zero, e confirmar com Enter.
O que Vem no Próximo Post — A Árvore do Aplicativo em Profundidade
Neste post você
conheceu a Vista de Árvore como parte do Menu Lateral. Mas ela merece — e tem —
um post inteiro só para ela. No Post 4 você vai entender por que a Árvore é
muito mais do que uma lista de componentes: ela é o instrumento que garante a
organização do sistema, o lugar onde o padrão de nomenclatura do Documento Zero
se torna visível e o mapa que qualquer pessoa precisará consultar para
entender, manter ou evoluir o aplicativo depois de você.
Nenhum comentário:
Postar um comentário