Laboratorio de prácticas 3: Crear una aplicación de lienzo

En este laboratorio, diseñará y compilará una aplicación de lienzo desde cero, agregará un origen de datos y una galería.

Aprendizaje

  • Cómo crear una aplicación de lienzo con una galería vinculada a un origen de datos
  • Procedimientos para dar formato a campos con fórmulas de Power Fx

Pasos de alto nivel del laboratorio

  • Crear una aplicación de lienzo desde cero
  • Adición de un origen de datos a la aplicación
  • Adición de una galería a la aplicación
  • Configuración de los campos en la galería

Requisitos previos

  • Debe de haber completado la práctica Laboratorio 2: Modelo de datos

Pasos detallados

Ejercicio 1: Crear una aplicación de lienzo

Tarea 1.1: Crear la aplicación

  1. Vaya al portal de Power Apps Maker https://make.powerapps.com.

  2. Asegúrese de que está en el entorno Dev One.

  3. Seleccione la pestaña + Crear en el menú de navegación de la izquierda.

  4. Seleccione el icono Aplicación en blanco en Inicio desde.

  5. Seleccione Crear en el icono Aplicación de lienzo en blanco.

    Captura de pantalla de una creación en blanco.

  6. Escriba Booking Request app para Nombre de aplicación.

  7. Seleccione Tableta para Formato.

    Captura de pantalla del nuevo nombre de la aplicación.

  8. Seleccione Crear.

  9. Espere a que se compile la aplicación.

  10. Seleccione Guardar en la parte superior derecha de Power Apps Studio.

Tarea 1.2 - Agregar origen de datos

  1. En el menú de creación de aplicaciones, seleccione Datos.

    Captura de pantalla del panel de datos.

  2. Seleccione el símbolo de intercalación desplegable junto a Agregar datos y escriba Booking en Buscar.

    Captura de pantalla de la selección del origen de datos.

  3. Seleccione Solicitudes de reserva Tabla de Microsoft Dataverse.

Tarea 1.3: Configurar la pantalla principal

  1. En el menú de creación de aplicaciones, seleccione Vista de árbol.

  2. Seleccione Screen1 en la vista de árbol, después, los puntos suspensivos (…) y, luego, Cambiar nombre.

  3. Escriba MainScreen.

  4. En el menú de creación de aplicaciones, seleccione Insertar (+).

  5. Seleccione Rectángulo.

  6. Arrastre el rectángulo a la parte superior izquierda de la pantalla.

  7. En el menú de creación de aplicaciones, seleccione Vista de árbol.

  8. Cambie el nombre del rectángulo a HeaderRect.

  9. Establezca las propiedades del rectángulo en la barra de fórmulas de la manera siguiente:

    1. X=0
    2. Y=0
    3. Altura=80
    4. Ancho=Parent.Width

  10. En el menú de creación de aplicaciones, seleccione Insertar (+).

  11. Seleccione Etiqueta de texto.

  12. Arrastre la etiqueta a la parte superior izquierda de la pantalla.

  13. En el menú de creación de aplicaciones, seleccione Vista de árbol.

  14. Cambie el nombre de la etiqueta a HeaderLabel.

  15. Establezca las propiedades de la etiqueta en la barra de fórmulas de la manera siguiente:

    1. X=0
    2. Y=0
    3. Altura=80
    4. Ancho=Parent.Width
    5. Alineación=Align.Center
    6. Tamaño=24
    7. Texto="Booking Request"
    8. Color=Color.White

    Captura de pantalla de la pantalla principal con encabezado.

  16. Seleccione Guardar en la parte superior derecha de Power Apps Studio.

Tarea 1.4: Agregar una galería

  1. En el menú de creación de aplicaciones, seleccione Insertar (+).

  2. Seleccione Galería vertical.

    Captura de pantalla de la adición de una galería.

  3. Seleccione Solicitudes de reserva para el origen de datos.

    Captura de pantalla de las propiedades de la galería.

  4. En la pestaña Propiedades, en Diseño, seleccione Título, subtítulo y cuerpo.

  5. Seleccione 7 seleccionados junto a Campos.

  6. Seleccione Costo para Cuerpo1.

  7. Seleccione Decisión para Subtítulo2.

  8. Seleccione Nombre de la mascota para Título2.

    Captura de pantalla de los campos de la galería

  9. Cerrar el panel Datos.

  10. En el menú de creación de aplicaciones, seleccione Vista de árbol.

  11. Cambie el nombre de la galería a BookingRequestList.

  12. Establezca las propiedades de la galería en la barra de fórmulas de la manera siguiente:

    1. X=0
    2. Y=80
    3. Altura=575
    4. Ancho=250

Tarea 1.5: dar formato al campo de moneda

  1. En el menú de creación de aplicaciones, seleccione Vista de árbol.

  2. Expanda la galería BookingRequestList.

  3. Seleccione Cuerpo1.

    Captura de pantalla del campo de cuerpo seleccionado.

  4. Establezca la propiedad Text de la barra de fórmulas en la fórmula:

     Text(Value(ThisItem.Cost), "$#,##0.00")

  5. Seleccione Guardar en la parte superior derecha de Power Apps Studio.

  6. Seleccione el botón <- Atrás en la parte superior izquierda de la barra de comandos y seleccione Salir para salir de la aplicación.