Como criar um formulário com guias de navegação no Power Apps

Por Luiz Antonio Sgargeta
Como criar um formulário com guias de navegação no Power Apps

Os formulários com guias são ideais quando um formulário tem mais controles do que espaço na tela. Portanto, realmente ajuda usar um formulário com guias para agrupar itens e manter o tamanho visível de seus formulários gerenciável. Infelizmente, o Power Apps não vem com um formulário com guias, então precisamos criar um usando uma galeria e alguns grupos de controles.

Então, as etapas para criar este formulário são:

  • Primeiramente, vamos criar uma coleção de nomes de guias
  • Em seguida, criaremos uma galeria
  • Por fim, iremos criar um grupo para cada guia com uma propriedade visível

Crie uma coleção

Assim, para este formulário, iremos codificar os nomes das guias em uma coleção. Portanto, este código precisa estar no OnStart do aplicativo e, para fins de teste, em um botão também. Deste modo, a coleção só precisa conter os nomes das guias.

ClearCollect (
               ccTabNames,
               {Tab: "Projeto"},
               {Tab: "Tarefas"},
               {Tab: "Custos"}
)

Dessa forma, criamos uma coleção com três linhas de dados.

Construir uma Galeria

Logo depois, uma galeria criará as guias do formulário, cada guia será um rótulo que muda de cor com base no item da galeria selecionado.

1:  Primeiramente, insira uma galeria horizontal em branco.

2:  Em seguida, faça dos dados a coleção “ccTabNames” criada na última parte.

3:  Então, atualize a galeria para ter as seguintes propriedades.

Nome da galeriaGalleryTabs
LarguraGalleryTabs.TemplateWidth * CountRows (GalleryTabs.AllItems)
Altura40
Tamanho modelo150
Preenchimento0

4: Assim, adicione um rótulo ao modelo da galeria e atualize para ter as seguintes propriedades.

Nome do rótuloTabName
TextoThisItem.Tab
AlturaParent.TemplateHeight
LarguraParent.TemplateWidth – 3
PreencherIf (ThisItem.IsSelected, Blue, LightBlue)
CorBranco

5: Por fim, altere o “OnSelect” do rótulo para atualizar uma variável, “vvTabSelected”, para o valor da guia.

Além disso, teste suas guias no modo de visualização no seu formulário. Portanto, você precisará clicar no botão para executar o código criado na seção anterior. 

Dica: Visualize as variáveis ​​para verificar se o valor da guia está sendo salvo.

Grupos de controles

A última etapa é criar os grupos de controles associados a cada aba, eles serão circundados por um retângulo com um preenchimento branco e uma borda colorida que corresponde à aba selecionada.

1:  Primeiramente, insira um retângulo no menu suspenso Ícones e modifique as propriedades. Entretanto, neste exemplo, o retângulo ainda não foi renomeado.

XGalleryTabs.X + Rectangle1.BorderThickness / 2
EGalleryTabs.Y + GalleryTabs.Height
Largura800 ou o que quer que seja adequado ao seu aplicativo
Altura500 ou o que quer que seja adequado ao seu aplicativo
PreencherBranco
Cor da bordaAzul
Largura da Borda2

2:  Em seguida, adicione os controles para essa guia.

3:  Então, selecione o retângulo e todos os controles da guia e agrupe-os. Renomeie o grupo para corresponder à guia, por exemplo, GroupProject.

4:  Por fim, selecione o grupo que irá selecionar todos os itens e alterar a propriedade visible para:

vvTabSelected = "Projeto"

Repita as etapas 1 a 4 para cada guia necessária e lembre-se de testar conforme avança.

Conclusão

Por fim, como você viu, o Power Apps é excelente para automatizar as atividades e formulários de seu negócio de forma ágil e simples. Assim, a Trinapse ajuda as empresas a maximizar seus produtos Microsoft. Para trazer ainda mais melhorias para sua empresa, confira também nosso guia para obter máximo proveito de uma consultoria ou agende uma consulta hoje.

Ver mais artigos

Entre em Contato

Vamos juntos transformar sua dor
em solução!

#moveFast