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 principal, seleccione Aplicaciones en el panel de navegación del lado izquierdo. Luego, seleccione + Nueva aplicación en la parte superior de la pantalla. Seleccione Comenzar con un diseño de página y seleccione Aplicación de lienzo en blanco.

  3. Seleccione Guardar en la esquina superior izquierda de la pantalla y póngale un nombre a la aplicación.

  4. Con Screen1 seleccionado en la Vista de árbol, seleccione la pestaña + Insertar. Añada un botón y configure la propiedad OnSelect con la siguiente 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 mientras hace clic en el control Botón. Esto creará una colección llamada "CityPopulations" y almacenará todos los registros anteriores en la colección. Cambie la propiedad Text del botón a "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 del tipo Control deslizante y colóquelo debajo de la etiqueta que acaba de crear. 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 lo siguiente:

    Filter(CityPopulations, Population>= Slider1.Value)

  6. Ahora, en esa galería, solo verá los registros con una población mayor o igual que el 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 mueva el control deslizante hacia la derecha, la lista se reducirá hasta que solo quede Londres (la ciudad con el mayor número de población) 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 "Submit".

  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.