Ejercicio: Utilizar las colecciones y manipular las tablas

  • 15 minutos

En este ejercicio, practicará el uso de las tablas. Creará una colección, aplicará un filtro a la colección, realizará una búsqueda en la colección, editará un registro de la colección, agregará un registro a una colección y eliminará un registro de la colección.

Crear la colección de datos

  1. Inicie sesión en Power Apps.

  2. Desde la página Inicio, seleccione + Crear en el panel de navegación del lado izquierdo. Después, seleccione Aplicación vacía.

    Por último, seleccione Crear en la aplicación de lienzo en blanco.

  3. Asigne un nombre a su aplicación y seleccione Crear.

  4. Seleccione la pestaña Insertar y agregue un botón; configure la propiedad OnSelect según esta fórmula:

    ClearCollect(CityPopulations, 
{City:"London", Country:"United Kingdom", Population:8615000}, 
{City:"Berlin", Country:"Germany", Population:3562000}, 
{City:"Madrid", Country:"Spain", Population:3165000}, 
{City:"Rome", Country:"Italy", Population:2874000}, 
{City:"Paris", Country:"France", Population:2273000}, 
{City:"Hamburg", Country:"Germany", Population:1760000}, 
{City:"Barcelona", Country:"Spain", Population:1602000}, 
{City:"Munich", Country:"Germany", Population:1494000}, 
{City:"Milan", Country:"Italy", Population:1344000})

  5. Mantenga presionada la tecla Alt y seleccione el control Botón. (Esto creará su colección y almacenará toda la información). Actualice la propiedad Text del botón para "Collect".

  6. Inserte un control Galería vertical y elija CityPopulations como origen de datos (también puede actualizar la propiedad Items de la galería a CityPopulations).

  7. Con la galería seleccionada, el panel Propiedades en el lado derecho de la pantalla cambia el diseño a Título, subtítulo y cuerpo. Luego, seleccione Campos y cambie la opción desplegable Cuerpo a Population. Consulte la imagen siguiente.

    Captura de pantalla de la nueva Galería con aspectos destacados de las opciones Origen de datos y Fields en el panel Propiedades y Population como la opción seleccionada en Body1

  8. Con la galería aún seleccionada, actualice la propiedad OnSelect a lo siguiente:

     Set(varRecord,ThisItem)

Filtrar la colección

  1. Inserte una Etiqueta de texto y cambie la propiedad Text a "Population". Luego muévala a la derecha de la galería.

  2. A continuación, inserte un control Control deslizante y colóquelo debajo de la etiqueta que creamos. Puede encontrar el control rápidamente si escribe "control deslizante" en el campo de búsqueda.

  3. Seleccione el control deslizante y cambie la propiedad Min a:

    Min(CityPopulations, Population)

  4. A continuación, cambie la propiedad Max a:

    Max(CityPopulations, Population)

  5. Ahora, seleccione la galería y cambie la propiedad Items a:

    Filter(CityPopulations, Population>= Slider1.Value)

  6. Ahora, solo veremos los registros que son superiores al valor del control deslizante seleccionado. Coloque la aplicación en modo de versión preliminar y mueva el control deslizante para verla en acción. Con el control deslizante completamente hacia la izquierda, verá todas las ciudades. A medida que mueve el control deslizante hacia la derecha, la lista se reduce para que solo permanezca Londres en la galería.

    Animación del filtro de control deslizante

Utilizar las funciones LookUp y Patch

  1. Inserte una Etiqueta de texto y cambie la propiedad Text a "City" y colóquela debajo del control deslizante.

  2. A continuación, inserte un control Desplegable y muévalo debajo de la etiqueta City.

  3. En la propiedad Items del menú desplegable, escriba lo siguiente:

    CityPopulations.City

  4. En la propiedad OnChange del menú desplegable, escriba lo siguiente:

    Set(varRecord, LookUp(CityPopulations, City=Self.SelectedText.City))

  5. Inserte otra Etiqueta de texto y actualice la propiedad Text a "Country".

  6. Inserte un control Entrada de texto y muévalo debajo de la etiqueta "Country".

  7. En la propiedad Default de Text Input, escriba varRecord.Country.

  8. Cambie el nombre de este control de entrada de texto a txtCountry.

  9. Repita los 4 pasos anteriores para agregar etiquetas de texto y controles de entrada de texto para City y Population, lo que actualizará las propiedades Default de las entradas de texto a varRecord.City y varRecord.Population, respectivamente. Cuando acabe, su pantalla debería parecerse a la siguiente imagen.

    Captura de pantalla de las entradas de texto y las nuevas etiquetas

  10. Ahora, agregue un botón a la pantalla y colóquelo debajo de la entrada de texto Population. Cambie la propiedad Text a "Enviar".

  11. Cambie la propiedad OnSelect del botón a lo siguiente:

    Patch(CityPopulations, varRecord, {Country: txtCountry.Text, City: txtCity.Text, Population: Value(txtPopulation.Text)})

    Nota

    Tenemos que ajustar txtPopulation.Text con Value() porque la entrada de texto devuelve una cadena de manera predeterminada y nuestra colección espera un número.

  12. Coloque la aplicación en modo de versión preliminar y seleccione un elemento de la galería. Cambie uno de los valores, pulse el botón "Submit" y verá que el elemento ha cambiado en su galería.

  13. Vuelva a poner la aplicación en modo de edición.

Agregar y quitar registros

  1. Seleccione nuestro botón "Submit" y cópielo. Péguelo tres veces.

  2. Cambie la propiedad Text de los tres nuevos botones a Clear, New y Remove.

  3. Coloque los botones en dos filas de dos botones alineados en su botón Submit original ("New" debajo de "Submit", "Clear" a la derecha de "Submit" y "Remove" debajo de "Clear").

  4. Use Ctrl + clic en los botones Clear y Remove. Cambie la propiedad DisplayMode a:

    If(IsBlank(varRecord), DisplayMode.Disabled, DisplayMode.Edit)

    Ahora, solo se podrá hacer clic en estos botones si hay un registro seleccionado.

  5. Use Ctrl + clic en el botón Remove para anular la selección. Actualice la propiedad OnSelect del botón Clear a lo siguiente:

    Set(varRecord, Blank())

    Ahora, puede borrar el registro seleccionado con este botón. Obtenga una versión preliminar de la aplicación y seleccione el botón Clear.

    Observe cómo los botones Clear y Remove aparecen deshabilitados.

  6. Con la aplicación nuevamente en modo de edición, seleccione el botón Remove. Actualice la propiedad OnSelect a:

    Remove(CityPopulations, varRecord)

  7. Por último, seleccione el botón New y cambie la propiedad OnSelect del botón a:

    Collect(CityPopulations, {Country: txtCountry.Text, City: txtCity.Text, Population: Value(txtPopulation.Text)})

  8. Coloque su aplicación en modo de versión preliminar e intente agregar un nuevo registro y eliminar un registro existente.

    Captura de pantalla del registro recién creado con el nuevo registro y el botón New resaltado

Ahora sabe cómo trabajar con más profundidad con tablas en Power Apps. Podría agregar funcionalidad adicional a las diferentes propiedades de sus botones para conseguir una mejor experiencia de usuario, pero esperamos que este ejercicio le haya dado una idea de lo que es posible.