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, prestando servicios y vendiendo equipos 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 el 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. Comience en el entorno titulado Dive Center App, donde ya se encuentran las tablas de Dataverse de la aplicación.

  1. Desde la barra de comandos de la pantalla del entorno, seleccione Nueva > Aplicación > Aplicación de lienzo para crear una nueva aplicación de lienzo denominada Solicitud de servicio.

    Captura de pantalla de una solución de Dataverse, con la opción de menú Nueva aplicación de lienzo resaltada

    Seleccione Teléfono como el formato de la aplicación de lienzo. Después, seleccione Crear.

    Captura de pantalla de la nueva aplicación de lienzo del formulario en blanco; el nombre de la aplicación, el formato de teléfono y el botón Crear se han resaltado

  2. En el estudio de lienzo de Power Apps, inserte una imagen para usarla como logotipo principal.

  3. 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.

  4. 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.

  5. 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. Puede hacer doble clic en cada control en la Vista de árbol para cambiarle el nombre, o usar los puntos suspensivos junto al control y seleccionar Cambiar nombre.

    Captura de pantalla del estudio de la aplicación de lienzo; se ha resaltado la opción Cambiar nombre para los componentes de la pantalla

  6. Para crear la pantalla de registro, seleccione Duplicar pantalla en la pantalla de inicio y cambie el nombre de la nueva pantalla a "CHECKIN".

    Captura de pantalla del estudio de la aplicación de lienzo; se ha resaltado la opción Duplicar pantalla

  7. 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.

  8. Inserte un Formulario de edición, conecte el origen de datos a la tabla Solicitudes de servicio de Dataverse, establezca la propiedad Default mode del formulario en Nuevo y cambie el nombre a frmCheckIn.

    Captura de pantalla del estudio de la aplicación de lienzo; el Formulario de edición y la propiedad data source se han resaltado

  9. Mueva y cambie el tamaño del formulario para usar el espacio de la pantalla y seleccione la opción Editar campos en el panel Propiedades para poder modificar los campos del formulario.

  10. Copilot sugiere automáticamente qué campos deben incluirse y los ordena en consecuencia, pero vamos a organizarlos para el proceso de registro arrastrándolos y soltándolos en el panel Campos de la siguiente manera, de arriba abajo (consulte la siguiente imagen): Nombre, Cliente, Equipo, Detalles y Finalización estimada. (Puede colocar cualquier campo opcional debajo de estos campos).

    Si no ve estos campos en su formulario, seleccione el botón + Agregar campo para buscarlos y agregarlos.

    Captura de pantalla del estudio de la aplicación de lienzo; se ha resaltado la opción Agregar campo de un control del formulario

    Tendrá que agregar datos a la tabla Equipo de buceo, y quizá también a la tabla Contactos, para ver los resultados en el cuadro combinado dentro de la sección Equipo y Cliente del formulario.

  11. Compruebe los campos de control del cuadro combinado para las tarjetas de cliente y equipo en el formulario. Es posible que no muestren los datos correctos, por lo que quizá deba desbloquear estas tarjetas y ajustar algunas cosas. En el cuadro combinado Cliente, actualice la propiedad DisplayFields de modo que muestre [fullname]; para el cuadro combinado Equipo, ponga la propiedad DisplayFields en ["msft_name"]:

  12. Para proporcionar funcionalidad de actualización y navegación a los usuarios, agregue dos botones en la parte inferior de la pantalla del lienzo. Actualice su texto a "GUARDAR" y "VOLVER" y cámbieles el nombre a btnSaveCheckIn y btnBackCheckIn respectivamente.

    Captura de pantalla del estudio de la aplicación de lienzo; se han resaltado los controles Botones y sus propiedades

  13. 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);

  14. 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);

  15. 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);

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

    Exit();

  17. 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. Cambie el botón "GUARDAR" para que diga "PAGAR".

    2. Edite los campos frmCheckOut para eliminar el campo Nombre.

    3. Agregue o mueva el campo opcional Archivos adjuntos para dejarlo justo debajo del campo Finalización estimada.

    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 el pago, agregue una entrada Desplegable en la parte superior de la pantalla y haga lo siguiente:

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

    2. Coloque el menú desplegable sobre el formulario frmCheckOut (cambie el tamaño de su formulario según corresponda).

    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 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);

  7. 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 REGISTRAR 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 REGISTRAR a la creación del nuevo equipo de buceo, desbloquee las propiedades de la tarjeta de datos del campo Equipo del formulario frmCheckIn en la pantalla REGISTRAR. 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 EQUIPOBUCEO, introduzca el siguiente script de PowerFx en la propiedad OnSelect del icono Agregar:

    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. Compruebe que ha agregado 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 un contenedor a su pantalla PAGAR y estire el contenedor para que se ajuste a toda la pantalla. Ponga la propiedad Fill del contenedor a RGBA(149,149,149,0.4)

  2. Agregue las siguientes etiquetas al control de contenedor

    Nombre Texto Posición/tamaño Otra información
    lbl_SignatureCapture <empty> X: 0
    Y: 338
    Ancho: 640
    Largo: 384    		 Relleno: RGBA (255, 255, 255, 1)
    lbl_SignatureLine <empty> X: 0
    Y: 587
    Ancho: 640
    Largo: 13    		 Fill: RGBA(0,0,0,1)
    lbl_CustomerSignature Firma del cliente X: 21
    Y: 600
    Ancho: 560
    Largo: 70    		 Tamaño de la fuente: 21
    lbl_OK Aceptar X: 388
    Y: 599
    Ancho: 60
    Largo: 70    		 Tamaño de la fuente: 21
    lbl_Cancel Cancelar X: 492
    Y: 599
    Ancho: 122
    Largo: 70    		 Tamaño de la fuente: 21

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

    Captura de pantalla del estudio de la aplicación de lienzo; el control Text label y los múltiples controles de etiqueta de una pantalla se han resaltado

  3. Agregue los siguientes controles Iconos al contenedor en la pantalla PAGAR. Aparecerán justo a la izquierda de las etiquetas Cancelar y Aceptar y se podrán seleccionar.

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

  4. Para capturar la firma del cliente, agregue un control Entrada manuscrita al contenedor. 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 control Entrada manuscrita y sus propiedades se han resaltado

  5. Vamos a agregar una variable para mostrar y ocultar el contenedor con 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);

  6. Para mostrar y ocultar el contenedor con los controles relacionados con la firma según el estado de la variable flgSignature, configure la propiedad Visible del contenedor a lo siguiente:

    flgSignature

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

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

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

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

  9. 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, como Nombre, Apellido, Correo electrónico y Teléfono móvil.

    Captura de pantalla del estudio de la aplicación de lienzo; se han resaltado 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.

Siguientes pasos

Ya ha aprendido a crear una aplicación de lienzo para Dive Center con Dataverse como el origen de datos. A continuación, aprenderá a crear una aplicación basada en modelo.