Partilhar via

Criar um cartão de lista de compras

  • Artigo

Neste tutorial, criará um cartão que apresenta uma lista de compras e permite-lhe adicionar itens. Verá o estruturador de cartões, variáveis e o Power Fx.

No final do tutorial, o seu cartão de lista de compras deverá parecer como o exemplo seguinte:

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

Pré-requisitos

Criar um cartão

  1. Inicie sessão no Power Apps e selecione o seu ambiente.

  2. No painel esquerdo, selecione Cartões. Se o item não estiver no painel lateral, selecione ...Mais e, em seguida, selecione o item pretendido.

  3. Selecione + Criar um cartão.

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

  5. Selecione o texto O título do seu cartão fica aqui. No painel de propriedades das etiquetas de texto, defina Texto como Lista de Compras.

  6. Selecione o texto Adicionar e remover elementos para personalizar o novo cartão. No painel de propriedades das etiquetas de texto, defina Texto como Utilizar a caixa abaixo para adicionar itens à lista.

Adicionar uma variável

A lista irá conter itens individuais em linhas de texto separadas. Parece-se com uma tabela com uma única coluna, com um item de mercearia em cada linha. Isto sugere que terá de criar uma variável de tabela para armazenar a lista.

  1. No painel esquerdo, selecione Variáveis.

  2. Selecione + Nova variável.

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

  4. Selecione as chavetas à direita do Valor predefinido e introduza "" entre os parênteses. Isto indica que a nossa tabela contém valores de texto numa coluna implicitamente chamada Valor

  5. Selecione Guardar.

    Captura de ecrã 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 Apresentar para expandir a categoria e, em seguida, selecione Etiqueta de texto.

  3. No painel de propriedades de etiquetas de texto, selecione o separador Avançadas.

  4. Defina Repetir para cada para MyGroceryList.

    Captura de ecrã do painel de propriedades avançadas de uma etiqueta de texto, com MyGroceryList na propriedade Repetir para cada.

    Definir a propriedade Repetir para cada de etiqueta de texto repete a etiqueta de texto para cada item na tabela especificada. Neste exemplo, a tabela, MyGroceryList, é a variável que criou. Por outras palavras, é criada uma etiqueta de texto separada no cartão para cada item na lista de mercearias.

  5. Selecione o separador Propriedades. Defina Texto como ThisItem.Value.

    Atribuir a variável definida pelo sistema ThisItem.Value à etiqueta texto apresenta o valor do item atual na matriz MyGroceryList como o texto da etiqueta. Matriz é outro termo para uma variável de tabela. Pode introduzir o nome da variável na barra de fórmulas ou no painel de propriedades.

    Captura de ecrã de um nome de variável introduzido na propriedade Text da etiqueta de texto.

Adicionar uma caixa de entrada

A lista que criou está vazia, pelo que no passo final dará ao utilizador a capacidade de adicionar itens.

  1. No painel esquerdo, selecione Inserir.

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

  3. No painel de propriedades de entrada de texto, defina Name como NewItem e defina Etiqueta como New Item:.

    Captura de ecrã de nomes de variáveis introduzidos nas propriedades Name e Label de uma caixa de texto de entrada.

    A propriedade Name permite-lhe consultar o controlo numa expressão do Power Fx. Tem de ser uma palavra, sem espaços nem carateres especiais. A propriedade Label é apresentada no cartão. O nome e a etiqueta de um controlo não têm de ser semelhantes como aqui, mas a utilização de nomes semelhantes facilita a monitorização de controlos.

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, em seguida, 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. Escreva a seguinte expressão do Power Fx na barra de fórmulas: Collect(MyGroceryList, {Value: NewItem})

    Esta expressão utiliza a função do Power Fx Collect para anexar o valor da entrada do utilizador, NewItem, para a variável de tabela MyGroceryList na coluna Valor implícita. Uma vez que a expressão é dependente da propriedade OnSelect do botão, é executada quando o utilizador seleciona o botão.

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

Testar o cartão

Deve guardar sempre as suas alterações antes de reproduzir um cartão. Selecione Guardar e, em seguida, selecione Reproduzir.

Teste o cartão adicionando alguns itens à lista de mercearias.

Passos seguintes

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