Ejercicio: Usar variables y colecciones

Este laboratorio práctico le muestra cómo crear y utilizar funciones globales, contextuales y de colección.

1. Inicie sesión en Power Apps Maker Portal (make.powerapps.com).

2. Desde el panel de navegación izquierdo de la pantalla Inicio, seleccione + Crear, luego Aplicación en blanco y en la ventana emergente Crear en Aplicación de lienzo en blanco, seleccione Crear.

3. Ponga el nombre Ejercicio de colección a la aplicación, deje el formato como Tableta y seleccione Crear.

4. Después de unos minutos, aparecerá su nueva aplicación. Puede omitir el cuadro de diálogo de bienvenida (si aparece). En el panel Vista de árbol, busque y seleccione el elemento Aplicación y luego la propiedad OnStart.

   

5. Establezca la propiedad OnStart en esta fórmula, que es la que estamos usando para crear una colección de números de clientes y los números de factura asociados (basta con copiar y pegar en la barra de fórmulas fx):

   ClearCollect(colCustomer,
   {CustomerNumber: 7470, InvoiceNumber: "INV70817"},
   {CustomerNumber: 4259, InvoiceNumber: "INV29595"},
   {CustomerNumber: 8251, InvoiceNumber: "INV74302"},
   {CustomerNumber: 2338, InvoiceNumber: "INV35115"},
   {CustomerNumber: 1524, InvoiceNumber: "INV82337"},
   {CustomerNumber: 1530, InvoiceNumber: "INV82338"}
   );
   Set(varUserDisplayName, User().FullName)
   

6. Seleccione los puntos suspensivos (…) junto al elemento Aplicación y seleccione Ejecutar OnStart. Esto ejecuta la fórmula OnStart que acaba de especificar y rellena la colección colCustomer.

7. Para ver la colección, seleccione la pestaña Insertar (o + Insertar en la barra de comandos), agregue una Galería vertical y establezca su propiedad Items en colCustomer.

   Haga los cambios siguientes en su nueva Gallery1 mediante el panel Propiedades a la derecha de la pantalla:

   • Diseño: título y subtítulo

   • Largo: 650

   • Campos: cambie el Título para aparezca el CustomerNumber en el panel Datos (también puede seleccionar la etiqueta Título dentro de la galería y cambiar la propiedad Text a ThisItem.CustomerNumber)

   • Eliminar el icono NextArrow (seleccionarlo dentro de la galería)

8. En la galería, seleccione el lápiz de edición en un círculo o la etiqueta Título y use la pestaña Insertar para agregar un Icono. Busque y seleccione el icono de Papelera. Mueva el icono Papelera al lado derecho de la galería.

   Ahora la galería incluye el icono de Papelera.

   

9. Seleccione el Icono Papelera y la siguiente fórmula en la propiedad OnSelect:

   Remove(colCustomer,ThisItem)

10. Mantenga presionada la tecla Alt y seleccione el primer icono Papelera.

    Esto elimina la fila seleccionada de la colección. Aunque este proceso funciona, probablemente quiera que se vea un mensaje de advertencia para indicar que la fila se eliminará.

    Utilicemos una variable contextual para crear una advertencia emergente para informar al usuario sobre la eliminación pendiente y darle la posibilidad de cancelarla.

11. Primero cambie OnSelect del icono Papelera al valor siguiente:

    UpdateContext({varPopup:true})

12. Para crear la ventana emergente, seleccione la pantalla (fuera del control de la galería) y use Insertar para agregar un Rectángulo (puede escribir "rectángulo" en el cuadro de búsqueda en el menú Insertar para encontrarlo rápidamente).

13. Deje las propiedades del Rectángulo como sigue:

    • Nombre: rectangle_backgrd

    • Tamaño: 744 (ancho); 720 (largo)

    • Relleno: RGBA (166, 166, 166, 0,50)

    Coloque el rectángulo de forma que cubra su galería.

14. Agregue otro Rectángulo y actualice sus propiedades a:

    • Nombre: rectangle_foregrd

    • Tamaño: 744 (ancho); 348 (largo)

    • Relleno: RGBA (255, 255, 255, 1)

    • BorderThickness: 1

    Coloque este rectángulo para que quepa en la parte superior del otro rectángulo.

15. Seleccione Insertar>Etiqueta de texto.

16. Introduzca los cambios siguientes en las propiedades de la etiqueta Texto:

    • Nombre: lbl_popup

    • Tamaño de la fuente: 15

    • Grosor de fuente: Negrita

    • Alineación de texto: centrado

17. Establezca el Texto de lbl_popup en la siguiente fórmula:

    varUserDisplayName & "
    Please click Delete to confirm deletion of Invoice#" & " " & Gallery1.Selected.InvoiceNumber
    

18. Seleccione la pestaña Insertar > Botón y asigne un nombre al botón: button_Delete; establezca su propiedad Text en Eliminar.

19. Establezca la propiedad Delete ButtonOnSelect en el valor siguiente:

    Remove(colCustomer,LookUp(colCustomer,CustomerNumber=Gallery1.Selected.CustomerNumber));
    UpdateContext({varPopup:false})
    

20. Seleccione Insertar > Botón y asigne un nombre al nuevo botón: button_Cancel; establezca su propiedad Text en Cancelar.

21. Establezca la propiedad OnSelect del botón Cancelar en:

    UpdateContext({varPopup:false})

22. Organice los nuevos controles que creó sobre Gallery1 tal como se indica:

    

23. Pasemos ahora a seleccionar todos estos controles juntos para poder agruparlos. Mientras presiona la tecla Ctrl, seleccione los controles siguientes:

    • rectangle_backgrd

    • rectangle_foregrd

    • lbl_popup

    • button_Delete

    • button_Cancel

24. Una vez los haya seleccionado todos, haga clic con el botón derecho y seleccione Grupo. Establezca la propiedad Visible de Group1 en:

    varPopup

    Esto hará que desaparezcan todos ellos de la pantalla. Si no es así, mantenga presionada la tecla Alt y seleccione el botón Cancelar.

    Ha creado un cuadro emergente que elimina de la galería al cliente seleccionado.

    Vamos a probar la función Delete.

25. Mantenga presionada la tecla Alt y seleccione el icono Papelera para la factura INV29595.

26. Seleccione el botón Eliminar; INV29595 se eliminará de la galería y la ventana emergente desaparecerá.

27. Ahora mantenga presionada la tecla Alt de nuevo y seleccione el icono Papelera de la factura INV74302.

28. Esta vez, debe seleccionar el botón Cancelar. La ventana emergente se cerrará e INV74302 permanecerá en la galería.

Hemos creado una colección dinámica, una variable global y una ventana emergente que utiliza una variable contextual.