Compartir a través de

Crear una tarjeta de lista de la compra

  • Artículo

En este tutorial, creará una tarjeta que muestre una lista de la compra y le permita agregar artículos. Usará el diseñador de tarjetas, variables y Power Fx.

Al final del tutorial, su tarjeta de lista de la compra deberá parecerse al siguiente ejemplo:

Captura de pantalla de una tarjeta de lista de compras terminada.

Requisitos previos

Crear una tarjeta

  1. Inicie sesión en Power Apps y luego seleccione su entorno.

  2. En el panel izquierdo, seleccione Tarjetas. Si el elemento no se encuentra en el panel lateral, seleccione …Más y, a continuación, el elemento que desee.

  3. Seleccione + Crear una tarjeta.

  4. En Nombre de la tarjeta, escriba SimpleShoppingCard y, a continuación, seleccione Crear.

  5. Seleccione el texto El título de su tarjeta va aquí. En el panel de propiedades de la etiqueta de texto, establezca Texto en Lista de la compra.

  6. Seleccione el texto Agregue y quite un elemento para personalizar la nueva tarjeta. En el panel de propiedades de la etiqueta de texto, establezca Texto en Use el cuadro de abajo para agregar elementos a la lista.

Agregar una variable

La lista de la compra contendrá artículos individuales en líneas de texto separadas. Parece una tabla con una sola columna, con un artículo de comestibles en cada fila. Eso sugiere que necesitará crear una variable de tabla para almacenar su lista.

  1. En el panel izquierdo, seleccione Variables.

  2. Seleccione +Nueva variable.

  3. En la ventana Nueva variable, introduzca MyGroceryList en Nombre. Establezca Tipo en Tabla.

  4. Seleccione los corchetes a la derecha de Valor predeterminado e introduzca "" entre los corchetes. Esto indica que nuestra tabla contiene valores de texto en una columna llamada implícitamente Valor

  5. Seleccione Guardar.

    Captura de pantalla del panel de propiedades de la variable MyGroceryList.

Agregar una lista a la tarjeta

  1. En el panel izquierdo, seleccione Insertar.

  2. En el panel de herramientas, seleccione Mostrar para expandir la categoría y, a continuación, seleccione Etiqueta de texto.

  3. En el panel de propiedades de la etiqueta de texto, seleccione la pestaña Avanzado.

  4. Establezca Repetir para cada en MyGroceryList.

    Captura de pantalla del panel de propiedades avanzadas de una etiqueta de texto, con MyGroceryList en la propiedad Repetir para cada.

    Al establecer la propiedad Repetir para cada de una etiqueta de texto, se repite la etiqueta de texto para cada elemento de la tabla especificada. En este ejemplo, la tabla MyGroceryList es la variable que creó. En otras palabras, se crea una etiqueta de texto independiente en la tarjeta para cada artículo de la lista de la compra.

  5. Seleccione la pestaña Propiedades. Establezca Texto como ThisItem.Value.

    Al asignar la variable definida por el sistema ThisItem.Value a la etiqueta de texto, se muestra el valor del artículo actual de la matriz MyGroceryList como texto de la etiqueta. Matriz es otro término para una variable de tabla. Puede introducir el nombre de la variable en la barra de fórmulas o en el panel de propiedades.

    Captura de pantalla de un nombre de variable introducido en la propiedad Texto de la etiqueta del texto.

Agregar un cuadro de entrada

La lista que ha creado está vacía, por lo que en el paso final le concederá al usuario la capacidad de agregar elementos.

  1. En el panel izquierdo, seleccione Insertar.

  2. En el panel de herramientas, seleccione Entrada para expandir la categoría y, a continuación, seleccione Entrada de texto.

  3. En el panel de propiedades de entrada de texto, establezca Nombre como NewItem y establezca Etiqueta como New Item:.

    Captura de pantalla de nombres de variables introducidos en las propiedades Nombre y Etiqueta de un cuadro de texto de entrada.

    La propiedad Nombre le permite hacer referencia al control en una expresión de Power Fx. Tiene que ser una sola palabra, sin espacios ni caracteres especiales. La propiedad Etiqueta se muestra en la tarjeta. El nombre y la etiqueta de un control no tienen que ser similares, como lo son aquí, pero el uso de nombres similares facilita el seguimiento de los controles.

Agregar un botón de Power Fx

  1. En el panel izquierdo, seleccione Insertar.

  2. En el panel de herramientas, seleccione Entrada para expandir la categoría y, a continuación, seleccione Botón.

  3. En el panel de propiedades del botón, establezca Título en Agregar elemento.

  4. En el panel de propiedades, seleccione PowerFx para situar el cursor en la barra de fórmulas.

  5. Escriba la siguiente expresión de Power Fx en la barra de fórmulas: Collect(MyGroceryList, {Value: NewItem})

    Esta expresión usa la función de Power Fx Recopilar para añadir el valor de la entrada del usuario, NewItem, a la variable de la tabla MyGroceryList en la columna implícita Valor. Como la expresión está vinculada a la propiedad OnSelect del botón, se ejecuta cuando el usuario selecciona el botón.

    Captura de pantalla de la expresión de Power Fx en la barra de fórmulas, asignada a la propiedad OnSelect del botón.

Probar la tarjeta

Siempre debe guardar los cambios antes de reproducir una tarjeta. Seleccione Guardar y, a continuación, Reproducir.

Pruebe su tarjeta agregando algunos artículos a la lista de la compra.

Pasos siguientes

Aprenda a hacer una tarjeta más compleja con conectores de Microsoft Dataverse.