Compartilhar via

Criar um cartão de lista de compras

  • Artigo

Neste tutorial, você criará um cartão simples que exibe uma lista de compras e permite adicionar novos itens. Você usará o designer de cartões, as variáveis e o Power Fx.

Ao final do tutorial, seu cartão de lista de compras deverá ser semelhante ao exemplo a seguir:

Captura de tela de um cartão de lista de compras concluído.

Pré-requisitos

Criar um cartão

  1. Entre no Power Apps e selecione seu ambiente.

  2. No painel à esquerda, selecione Cartões. Se o item não estiver no painel lateral, selecione …Mais e selecione o item desejado.

  3. Selecione + Criar um cartão.

  4. Em Nome do cartão, digite SimpleShoppingCard e selecione Criar.

  5. Selecione o texto O título do seu cartão é inserido aqui. No painel de propriedades do rótulo de texto, defina Texto como Lista de Compras.

  6. Selecione o texto Adicione e remova elementos para personalizar seu novo cartão. No painel de propriedades do rótulo de texto, defina Texto como Use a caixa abaixo para adicionar itens à lista.

Adicionar uma variável

A lista de compras conterá itens individuais em linhas de texto separadas. Parece uma tabela com uma única coluna, com um item de mercearia em cada linha. Isso sugere que você precisará criar uma variável de tabela para armazenar sua lista.

  1. No painel à esquerda, selecione Variáveis.

  2. Selecione + Nova variável.

  3. Na janela Nova variável, insira MyGroceryList em Nome. Defina Tipo como Tabela.

  4. Selecione as chaves à direita de Valor padrão e insira "" entre elas. Isso indica que nossa tabela contém valores de texto em uma coluna chamada implicitamente Valor

  5. Selecione Salvar.

    Captura de tela do painel de propriedades da variável MyGroceryList.

Adicionar uma lista ao cartão

  1. No painel esquerdo, selecione Inserir.

  2. No painel de ferramentas, selecione Tela para expandir a categoria e selecione Rótulo de texto.

  3. No painel de propriedades do rótulo de texto, selecione a guia Avançado.

  4. Defina Repetir para cada como MyGroceryList.

    Captura de tela do painel de propriedades avançadas de um rótulo de texto, com MyGroceryList em Repetir para cada propriedade.

    Definir a propriedade Repetir para cada de um rótulo de texto repete o rótulo de texto para cada item na tabela especificada. Neste exemplo, a tabela, MyGroceryList, é a variável que você criou. Em outras palavras, um rótulo de texto separado é criado no cartão para cada item da lista de compras.

  5. Selecione a guia Propriedades. Defina Texto como ThisItem.Value.

    A atribuição da variável definida pelo sistema ThisItem.Value para o rótulo de texto exibe o valor do item atual na matriz MyGroceryList como o texto do rótulo. Matriz é outro termo para uma variável de tabela. Você pode inserir o nome da variável na barra de fórmulas ou no painel de propriedades.

    Captura de tela de um nome de variável inserido na propriedade Texto do rótulo de texto.

Adicionar uma caixa de entrada

A lista que você criou está vazia e, portanto, na etapa final, você concederá ao usuário a capacidade de adicionar itens.

  1. No painel esquerdo, selecione Inserir.

  2. No painel de ferramentas, selecione Entrada para expandir a categoria e selecione Entrada de texto.

  3. No painel de propriedades de entrada de texto, defina Nome como NewItem e defina Rótulo como Novo item:.

    Captura de tela dos nomes de variáveis inseridos nas propriedades Nome e Rótulo de uma caixa de texto de entrada.

    A propriedade Nome permite que você se refira ao controle em uma expressão do Power Fx. Tem que ser uma palavra, sem espaços ou caracteres especiais. A propriedade Rótulo é exibida no cartão. O nome e o rótulo de um controle não precisam ser semelhantes, como são aqui, mas usar nomes semelhantes facilita o rastreamento dos controles.

Adicionar um botão do Power Fx

  1. No painel esquerdo, selecione Inserir.

  2. No painel de ferramentas, selecione Entrada para expandir a categoria e selecione Botão.

  3. No painel de propriedades do botão, defina Título como Adicionar Item.

  4. No painel de propriedades, selecione PowerFx para colocar o cursor na barra de fórmulas.

  5. Digite a expressão do Power Fx a seguir na barra de fórmulas: Collect(MyGroceryList, {Value: NewItem})

    Essa expressão usa a função do Power Fx Collect para anexar o valor da entrada do usuário, NewItem, à variável de tabela MyGroceryList na coluna Valor implícita. Como a expressão está vinculada à propriedade OnSelect do botão, ela é executada quando o usuário seleciona o botão.

    Captura de tela da expressão do Power Fx na barra de fórmulas atribuída à propriedade OnSelect do botão.

Teste o cartão

Você sempre precisará salvar suas alterações antes de usar um cartão. Selecione Salvar e Reproduzir.

Teste seu cartão ao adicionar alguns itens à lista de compras.

Próximas etapas

Saiba como criar um cartão mais complexo com conectores do Microsoft Dataverse.