Crie uma galeria para mostrar imagens e textos sobre vários produtos, classifique e filtre essas informações.

No PowerApps, é possível usar uma galeria para mostrar vários itens relacionados, da mesma forma como você vê em um catálogo. As galerias são ótimas para mostrar informações sobre produtos, como nomes e preços. Neste tópico, criamos uma galeria e classificamos e filtramos as informações usando funções no estilo Excel. Além disso, quando um item é selecionado, uma borda é inserida ao redor dele.

Observação:

Este tópico usa um aplicativo de tablet. É possível usar um aplicativo de telefone, mas será necessário redimensionar alguns controles.

Pré-requisitos

  • Inscreva-se no PowerApps e instale o PowerApps. Ao abrir o PowerApps, conecte-se usando as mesmas credenciais usadas para se inscrever.
  • Crie um aplicativo de tablet com base em um modelo, em dados ou do zero.
  • Saiba como configurar um controle.
  • Essas etapas usam o CreateFirstApp como dados de entrada de exemplo, que inclui imagens .jpg. O arquivo zip inclui um arquivo XML que pode ser convertido em Excel. Caso contrário, o PowerApps lê automaticamente os arquivos nos arquivos. zip e os importa com êxito. É possível baixar e usar esses dados de exemplo ou importar seus próprios dados.

Mostrar dados em uma galeria

  1. Crie uma coleção nomeada Inventário usando os dados de exemplo. As etapas incluem:

    1. Na guia Inserir, selecione Controles e, em seguida, selecione Importar:


    1. Defina a propriedade OnSelect do controle de importação com a seguinte fórmula:
    Collect(Inventory, Import1!Data)


    1. Selecione o botão Importar dados para abrir o Windows Explorer. Selecione CreateFirstApp.zip e selecione Abrir. 1. No menu Arquivo, selecione Coleções. A coleção Inventário é listada com os dados importados:

    Você acabou de criar a coleção Inventário, que contém informações sobre os cinco produtos, incluindo uma imagem de design, o nome do produto e o número de unidades no estoque.

    Observação:

    O controle de importação é usado para importar dados no estilo Excel e criar a coleção. O controle de importação importa dados quando você está criando seu aplicativo e visualizando-o. Atualmente, o controle de importação não importa dados quando você publica seu aplicativo.

  2. Selecione a seta voltar para voltar ao designer.

  3. Na guia Inserir, clique ou toque em Galeria e, em seguida, clique ou toque na galeria Horizontal.

  4. No painel direito, clique ou toque na opção em que o título e o subtítulo sobrepõem o elemento gráfico:

  5. Defina a propriedade Itens da galeria como Inventário:

  6. Renomeie a galeria como ProductGallery e mova-a para que ela não bloqueie os outros controles. Redimensione a galeria para que ela mostre três produtos:

  7. No primeiro item da galeria, selecione o rótulo inferior:

    Observação:

    Quando você altera o primeiro item em qualquer galeria, você altera automaticamente todos os outros itens dela.

  8. Defina a propriedade Texto do rótulo como a expressão a seguir:
    ThisItem!UnitsInStock

    Quando você fizer isso, o rótulo mostrará as unidades no estoque para cada produto:

Observação:

Por padrão, a propriedade Texto do rótulo superior é definida como ThisItem!ProductName. É possível alterá-lo para qualquer outro item em sua coleção. Por exemplo, se a sua coleção tiver os campos ProductDescription ou Preço, será possível definir o rótulo como ThisItem!ProductDescription ou ThisItem!Price.

Usando essas etapas, você importou dados que incluem imagens .jpg para uma coleção. Em seguida, você adicionou uma galeria que exibe os dados e configurou um rótulo para mostrar as unidades de cada produto no estoque.

Realçar o item da galeria selecionado

  1. Selecione qualquer item da galeria exceto o primeiro. O ícone de edição é exibido (canto superior esquerdo). Selecione o ícone de edição:

  2. Na guia Inserir, selecione Formas e, em seguida, selecione o retângulo. Um retângulo sólido azul é exibido em cada item da galeria.
  3. Na guia Início, selecione Preencher e, em seguida, selecione Sem preenchimento.
  4. Selecione Borda, selecione Estilo de borda e, em seguida, selecione uma linha sólida.
  5. Selecione Borda novamente e defina a espessura como 3. Redimensione o retângulo para que ele envolva o item da galeria. Agora os itens da sua galeria têm uma borda azul e devem ter uma aparência semelhante à seguinte:

  6. Na guia Forma, selecione Visível e, em seguida, insira a seguinte fórmula na Barra de Fórmulas:

    If(ThisItem!IsSelected, true)

    Um retângulo azul envolve a seleção atual em uma galeria. Selecione alguns itens da galeria para confirmar que o retângulo é exibido em torno de cada item selecionado. Lembre-se de que também é possível abrir a Visualização para ver e testar o que você está criando.

Dica:

Selecione o retângulo, selecione Reordenar na guia Início e, em seguida, selecione Enviar para trás. Usando esse recurso, é possível selecionar um item da galeria sem que a borda bloqueie alguma coisa.

Usando essas etapas, você adicionou uma borda ao redor da seleção atual na galeria.

Classificar e filtrar itens na galeria

Nestas etapas, vamos classificar os itens da galeria em ordem crescente e decrescente. Além disso, vamos adicionar um controle deslizante para “filtrar” os itens da galeria pelas unidades no estoque que você escolher.

Classificar em ordem crescente ou decrescente

  1. Selecione qualquer item da galeria exceto o primeiro.
  2. A propriedade Itens está atualmente definida como Inventário (o nome de sua coleção). Altere-a para o seguinte:

    Sort(Inventory, ProductName)

    Quando você faz isso, os itens da galeria são classificados por nome de produto em ordem crescente:

    Tente a ordem decrescente. Defina a propriedade Items da galeria com a seguinte fórmula:

    Sort(Inventory, ProductName, Descending)

Adicionar um controle deslizante e filtrar os itens na galeria

  1. Adicione um controle deslizante (guia Inserir > Controles), renomeie-o como StockFilter e mova-o na galeria.
  2. Configure o controle deslizante para que os usuários não possam defini-lo como um valor fora do intervalo de unidades no estoque:

    1. Na guia Conteúdo, selecione Min e, em seguida, insira a expressão a seguir:
      Min(Inventory, UnitsInStock)
    2. Na guia Conteúdo, selecione Max e, em seguida, insira a expressão a seguir:
      Max(Inventory, UnitsInStock)
  3. Selecione qualquer item da galeria exceto o primeiro. Defina a propriedade Itens da galeria como a expressão a seguir:
    Filter(Inventory, UnitsInStock<=StockFilter!Value)

  4. Em Visualização, ajuste o controle deslizante para um valor que esteja entre a quantidade mais alta e a mais baixa na galeria. Enquanto você ajusta o controle deslizante, a galeria mostra somente os produtos menores do que o valor escolhido:

Agora, vamos adicionar nosso filtro:

  1. Volte para o designer.
  2. Na guia Inserir, selecione Texto, selecione Texto de entrada e renomeie o novo controle como NameFilter. Mova o controle de texto para embaixo do controle deslizante.
  3. Defina a propriedade Itens da galeria como a expressão a seguir:
    Filter(Inventory, UnitsInStock<=StockFilter!Value && NameFilter!Text in ProductName)
  4. Em Versão prévia, defina o controle deslizante como 30 e digite a letra g no controle de entrada de texto. A galeria mostra o único produto com menos de 30 unidades no estoque e com um nome com a letra "g":

dicas e truques

  • A qualquer momento, é possível selecionar o botão de visualização ( ) para ver o que você criou e testá-lo.
  • Ao desenvolver seu aplicativo, é possível redimensionar os controles e movê-los usando clicar e arrastar.
  • Pressione ESC ou selecione o X para fechar a janela de visualização.
  • Ao usar uma galeria, selecione o primeiro item dela para alterar todos os itens na galeria. Por exemplo, selecione o primeiro item para adicionar uma borda a todos os itens da galeria.
  • Para atualizar as propriedades da galeria, selecione qualquer item da galeria exceto o primeiro. Por exemplo, selecione o segundo item para atualizar Itens, ShowScrollbar e outras propriedades que se aplicam à galeria (não aos itens da galeria).

O que você aprendeu

Neste tópico, você:

  • Criou uma coleção, importou dados, que incluem imagens .jpg para essa coleção e mostrou os dados em uma galeria.
  • Em cada imagem na galeria, configurou um rótulo que lista as unidades no estoque para esse item.
  • Adicionou uma borda ao redor do item selecionado.
  • Classificou os itens por nome de produto em ordem crescente e decrescente.
  • Adicionou um controle deslizante e um controle de texto de entrada para filtrar os produtos por unidades no estoque e nome de produto.