Ejercicio: crear la aplicación de lienzo Dive Center

  • 18 minutos

En este ejercicio debe aplicar los conocimientos adquiridos mediante la creación de una aplicación de lienzo de Dive Center.

Escenario

Trabaja en un centro de buceo. Usted se encarga de administrar el entorno de Dataverse de la organización.

Los empleados del departamento de servicio requieren una aplicación Power Apps que les permita continuar con los procesos de registro y pago para los clientes que traigan equipos de buceo que necesitan repararse.

Para respaldar estos procesos, los empleados requieren las siguientes características:

  • Una lista de clientes para los servicios de reparación

  • La capacidad de almacenar registros

  • Una lista de equipos de buceo para identificar el tipo de equipo para registrar

Los usuarios han realizado otras solicitudes y es posible que también desee incluir las siguientes características:

  • Habilitar la capacidad para proceder con el pago de las solicitudes de servicio completadas.

  • Crear un nuevo equipo de buceo con una imagen, el color y el tipo de equipo especificado.

  • Capturar imágenes y el tipo de servicio en el momento del registro.

  • Capturar una firma para completar un pago.

  • Crear nuevos clientes.

Ejercicio

Requisito previo: la solución y el origen de datos al que se hace referencia en este ejercicio se explican en la unidad anterior Ejercicio: Preparar la aplicación de lienzo Dive Center.

En un entorno de Dataverse que incluye una solución donde se define el origen de datos para la aplicación de lienzo, siga estos pasos:

  1. Cree una nueva aplicación de lienzo denominada Dive Center App.

    Captura de pantalla de una solución de Dataverse. El foco está en la opción de menú Nueva aplicación de lienzo.

    Seleccione teléfono como el formato de la aplicación de lienzo.

    Captura de pantalla de la nueva aplicación de lienzo del formulario en blanco. El foco está en el nombre de la aplicación, el formato de teléfono y el botón Crear.

  2. En el estudio de lienzo de Power Apps, inserte una imagen para usarla como logotipo principal. Posicione y cambie el tamaño de la imagen según el estado de la pantalla disponible y otros componentes para incluirla en la aplicación. También puede ajustar el fondo de la pantalla al color del logotipo mediante la propiedad Fill.

    Captura de pantalla del estudio de la aplicación de lienzo. El foco está en el control Imagen y sus propiedades.

  3. Para facilitar la navegación a las pantallas siguientes, agregue tres botones para Registrar, Pagar y Salir. Defina colores, posiciones y tamaño en función de la experiencia de usuario prevista.

    Captura de pantalla del estudio de la aplicación de lienzo. El foco está en el control Botón y sus propiedades.

  4. Cambie el nombre de los controles y pantallas predeterminados con nombres que representen su uso. Este es el procedimiento recomendado para identificarlos de forma más sencilla.

    Captura de pantalla del estudio de la aplicación de lienzo. El foco está en la opción Cambiar nombre para los componentes de la pantalla.

  5. Para crear la pantalla de registro, seleccione Duplicar pantalla en la pantalla de inicio a la que cambió el nombre.

    Captura de pantalla del estudio de la aplicación de lienzo. El foco está en la opción Duplicar pantalla.

  6. Elimine los botones de la nueva pantalla y luego cambie el tamaño de la imagen principal para dejar espacio para el formulario que se agrega para el proceso de registro. Cambie el nombre de los componentes con nombres relevantes para su uso.

    Captura de pantalla del estudio de la aplicación de lienzo. El foco está en la opción Eliminar de los controles y en las propiedades de la imagen.

  7. Agregue el formulario de edición de registro, cámbiele el nombre frmCheckIn y conecte el origen de datos a la tabla Solicitudes de servicio. Establezca la propiedad Default mode del formulario en New.

    Captura de pantalla del estudio de la aplicación de lienzo. El foco está en la opción Editar formulario y la propiedad Data Source del control.

  8. En el formulario, elimine los campos que no sean obligatorios.

    Captura de pantalla del estudio de la aplicación de lienzo. El foco está en la propiedad Edit fields y la opción Eliminar de un campo de un formulario.

  9. Agregue campos al formulario necesario para el proceso de registro y organícelos en una secuencia lógica para los usuarios de la aplicación. Establezca la posición y el tamaño del formulario para que todos los campos sean visibles.

    Captura de pantalla del estudio de la aplicación de lienzo. El foco está en la opción Agregar campo de un control del formulario.

  10. Para proporcionar funcionalidad de actualización y navegación a los usuarios, agregue dos botones en la parte inferior de la pantalla del lienzo.

    Captura de pantalla del estudio de la aplicación de lienzo. El foco está en los controles Buttons y sus propiedades.

  11. Para actualizar el formulario cuando se selecciona el botón btnSaveCheckIn y permitir que se procese un nuevo registro, introduzca el siguiente script de PowerFx en la propiedad OnSelect del botón:

    SubmitForm(frmCheckIn); NewForm(frmCheckIn);

  12. Para volver a HOME SCREEN cuando se selecciona el botón btnBackCheckIn, introduzca el siguiente script de PowerFx en la propiedad OnSelect del botón:

    Navigate('HOME SCREEN',ScreenTransition.Fade);

  13. Para dirigirse a la pantalla CHECKIN de HOME SCREEN cuando se selecciona el botón btnCheckIn de HOME SCREEN, introduzca el siguiente script de PowerFx en la propiedad OnSelect del botón:

    Navigate(CHECKIN,ScreenTransition.Fade);

  14. Para permitir que los usuarios cierren la aplicación cuando se seleccione el botón btnExit de HOME SCREEN, introduzca el siguiente script de PowerFx en la propiedad OnSelect del botón:

    Exit();

  15. En este momento, puede guardar y reproducir la aplicación para probar la navegación entre las pantallas y la creación de nuevas entradas de registro.

Características opcionales

En la siguiente sección se proporcionan los pasos necesarios para continuar con las características opcionales de la aplicación. Algunas de estas características requieren tablas y columnas definidas en la unidad Ejercicio: Preparar la aplicación de lienzo Dive Center que hemos visto anteriormente en este módulo.

Característica para realizar el pago

Para proporcionar la funcionalidad de pago a los usuarios de la aplicación, siga estos pasos:

  1. Cree un duplicado de la pantalla CHECKIN y cámbiele el nombre a CHECKOUT. Cambie el nombre de los componentes de la pantalla y luego realice las siguientes acciones:

    1. Edite las propiedades frmCheckOut para eliminar el campo Nombre.

    2. Agregue el campo opcional Archivos adjuntos.

    3. Establezca el tamaño y la posición para asignar espacio para un componente adicional encima del formulario.

    4. Establezca la opción Modo predeterminado en Vista para que el formulario se muestre como Solo lectura.

    Captura de pantalla del estudio de la aplicación de lienzo. El foco está en las propiedades de un control de formulario y los componentes a los que se les ha cambiado el nombre de una pantalla.

  2. Para proporcionar una lista de solicitudes de servicio que están disponibles para su pago, agregue una entrada Desplegable a la pantalla y luego realice las siguientes acciones:

    1. Cambie el nombre del menú desplegable a ddServiceRequestForCheckOut.

    2. Establezca el tamaño y la posición para que estén encima del formulario frmCheckOut.

    3. Establezca la propiedad Items en la tabla Solicitudes de servicio.

    4. Establezca la propiedad Value para que sea la columna Nombre.

    Captura de pantalla del estudio de la aplicación de lienzo. El foco está en el control Desplegable y sus propiedades.

  3. Para mostrar la solicitud de servicio seleccionada en el control desplegable, introduzca el siguiente script de PowerFx en la propiedad Item del formulario frmCheckOut:

    ddServiceRequestForCheckOut.Selected

  4. Para mostrar únicamente la lista de solicitudes de servicio que están disponibles para su pago, introduzca el siguiente script de PowerFx en la propiedad Items de la entrada desplegable:

    Filter('Service Requests',IsBlank('Actual Completion'))

  5. De este modo, la solicitud de servicio aparecerá como pagada. Cuando se seleccione el botón btnSaveCheckOut, introduzca el siguiente script de PowerFx en la propiedad OnSelect del botón:

    Patch('Service Requests',ddServiceRequestForCheckOut.Selected,{'Actual Completion':Now()});

  6. Para volver a HOME SCREEN cuando se selecciona el botón btnBackCheckOut, introduzca el siguiente script de PowerFx en la propiedad OnSelect del botón:

    Navigate('HOME SCREEN',ScreenTransition.Fade);

  7. Para dirigirse a la pantalla CHECKOUT de HOME SCREEN cuando se selecciona el botón btnCheckOut de HOME SCREEN, introduzca el siguiente script de PowerFx en la propiedad OnSelect del botón:

    Navigate(CHECKOUT,ScreenTransition.Fade);

  8. En este momento, puede guardar y reproducir la aplicación para probar la navegación entre las pantallas y el proceso de pago.

Característica para crear equipo de buceo

Para permitir a los usuarios crear nuevos equipos de buceo con color, tipo de equipo y una imagen, siga estos pasos:

  1. Cree un duplicado de la pantalla CHECKIN y cámbiele el nombre a DIVEGEAR. Cambie el nombre de los componentes de la pantalla y luego realice las siguientes acciones:

    1. Edite las propiedades frmGear para usar la tabla Equipo de buceo como origen de datos.

    2. Seleccione los diferentes campos que desea proporcionar a los usuarios, incluido el campo Imagen.

    Captura de pantalla del estudio de la aplicación de lienzo. El foco está en las propiedades del control de formulario y los componentes a los que se les ha cambiado el nombre de la pantalla.

  2. Para crear el equipo de buceo cuando se selecciona el botón btnSaveGear y permitir que se cree un nuevo equipo de buceo, introduzca el siguiente script de PowerFx en la propiedad OnSelect del botón:

    `SubmitForm(frmGear); NewForm(frmGear); Refresh ('Dive Gear');

  3. Para volver a la pantalla CHECKIN cuando se selecciona el botón btnBackGear, introduzca el siguiente script de PowerFx en la propiedad OnSelect del botón:

    Navigate(CHECKIN,ScreenTransition.Fade);

  4. Para navegar desde CHECKIN al nuevo equipo de buceo que ha creado, desbloquee las propiedades de la tarjeta de datos del campo Tipo de servicio del formulario frmCheckIn. Cambie el tamaño del cuadro combinado de la tarjeta de datos para proporcionar espacio para insertar un icono Agregar junto a él.

    Captura de pantalla del estudio de la aplicación de lienzo. El foco está en el control Icons y sus propiedades.

  5. Para dirigirse a la pantalla DIVEGEAR, introduzca el siguiente script de PowerFx en la propiedad OnSelect del icono:

    Navigate(DIVEGEAR,ScreenTransition.Fade);

  6. Para asegurarse de que la lista de equipos se actualice cuando se cree un equipo nuevo, cambie la propiedad Data Source del cuadro combinado a la tabla Equipo de buceo.

    Captura de pantalla del estudio de la aplicación de lienzo. El foco está en la propiedad Data Source de un cuadro combinado.

  7. En este momento, puede guardar y reproducir la aplicación para probar la navegación entre las pantallas y la creación de equipo de buceo nuevo.

Característica para capturar imágenes y tipo de servicio

Para permitir que los usuarios capturen imágenes y el tipo de servicio en el momento de realizar el pago, siga estos pasos:

  1. Agregue Tipo de servicio, Archivos adjuntos y Fecha de aceptación como campos para el formulario frmCheckin.

    Captura de pantalla del estudio de la aplicación de lienzo. El foco está en los campos de un formulario.

  2. Para establecer el valor Fecha de aceptación en la fecha y hora en las que se crea la solicitud de servicio, desbloquee la tarjeta de datos Fecha de aceptación y luego configure la propiedad Update con el siguiente script de PowerFx:

    Now()

  3. En este momento, puede guardar y reproducir la aplicación para probar la adición de imágenes como archivos adjuntos a la solicitud de servicio.

Característica para capturar firma

Para permitir que los usuarios capturen una firma para completar un pago, siga estos pasos:

  1. Agregue los siguientes controles Text label a la pantalla CHECKOUT.

    Nombre Texto Posición/tamaño Otra información
    lbl_greyout <empty> X: 0
    Y: 0
    Width: 640
    Height: 1136    		 Fill: RGBA(149,149,149,0.4)
    lbl_SignatureCapture <empty> X: 0
    Y: 338
    Width: 640
    Height: 384    		 Fill: RGBA(255, 255, 255, 1)
    lbl_SignatureLine <empty> X: 0
    Y: 587
    Width: 640
    Height: 13    		 Fill: RGBA(0,0,0,1)
    lbl_CustomerSignature Firma del cliente X: 21
    Y: 600
    Width: 560
    Height: 70    		 Font size: 21
    lbl_OK Aceptar X: 388
    Y: 599
    Width: 60
    Height: 70    		 Font size: 21
    lbl_Cancel Cancelar X: 492
    Y: 599
    Width: 122
    Height: 70    		 Font size: 21

    El resultado debe ser similar a la siguiente captura de pantalla.

    Captura de pantalla del estudio de la aplicación de lienzo. El foco está en el control Text label y los múltiples controles de etiqueta de una pantalla.

  2. Agregue los siguientes controles Icons a la pantalla CHECKOUT.

    Nombre Icono Posición/tamaño Color
    ico_Cancel Cancelar X: 448
    Y: 615
    Width: 35
    Height: 39    		 RGBA(255,0,0,1)
    ico_OK Comprobar X: 346
    Y: 615
    Width: 35
    Height: 39    		 RGBA(51,176,75,1)

    El resultado debe ser similar a la siguiente captura de pantalla.

    Captura de pantalla del estudio de la aplicación de lienzo. El foco está en los iconos agregados.

  3. Para capturar la firma del cliente, agregue un control Entrada manuscrita. Cámbiele el nombre a PenCustomerSignature y establezca las propiedades de Mostrar controles en Desactivado. Establezca la posición y el tamaño para que esté encima del control lbl_SignatureLine.

    Captura de pantalla del estudio de la aplicación de lienzo. El foco está en el control Entrada manuscrita y sus propiedades.

  4. Se utiliza una variable para mostrar y ocultar los controles relacionados con la firma según la etapa del proceso. Reemplace la propiedad actual OnSelect del botón btnSaveCheckOut con el siguiente script de PowerFx:

    Set(flgSignature, true);

  5. Para mostrar y ocultar los controles relacionados con la firma según el estado de la variable flgSignature, configure la propiedad Visible con el siguiente script de PowerFx:

    flgSignature

  6. Para proporcionar la opción de cancelar la captura de firma y volver a la pantalla CHECKOUT, configure la propiedad OnSelect de icoCancel con el siguiente script de PowerFx:

    Reset(PenCustomerSignature);Set(flgSignature, false);

  7. Para actualizar la solicitud de servicio con la firma capturada y completar el proceso de pago, configure la propiedad OnSelect de icoOK con el siguiente script de PowerFx:

    Patch('Service Requests',ddServiceRequestForCheckOut.Selected,{'Actual Completion':Now(),'Customer Signature':PenCustomerSignature.Image}); Reset(PenCustomerSignature); Set(flgSignature, false);

  8. En este momento, puede guardar y reproducir la aplicación para probar la captura de la firma al realizar el pago de una solicitud de servicio.

Característica para crear nuevos clientes

Para permitir que los usuarios creen nuevos clientes en la pantalla CHECKIN, siga estos pasos:

  1. Cree un duplicado de la pantalla CHECKIN y cámbiele el nombre a CUSTOMER. Cambie el nombre de los componentes de la pantalla y siga estos pasos:

    1. Edite las propiedades frmCustomer para utilizar la tabla Contactos como Origen de datos

    2. Seleccione los diferentes campos que desea proporcionar a los usuarios.

    Captura de pantalla del estudio de la aplicación de lienzo. El foco está en las propiedades del control de formulario y los componentes a los que se les ha cambiado el nombre de la pantalla.

  2. Para crear el cliente cuando se selecciona el botón btnSaveCustomer y permitir que se creen nuevos clientes, introduzca el siguiente script de PowerFx en la propiedad OnSelect del botón:

    SubmitForm(frmCustomer); NewForm(frmCustomer); Refresh(Contacts);

  3. Para volver a la pantalla CHECKIN cuando se selecciona el botón btnBackCustomer, introduzca el siguiente script de PowerFx en la propiedad OnSelect del botón:

    Navigate(CHECKIN,ScreenTransition.Fade);

  4. Para navegar desde CHECKIN a este, desbloquee las propiedades de la tarjeta de datos del campo Cliente del formulario frmCheckIn. Cambie el tamaño del cuadro combinado de la tarjeta de datos para proporcionar espacio para insertar un icono Agregar junto a él.

    Captura de pantalla del estudio de la aplicación de lienzo. El foco está en el control Icons y sus propiedades.

  5. Para dirigirse a la pantalla CUSTOMER, introduzca el siguiente script de PowerFx en la propiedad OnSelect del icono:

    Navigate(CUSTOMER,ScreenTransition.Fade);

  6. Para asegurarse de que la lista de clientes se actualice cuando se cree un cliente, cambie la propiedad Data Source del cuadro combinado a la tabla Contactos.

    Captura de pantalla del estudio de la aplicación de lienzo. El foco está en la propiedad Data Source de un cuadro combinado.

  7. En este momento, puede guardar y reproducir la aplicación para probar la navegación entre las pantallas y la creación de equipo de buceo nuevo.

Pasos siguientes

Ahora ha aprendido cómo crear una aplicación de lienzo de Dive Center. A continuación, aprenderá a crear una aplicación basada en modelo.