Ejercicio: Diseño de páginas adicionales y correo electrónico en Power Apps

  • 10 minutos

En este módulo, diseñará algunas páginas adicionales para admitir las características de realidad mixta. Estas páginas llevan a cabo algunas funciones específicas necesarias para que la aplicación se comporte correctamente. También usará la funcionalidad de correo electrónico de Power Apps para enviar los detalles del pedido a los clientes.

Crear la página de notas

El usuario puede tomar fotos durante la sesión Ver en MR y mostrarlas a través de una galería. En la página Notas, puede almacenar notas textuales e imágenes capturadas durante la sesión de View in MR.

  1. Cree dos nuevas pantallas en blanco y cámbielas Product_notes y Carpet_notes.

    Captura de pantalla de las nuevas pantallas para las notas.

  2. Diseñe la página Product_notes : seleccione la lista desplegable Entrada y, a continuación, seleccione Entrada de texto. Cambie el nombre TextInput_products.

    Captura de pantalla de la adición de entrada de texto.

  3. Seleccione Galería>horizontal para incluir un tipo horizontal de galería. Almacenarás las fotos tomadas durante la sesión de Visualización en MR en esta galería. Cambie el nombre de la galería View_products.

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

  4. Coloque la galería en la otra parte de la pantalla. Conserve solo la imagen eliminando el subtítulo y el título. Ampliar la imagen.

    Captura de pantalla de solo la imagen de la galería.

  5. Seleccione la galería y configure la propiedad Items agregando la siguiente línea:

    ViewInMR1.Photos

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

    Todas las imágenes tomadas en la sesión view in MR se almacenan en esta galería para futuras referencias.

  6. Vamos a insertar una etiqueta en la parte superior de la pantalla. Seleccione la opción Etiqueta y después Alinear en el centro. Personalice la posición, el color y la presentación de texto según sus necesidades. Cambie el nombre Notes_label.

    Captura de pantalla de la inserción de la etiqueta.

  7. Colocaremos un icono Atrás sobre la etiqueta agregada anteriormente para ayudar al usuario a navegar a la página principal cuando sea necesario. Para agregar el icono Atrás , en la pestaña Insertar , expanda la lista desplegable Iconos y, a continuación, seleccione el icono Atrás.

    Captura de pantalla de la adición del icono de retroceso.

  8. Coloque el icono Atrás correctamente y configure la propiedad OnSelect agregando lo siguiente:

    Navigate(Product_details,ScreenTransition.Cover)

    Captura de pantalla de positioned y OnSelect.

  9. Cambie a la pantalla Product_details y agregue un icono de nota en la lista desplegable Iconos de la pestaña Insertar .

    Captura de pantalla de la adición del icono de nota.

  10. Configure la propiedad OnSelect del icono Nota agregando la siguiente línea:

    Navigate(Product_notes,ScreenTransition.CoverRight)

    Captura de pantalla de OnSelect para nota.

  11. Replique el mismo procedimiento para Notes_carpets.

    Nota:

    No incluiremos la característica Ver en MR para la categoría Alfombras . Para la página Notes_carpets, excluya la adición del Control de galería para almacenar las fotos tomadas durante la sesión de Ver en realidad mixta.

    Sugerencia

    Puede probar la aplicación presionando la tecla F5 en el teclado o seleccionando el botón Reproducir en la esquina superior derecha de Power Apps Studio.

Crear página de resumen de pedidos

  1. Agregue botones a las pantallas Product_details y Carpet_details . Cambie el nombre de los botones Order_product y Order_carpet. Cambie el texto para mostrar de los botones a Pedido.

    Captura de pantalla del botón Agregar pedido.

  2. Cree dos nuevas pantallas en blanco y cámbielas Order_products y Order_carpets.

    Captura de pantalla de la adición de nuevas pantallas.

  3. Seleccione la pantalla Product_details y configure la propiedad OnSelect del botón Order de la siguiente manera:

    Navigate('Order_products',ScreenTransition.Cover)

    Recorte de pantalla de la configuración de OnSelect del botón Pedido.

  4. Siga el mismo procedimiento para la pantalla Carpet_details.

  5. En la página Order_products , inserte etiquetas Product, Price, Color y Notes y cambie su nombre en consecuencia.

    Captura de pantalla de etiquetas en Order_sofas.

  6. Inserte etiquetas vacías junto al Producto, Precio, Color y Notas , como se muestra en la ilustración.

    Captura de pantalla de etiquetas vacías en Order_sofas.

  7. Configure la propiedad Text de estas etiquetas vacías de la siguiente manera:

    • Producto:

      Gallery_products.Selected.Name

      Captura de pantalla de la configuración del texto del producto.

    • Precio:

      Gallery_products.Selected.Price

      Captura de pantalla de la configuración del texto de precio.

    • Color:

      Gallery_products.Selected.Color

      Captura de pantalla de la configuración del texto de color.

    • Notas:

      TextInput_products.Text

      Captura de pantalla de la configuración del texto de notas.

  8. Agregue otra etiqueta en la parte superior y cambie su texto para mostrar a Resumen del pedido. Cambie el tamaño de fuente y el tipo de letra según sus necesidades.

    Captura de pantalla de la adición de la etiqueta Resumen de pedidos.

  9. Expanda la lista desplegable Galería y seleccione Horizontal. Conservar solo la imagen; elimine otros componentes de la Galería. Cámbiele el nombre a Order_gallery_products.

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

  10. Configure la propiedad Items de esta galería agregando la siguiente línea:

    ViewInMR1.Photos

    Captura de pantalla de la configuración de elementos en la galería.

  11. Agregue tres etiquetas y cambie el texto para mostrar a Escriba el correo electrónico para obtener un correo electrónico de confirmación de pedido!, Id. de correo de la organización:, e Id. de correo del cliente:, respectivamente.

    Captura de pantalla de tres etiquetas.

  12. Expanda la lista desplegable Entrada y seleccione Entrada de texto. Agregue dos componentes de entrada de texto a la pantalla y colóquelos como se muestra en la imagen. Cámbielos Input1_products y Input2_products.

    Captura de pantalla de dos campos de entrada de texto.

  13. Configure la propiedad Hint text agregando Enter mail ID:; no almacena ningún valor en la propiedad Default . Ajuste el tamaño de fuente y el color según sus necesidades.

    Captura de pantalla de la configuración del texto de sugerencia.

  14. Agregue un botón desde la pestaña Insertar y configure su propiedad Text agregando Confirmar.

    Captura de pantalla de la adición del botón confirmar.

  15. Expanda la lista desplegable Iconos y seleccione El icono Atrás y Inicio . Colóquelos correctamente, como se muestra en la imagen.

    Recorte de pantalla de la incorporación de los iconos Atrás e Inicio.

  16. Configure la propiedad OnSelect de estos dos iconos de la siguiente manera:

    • Atrás:

      Navigate(Product_details,ScreenTransition.CoverRight)

      Captura de pantalla de la configuración de OnSelect de regreso.

    • Inicio:

      Navigate('Home Page',ScreenTransition.CoverRight)

      Captura de pantalla de la configuración de OnSelect: Order.

  17. Siga el mismo procedimiento para Order_carpets.

Crear página de finalización

  1. Cree una pantalla en blanco y renómbrela página Final.

    Captura de pantalla de la página final.

  2. Agregue una Etiqueta y cambie su texto para mostrar a Pedido enviado correctamente. Coloque la etiqueta según sea necesario en la pantalla.

    Captura de pantalla de la adición de la etiqueta para Pedido realizado correctamente.

  3. Agregue un botón en la parte inferior de la pantalla. Para configurar la propiedad Text del botón, agregue Comprar más. Vamos a dirigir al usuario a la página principal: seleccione el botón Comprar más y agregue la siguiente línea en la propiedad OnSelect .

    Navigate('Home Page',ScreenTransition.Cover)

    Captura de pantalla del botón Mostrar más.

  4. Expanda la lista desplegable Multimedia y seleccione Imagen para agregar un componente de imagen a la página Final.

    Captura de pantalla de la adición del componente de imagen.

  5. Coloque la imagen como se muestra en la imagen. Seleccione el archivo de logotipo que se va a mostrar.

    Captura de pantalla de la adición de un archivo de logotipo al componente de imagen.

    Sugerencia

    Guarde la aplicación con frecuencia seleccionando la pestaña Archivo en la parte superior y seleccionando la opción Guardar . Si se le solicita, seleccione la opción La nube y, a continuación, seleccione Guardar.

Envío de correos electrónicos a través de Power Apps

  1. Seleccione la pestaña Datos y seleccione + Agregar datos. Expanda Conectores y, a continuación, seleccione Office 365 Outlook para agregarlo como uno de los conectores de esta aplicación.

    Captura de pantalla de la adición de conectores de datos para Outlook.

  2. Abra Order_products y configure la propiedad OnSelect del botón Confirmar agregando las líneas siguientes:

    Office365Outlook.SendEmailV2(Input1_products & ";"& Input2_products,"Order Summary","<b> Your order is successfully submitted! </b> <br> Order details are as follows: <ul> <li> Product: " & Order_product_name_details & "</li> <li> Price: " & Order_price_details & "</li> <li> Color: " & Order_color_details & "</li> </ul>Notes: " & TextInput_products & "<br><b> Thank you for shopping with us! </b>");
Navigate('End page',ScreenTransition.Cover)

    Captura de pantalla de la configuración del botón confirmar.

    Nota:

    Los nombres usados en la función anterior siguen las convenciones de nomenclatura usadas en esta aplicación en el momento del desarrollo. Puede personalizar la función según la aplicación.

La implementación de los pasos anteriores debe hacer que la aplicación funcione de la siguiente manera: la aplicación incluirá una página Notas para almacenar todas las notas de la sesión, una página Resumen del pedido para revisar el pedido y enviar correos, y una página Final para proporcionar un cierre excelente a la aplicación.

Animación de la demostración de la aplicación después de agregar páginas adicionales y funcionalidad de correo electrónico.

Prueba de la aplicación en un dispositivo móvil

  1. Elija el vínculo de descarga del dispositivo:

  2. Abra Power Apps en el dispositivo móvil e inicie sesión con sus credenciales de cuenta Microsoft.

  3. Las aplicaciones que usó recientemente aparecerán en la pantalla predeterminada al iniciar sesión en Power Apps mobile.

    Inicio es la pantalla predeterminada al iniciar sesión. Muestra las aplicaciones que usó recientemente y las aplicaciones que ha marcado como favoritos.

  4. Para ejecutar una aplicación en un dispositivo móvil, seleccione el icono de la aplicación. Si es la primera vez que ejecuta una aplicación de lienzo mediante Power Apps para dispositivos móviles, una pantalla muestra los gestos de deslizar rápidamente.

  5. Para cerrar una aplicación, desliza el dedo desde el borde izquierdo de la aplicación hacia la derecha. En los dispositivos Android, también puede seleccionar el botón Atrás y confirmar que pretende cerrar la aplicación.

    Nota:

    Si una aplicación requiere una conexión a un origen de datos o permiso para usar las funcionalidades del dispositivo (como la cámara o los servicios de ubicación), debe dar su consentimiento para poder usar la aplicación. Normalmente, solo se le pedirá la primera vez que ejecute la aplicación.