Compartir a través de

Capítulo 3: Creación de un prototipo con poco código

Nota

Capitulo 2 hizo referencia a la aplicación móvil utilizada por los técnicos e ingenieros de campo, y la aplicación de escritorio utilizada por el personal de local. Los siguientes capítulos se centran en el diseño, la implementación y el lanzamiento de las aplicaciones móviles creadas con Power Apps. Las aplicaciones de escritorio se dejan como ejercicio para el Lector.

Kiana se muestra escéptica con respecto a las soluciones de código bajo y Power Apps. Sin embargo, Kiana y María deciden crear una aplicación juntas para ayudar a los técnicos de campo a verificar el inventario (y pedir piezas, si es necesario), consultar la base de conocimientos y verificar su próxima cita mientras están fuera de la oficina en llamadas de servicio. Kiana y Maria planean usar esta experiencia para explorar cómo agregar controles y usar fórmulas en Power Apps.

Aunque la construcción de un prototipo inicial de código bajo suele ser una tarea de desarrollador ciudadano, Kiana decide prestar atención al proceso para entender cómo se construye la aplicación. Kiana necesita esta información para ayudar a María a integrar las fuentes de datos del mundo real, las API web y otros servicios necesarios en la aplicación.

Elemento 1: gestión de inventario de campo

El objetivo inicial de María es crear una aplicación de lienzo que muestre una lista de piezas y permita al usuario ver los detalles de cualquier pieza. Eventualmente, el usuario también debería poder pedir una pieza; sin embargo, esta versión inicial de la aplicación será simplemente un prototipo y todavía no estará conectada a un back-end. Después de obtener comentarios de Caleb, el técnico de campo principal, María trabajará con Kiana en la integración de la aplicación de lienzo con el sistema de inventario que ejecuta local.

María está muy familiarizada con el sistema de gestión de inventario existente y comprende la información que contiene. María comienza creando un libro de trabajo de Excel que contiene tablas que contienen datos simulados con detalles para algunas partes de muestra. Los campos de la tabla son ID, Nombre, CategoryID, Precio, Descripción general, NumberInStock e Imagen (una URL que hace referencia a una imagen de la pieza). Este libro de trabajo se puede usar para crear y probar la aplicación de lienzo, para asegurarse de que muestra los datos requeridos correctamente. María almacena este libro en una cuenta de OneDrive con el nombre BoilerParts.xlsx.

Nota

Puede encontrar una copia de este libro en la carpeta Activos en el repositorio de Git para esta guía.

Hoja de trabajo de piezas de caldera, que muestra una lista de piezas con las columnas Id, Name, CategoryId, Price, Overview, NumberInStock e Imagen.

Si es un diseñador de bases de datos relacionales, notará que el libro de Excel presenta una vista desnormalizada de los datos. Por ejemplo, en una base de datos relacional, CategoryID Lo más probable es que sea un identificador numérico que haga referencia a una tabla separada que contenga los detalles de la categoría, incluido el nombre.

Nota

Las URL en la columna Imagen son solo marcadores de posición. En la aplicación completa, estas URL se reemplazarán con las direcciones de archivos de imágenes reales.

Siga estos pasos para crear la aplicación con Power Apps.

  1. Inicie sesión en Power Apps.

  2. En la página Inicio, debajo de Empezar a partir de datos, seleccione Excel en línea.

    Página principal de Power Apps Studio.

  3. En la página Conexiones, seleccione OneDrive para empresas y luego seleccione Crear.

    Nueva conexión de OneDrive.

  4. En la página OneDrive para empresas, seleccione el archivo BoilerParts.xlsx.

    Conectar al libro de Excel.

  5. Seleccione la tabla en el archivo de Excel (María creó la tabla usando el nombre predeterminado, Tabla 1) y luego seleccione Conectar.

    Conectar a la tabla de Excel.

  6. Espere mientras Power Apps genera la aplicación.

    Generar la aplicación.

  7. Cuando se haya generado la aplicación, verá la pantalla Navegar, mostrando los campos CategoryID, ID e Imagen de cada fila de la tabla de piezas en el libro de trabajo.

    Partes que se muestran en la pantalla de exploración.

  8. Los campos que se muestran actualmente no son muy útiles para ayudar a un ingeniero a seleccionar un producto. En el panel que muestra la pantalla Navegar, seleccione la etiqueta Intercambiador de calor en la primera fila de datos. En la barra de fórmulas, seleccione la propiedad Text de la lista desplegable. Cambie el valor de la propiedad a ThisItem.Name. El texto del primer campo de cada fila cambiará para mostrar el nombre de la pieza.

    Nota

    En la siguiente imagen, la etiqueta Intercambiador de calor que se muestra originalmente en el formulario ha cambiado al nombre del producto, Calentador de 3,5 W/S.

    Cambiar el texto de un control de etiqueta.

  9. Repita el paso anterior para las etiquetas ID e Imagen. Cambie la propiedad Text del campo ID a CategoryID y la propiedad Text del campo Imagen a Descripción general. La pantalla Navegar debería verse ahora como la siguiente imagen, que es más probable que un ingeniero de campo encuentre útil para seleccionar piezas.

    Una lista de elementos que muestran el nombre de una pieza, la categoría en la que se encuentra y una descripción general descriptiva.

  10. La función de búsqueda de la pantalla Navegar utiliza de forma predeterminada los campos que se seleccionaron inicialmente cuando se generó la pantalla, en este caso, CategoryID, ID e Imagen. Los resultados están ordenados por CategoryID. Tiene sentido cambiar esto a los campos Nombre, CategoryID y Descripción general, con resultados ordenados por Nombre. Seleccione el control BrowseGallery1 en el panel Vista de árbol. En la lista desplegable en el lado izquierdo de la barra de fórmulas, seleccione la propiedad Items. Arrastre el borde inferior de la barra de fórmulas hacia abajo para que la fórmula sea completamente visible. La fórmula contiene la siguiente expresión:

    **SortByColumns(Search([\@Table1], TextSearchBox1.Text, "CategoryID","ID","Image"), "CategoryID", If(SortDescending1, Descending, Ascending))

    Ordenar y buscar campos.

  11. Cambiar la expresión Buscar para hacer referencia a los campos Nombre, CategoryID y Descripción general utilizando la siguiente fórmula:

    SortByColumns(Search([\@Table1], TextSearchBox1.Text, "Name", "CategoryID", "Overview"), "Name", If(SortDescending1, Descending, Ascending))

  12. El título en el encabezado del formulario no es útil y el tema predeterminado no coincide con la apariencia corporativa de VanArsdel. En la pantalla Navegar, seleccione la etiqueta Tabla 1 y en la barra Fórmula, cambie la propiedad Text de la etiqueta a "Examinar piezas" (incluya las comillas dobles en el valor).

  13. En la barra de herramientas, seleccione Tema (es posible que tenga que expandir la barra de herramientas para mostrar más elementos) y luego seleccionar el tema Bosque. Los colores y el estilo de la pantalla Navegar cambiará para coincidir con el tema.

    Seleccionar el tema.

Hacer que la pantalla de detalles sea más útil

Ha creado la aplicación básica y ha modificado la pantalla Navegar para mostrar los campos que un ingeniero puede utilizar para identificar una pieza. La aplicación también contiene una pantalla Detalles, que muestra toda la información de una pieza seleccionada. Los campos de esta pantalla no se muestran actualmente en una secuencia lógica, por lo que debe reorganizarlos. También puede eliminar el campo ID de esta pantalla, porque esta información es irrelevante para un ingeniero.

  1. En el panel Vista de árbol, desplácese hacia abajo y seleccione DetailScreen1. Esta pantalla muestra detalles sobre la pieza que un usuario selecciona en la pantalla Navegar.

    Pantalla de detalles de piezas.

  2. En el encabezado de la pantalla Detalles en el panel central, seleccione la etiqueta Tabla1. En el panel derecho, en la pestaña Propiedades, cambie la propiedad Text a Detalles de pieza.

    Nota

    En muchos casos, puede lograr los mismos resultados utilizando la barra de fórmulas como el panel Propiedades. Sin embargo, algunas propiedades que solo están disponibles a través del panel Propiedades.

    Cambiar el encabezado de la pantalla de exploración de piezas.

  3. En el panel Vista de árbol, en DetailScreen1, seleccione DetailForm1. En el panel derecho, en la pestaña Propiedades, seleccione Editar campos junto a Campos. En el panel central, seleccione y arrastre los campos para que se muestren en el siguiente orden, de arriba a abajo:

    • Nombre
    • CategoryID
    • Introducción
    • Precio
    • NumberInStock
    • Imagen
    • Identificador

    Organizar campos en la pantalla de detalles.

  4. Seleccione el campo ID, seleccione la elipsis que aparece en el lado derecho del campo, y luego seleccione Eliminar en el menú desplegable que aparece. Esta acción elimina el campo ID del formulario.

    Quitar el campo Id. del formulario.

  5. En el panel Vista de árbol, en DetailForm1, seleccione CategoryID_DataCard1. Este elemento es un control DataCard que muestra el nombre de un campo (llamado clave) y su valor.

    Control de tarjeta de datos CategoryID.

    En el panel derecho, en la pestaña Avanzado, seleccione Desbloquee para cambiar propiedades. En la sección Datos, cambie el campo Nombre para mostrar a "Categoría" (incluya las comillas).

    Nota

    Como con la pestaña Propiedades, muchas de las propiedades de la pestaña Avanzado también están accesibles a través de la barra de fórmulas. Para establecer estas propiedades, puede utilizar la barra de fórmulas si lo prefiere.

    Cambiar el campo de detalles de CategoryID nombre.

  6. Repita el paso anterior para cambiar la clave para NumberInStock_DataCard1 a "Número en stock" (incluya las comillas).

  7. Necesita ajustar el formato del campo Precio para mostrar los datos como un valor de moneda. En el panel Vista de árbol, en DetailForm1, bajo Price_DataCard1, seleccione DataCardValue7. Este es el campo que muestra el valor del campo Precio. En el panel de la derecha DataCardValue7, en la pestaña Avanzado, cambie la propiedad Text a Text(Value(Parent.Default), "[$-en-US]$ ###,##0.00")

    Formato de precio como divisa.

    La expresion Parent.Default se refiere al elemento de datos al que el control padre (DataCard) está atado, en este caso, la columna Precio. La función Texto reformatea este valor utilizando el formato especificado como segundo argumento; en este ejemplo, esta es la moneda local con dos decimales.

  8. La tarjeta de datos de imagen debe mostrar una imagen de la pieza en lugar de la URL del archivo de imagen. Sobre el panel Vista de árbol, debajo DetailForm1, debajo Image_DataCard1, seleccione DataCardValue3 y luego seleccione Borrar para eliminar este control.

  9. Seleccione Image_DataCard1. En el panel izquierdo, seleccione + Insertar. Sobre el panel Insertar, expanda Medios de comunicación y luego seleccione Imagen.

    Reemplazar la URL de una imagen por una imagen.

  10. Vuelva al panel Vista de árbol y verifique que el control de texto Image1 se ha agregado al control ImageData_Card1.

    Verifique que se haya agregado el control de imagen.

  11. En el panel Vista de árbol, seleccione Image_DataCard1. En el panel derecho, en la pestaña Avanzado, cambie Altura a 500, para dejar suficiente espacio para que se muestre una imagen.

    Establecer la altura de la tarjeta de datos de imagen.

  12. En el panel Vista de árbol, seleccione Image1. Configure las siguientes propiedades:

    • Imagen: Parent.Default
    • ImagePosition: ImagePosition.Fit
    • Anchura: 550
    • Altura: 550

    Nota

    La imagen que se muestra actualmente está vacía porque la URL en el libro de Excel es solo un marcador de posición. Abordará este problema y obtendrá una URL real cuando vincule la aplicación a una API web en un capítulo posterior.

La aplicación también contiene una pantalla Editar, que permite al usuario cambiar la información de una pieza. Un ingeniero no debería poder cambiar los detalles de una pieza, crear nuevas piezas o eliminar piezas del catálogo.

  1. En el panel Vista de árbol, seleccione EditScreen1. Haga clic en los puntos suspensivos (…) y, después, seleccione Eliminar para quitar esta pantalla.

    Eliminar la pantalla de edición.

  2. En el panel Vista de árbol, seleccione DetailsScreen1. Darse cuenta de Power Apps Studio muestra un mensaje de error para esta pantalla. Este error se produce porque DetallesPantalla1 contiene expresiones que hacen referencia a la pantalla EditScreen1, que ya no existe.

  3. En el encabezado de DetallesPantalla1, seleccione el icono del lápiz (IconEdit1). La propiedad OnSelect para este control contiene la expresión EditForm(EditForm1);Navigate(EditScreen1, ScreenTransition.None). Cuando se selecciona el icono Editar, esta expresión se ejecuta e intenta moverse a la pantalla EditScreen1.

    Editar la propiedad OnSelect.

  4. Sobre el panel Vista de árbol, seleccione IconEdit1 y luego seleccione Borrar. Este icono ya no es necesario.

  5. Seleccione IconDelete1 y luego seleccione Borrar. Este icono se utiliza para eliminar la pieza actual y tampoco es obligatorio.

    Eliminar los iconos de eliminar y editar.

  6. Note que el texto Detalles de la pieza ha desaparecido del encabezado de la pantalla y, en su lugar, Power Apps Studio muestra un mensaje de error. Esto ha sucedido porque se calcula el ancho del control de etiqueta que muestra el texto. En el panel Vista de árbol, seleccione LblAppName2. Examine la propiedad Width. El valor de esta propiedad es el resultado de la expresión Parent.Width - Self.X - IconDelete1.Width - IconEdit1.Width.

    El control LblAppName2 muestra un error de ancho.

  7. Cambie la expresión de la propiedad Width a Parent.Width - Self.X. El error debería desaparecer y el texto Detalles de la pieza debería volver a aparecer en el encabezado de la pantalla.

  8. En el panel Vista de árbol, seleccione BrowseScreen1. Esta pantalla también mostrará un mensaje de error. El icono + en la barra de herramientas (IconNewItem1) permite al usuario agregar una nueva pieza. La propiedad OnSelect de este icono hace referencia a la pantalla EditScreen1.

    Icono de elemento nuevo que muestra un error.

  9. Seleccione IconNewItem1 y luego seleccione Eliminar. Como antes, el texto del encabezado de la pantalla desaparece y se muestra un mensaje de error, y por el mismo motivo.

  10. En el panel Vista de árbol, en BrowseScreen1, seleccione LblAppName1. Modifique la expresión para la propiedad Width eliminando la referencia a IconNewItem1.Width. La nueva expresión debería ser Parent.Width - Self.X - IconSortUpDown1.Width - IconRefresh1.Width.

    Cambiar el ancho de la etiqueta.

  11. Todavía hay un problema con el encabezado. Aunque el texto Examinar piezas ha reaparecido, se muestra un error y los iconos de actualización y ordenación están en el lugar incorrecto. En el panel Vista de árbol, seleccione IconSortUpDown1. Encuentre la propiedad X para este control. Esta propiedad determina la posición horizontal del icono en el encabezado. Actualmente se calcula en función del ancho del control IconNewItem1.

    Error de icono de ordenación.

  12. Cambie la expresión de la propiedad X a Parent.Width - Self.Width.

  13. En el panel Vista de árbol, seleccione IconRefresh1. Cambie la expresión de la propiedad X a Parent.Width - IconSortUpDown1.Width - Self.Width. Todos los errores deberían desaparecer.

Guarde y pruebe la aplicación

Ahora puede guardar y probar la aplicación.

  1. Seleccione Archivo>Guardar como.

  2. Debajo de Guardar como, seleccione La nube, ingrese el nombre VanArsdelApp y luego seleccione Guardar.

    Guardar la aplicación.

  3. Seleccione la flecha Atrás para volver a la pantalla Inicio.

    Retroceso a la pantalla principal.

  4. Seleccione F5 para obtener una vista previa de la aplicación. Sobre la página Examinar piezas, seleccione el corchete de ángulo recto (>) a la derecha de cualquier parte. La pantalla Detalles aparece para la pieza.

    Ejecución inicial de la aplicación.

  5. Seleccione el corchete de ángulo izquierdo (<) en el encabezado de la pantalla Detalles para volver a la pantalla Navegar.

  6. Sobre la pantalla Examinar piezas, ingrese el texto en el cuadro Buscar. A medida que escribe, los elementos se filtrarán para mostrar solo aquellos que tengan texto coincidente en los campos Nombre, CategoryID o Descripción general.

    Buscar en la pantalla Examinar piezas.

  7. Cierre la ventana de vista previa y vuelva a Power Apps Studio.

Elemento 2: Knowledge Base de campo

Para acceder a la base de conocimientos, María y Caleb (el técnico) prevén una interfaz simple donde el usuario ingresa un término de búsqueda y la aplicación muestra todos los artículos de la base de conocimientos que mencionan el término. María sabe que este proceso involucrará Azure Cognitive Search, pero no necesita, o incluso quiere, entender cómo funciona. Por lo tanto, Maria decide proporcionar solo la interfaz de usuario básica y trabajar con Kiana más tarde para agregar la funcionalidad real.

María decide crear una nueva pantalla basada en la plantilla Lista disponible en Power Apps Studio.

  1. Sobre la barra de herramientas de la pantalla Inicio de Power Apps Studio, seleccione Nueva pantalla y luego seleccione Lista.

    La plantilla Lista.

  2. En el encabezado de la pantalla, seleccione la etiqueta que muestra el texto [Título]. Cambie la propiedad Text a "Consulta" (incluya las comillas).

    Modificar el texto del encabezado de la pantalla de consulta.

  3. En el encabezado de la pantalla, seleccione el signo más (+) y luego seleccione Borrar. El icono + está destinado a permitir al usuario agregar más elementos a la lista. La base de conocimientos es solo para consultas, por lo que esta función no es necesaria.

    Quitar el icono +.

    Tenga en cuenta que la eliminación de este icono provoca un error en el encabezado debido a la forma en que se calcula la ubicación y los anchos de los otros elementos. Lo vio anteriormente con la pantalla de administración de inventario y la solución es la misma, como se describe en los siguientes pasos.

  4. Sobre el panel Vista de árbol, desplácese hacia abajo hasta la sección Pantalla 1 y seleccione LblAppName3. Cambie la propiedad Width a la fórmula Parent.Width - LblAppName3.X - IconSortUpDown2.Width - IconRefresh2.Width.

    Modificar el ancho del encabezado de la pantalla de consulta.

  5. En el panel Vista de árbol, seleccione IconSortUpDown2. Modifique la propiedad X para la fórmula Parent.Width - IconSortUpDown2.Width.

  6. En el panel Vista de árbol, seleccione IconRefresh2. Modifique la propiedad X para la fórmula Parent.Width - IconSortUpDown2.Width - IconRefresh2.Width. Esto debería resolver todos los errores con la pantalla.

  7. Seleccione Archivo>Guardar.

  8. En el cuadro Nota de versión, ingrese el texto Interfaz de usuario de base de conocimiento agregada y luego seleccione Ahorrar.

  9. Vuelva a la pantalla Inicio y seleccione F5 para obtener una vista previa de la nueva pantalla. Debería tener un aspecto similar al de la siguiente imagen.

    Se está ejecutando la pantalla de consulta.

    Tenga en cuenta que si selecciona el icono > junto a cualquiera de las entradas ficticias, la funcionalidad de detalles no funciona actualmente. Lo abordará más adelante cuando integre Azure Cognitive Search en la aplicación.

  10. Cierre la ventana de vista previa y vuelva a Power Apps Studio.

Elemento 3: programación de campo y notas

Maria trabaja con Malik, el recepcionista de la oficina, para diseñar la interfaz para la programación de campo y las citas que forman parte de la aplicación. Malik proporciona un libro de Excel con algunos datos de muestra que María puede usar para crear la pantalla de citas. El libro de trabajo contiene una tabla con las siguientes columnas:

  • ID (id. de la cita)
  • ID de cliente (un identificador único para el cliente)
  • Nombre del cliente
  • Dirección del cliente
  • Detalles del problema (una descripción de texto del problema que está experimentando el cliente)
  • Número de contacto
  • Estado
  • Fecha de la cita
  • Hora de la cita
  • Notas (una descripción de texto con las notas agregadas por el ingeniero)
  • Imagen (una fotografía del aparato, ya sea en condiciones de funcionamiento después de la reparación o como imagen complementaria para las notas del ingeniero)

Libro de trabajo de citas.

Nota

Al igual que con los datos de gestión de inventario de campo, este libro presenta una vista desnormalizada de los datos. En el sistema de citas existente, estos datos se almacenan en tablas separadas que contienen datos de citas y datos de clientes.

Maria almacena este archivo en una cuenta de OneDrive con el nombre Appointments.xlsx. Recordando que anteriormente se usó el nombre predeterminado para la tabla en el libro de trabajo y se tuvo que cambiar el título en las distintas pantallas que se generaron, María cambia el nombre de la tabla en el libro de trabajo a Equipo.

Nota

Este libro está disponible en la carpeta Activos en el repositorio de Git para esta guía.

María quiere crear la sección de citas de la aplicación directamente desde el archivo de Excel. María decide seguir un enfoque similar al de la funcionalidad de administración de inventario de campo, excepto que esta vez el ingeniero podrá crear y editar citas.

Maria decide crear las pantallas de citas inicialmente como una aplicación separada. De esta manera, María puede usar Power Apps Studio para generar gran parte de la aplicación automáticamente. Power Apps Studio actualmente no le permite generar pantallas adicionales a partir de una conexión de datos en una aplicación existente. Después de crear y probar las pantallas, María las copiará en el inventario de campo y la aplicación de base de conocimientos.

Nota

Un enfoque alternativo es agregar la tabla Equipo en el archivo de Excel como un segundo origen de datos en la aplicación existente, y luego diseñe manualmente las pantallas para las citas. María optó por generar las nuevas pantallas del libro de trabajo y copiar las pantallas. Actualmente, María está más familiarizada con los conceptos de copiar y pegar que con la creación de pantallas manualmente y aprenderá gradualmente a crear pantallas desde cero a medida que avance el proceso de creación de esta aplicación.

Para crear la aplicación de citas

  1. En la barra de menús Power Apps Studio, seleccione Archivo.

    Menú Archivo.

  2. Seleccione Nuevo en el panel izquierdo. En el panel principal, seleccione el cuadro OneDrive para empresas: disposición del teléfono.

    Cree una nueva aplicación.

  3. Sobre el panel Conexiones, seleccione Citas.xlsx.

    Nueva aplicación del libro de citas.

  4. En el archivo de Excel, seleccione la tabla Citas y luego seleccione Conectar.

    Seleccione la tabla de citas.

  5. Espere mientras se genera la aplicación. Cuando aparezca la nueva aplicación, contendrá una pantalla Navegar, una pantalla Detalles y una pantalla Editar, usando el tema predeterminado.

    La aplicación de citas generada.

  6. En el panel Vista de árbol, en la sección BrowseScreen1 debajo de NavegarGalería1, seleccione Image1 y luego seleccione Borrar. La pantalla Navegar solo debe enumerar las citas, no las imágenes asociadas con ellas.

    Eliminar el control de imagen.

    Observe que al quitar el control Image1 causa varios errores en la pantalla debido a que los anchos y la ubicación del control Título1 ambos hacen referencia al control Imagen. Arreglará estos problemas en el siguiente paso.

  7. En el panel Vista de árbol, en BrowseGallery1, seleccione Title1. Cambie el valor de la propiedad X a 16. Cambie la fórmula en la propiedad Width a Parent.TemplateWidth - 104. Esto debería resolver los errores de la pantalla.

  8. En el panel Vista de árbol, en BrowseGallery1, seleccione Body1. Este control muestra actualmente los detalles del teléfono de contacto del cliente. Cambie el valor de la propiedad Text a ThisItem.'Customer Name' (incluya las comillas simples).

    Cambiar el control Body1 por el nombre del cliente.

    Los detalles en el nombre de pantalla Navegar ahora muestran el nombre del cliente.

  9. En el panel Vista de árbol, seleccione BrowseGallery1. Usando la barra de fórmulas, examine la expresión en la propiedad Items. El control busca citas utilizando la fecha, la hora y el número de contacto de la cita. Cambie esta fórmula para buscar el nombre del cliente en lugar del número de contacto:

    SortByColumns(Search([@Appointments], TextSearchBox1.Text, "Appointment_x0020_Date","Appointment_x0020_Time","Customer_x0020_Name"), "Appointment_x0020_Date", If(SortDescending1, Descending, Ascending)).

    Observe que las citas están ordenadas por fecha y luego por hora (se muestran los dos primeros campos).

  10. En el panel Vista de árbol, elimine IconNewItem1. Solo el personal de local puede reservar nuevas citas para ingenieros y técnicos. Tenga en cuenta que esta acción da como resultado errores en el formulario porque el ancho y la posición de otros controles en el encabezado hacen referencia al icono que acaba de eliminar.

  11. En el panel Vista de árbol, seleccione LblAppName1. Cambie la fórmula de la propiedad Width. a Parent.Width - Self.X - IconSortUpDown1.Width - IconRefresh1.Width.

  12. En el panel Vista de árbol, seleccione IconRefresh1. Cambie el valor de la propiedad X a Parent.Width - IconSortUpDown1.Width - Self.Width.

  13. En el panel Vista de árbol, seleccione iconSortUpDown1. Cambie el valor de la propiedad X a Parent.Width - Self.Width.

  14. En el panel Vista de árbol, seleccione BrowseScreen1 y luego seleccione el botón de puntos suspensivos (...). En el menú desplegable que aparece, seleccione Rebautizar y cambie el nombre de la pantalla a BrowseAppointments.

    Renombrar la pantalla de exploración.

  15. Usando la misma técnica, cambie el nombre del control NavegarGalería1 a NavegarCitasGalería.

Eso completa la pantalla Navegar.

Para crear la pantalla de detalles

Ahora puede dirigir su atención a la pantalla Detalles.

  1. En el panel Vista de árbol, desplácese hacia abajo hasta la sección DetailsScreen1. Puede ver que los detalles se presentan en orden alfabético por nombres de campo y algunos bits de información útiles, tales como el campo Notas, no se muestran en absoluto.

    Diseño de la pantalla de detalles de la cita.

  2. En el panel Vista de árbol, seleccione DetailForm1. En el panel derecho, en la pestaña Propiedades, seleccione Editar campos junto a Campos. En el panel central, seleccione cada uno de los siguientes campos y luego seleccione Borrar:

    • Fecha de la cita
    • Hora de la cita
    • Id. de cliente
    • Identificador

  3. Seleccione + Agregar campo y agregue los campos siguientes:

    • Notas
    • Detalles del problema
    • Estado

    Agregar campos en la pantalla de detalles.

  4. Arrastre cada campo para que se muestren en el siguiente orden, de arriba a abajo:

    • Nombre del cliente
    • Dirección del cliente
    • Número de contacto
    • Detalles del problema
    • Status
    • Notas
    • Image

  5. En el panel Vista de árbol, seleccione Notes_DataCard1. Cambiar la propiedad Height a 320.

    Modificar el tamaño del campo de notas.

  6. En el panel Vista de árbol, elimine IconDelete1. Los ingenieros no deberían poder eliminar citas del sistema.

  7. Seleccione LblAppName2 y cambie la propiedad Width a Parent.Width - Self.X - IconEdit1.Width.

  8. Usando la técnica descrita anteriormente, cambie el nombre de DetailsScreen1 a AppointmentDetails.

Para editar la pantalla Editar

La última pantalla a mirar, por ahora, es la pantalla Editar.

  1. En el panel Vista de árbol, seleccione EditScreen1.

  2. En el panel Vista de árbol, en la sección EditScreen1, seleccione EditForm1. En el panel derecho, en la pestaña Propiedades, seleccione Editar campos junto a Campos.

  3. Quite los campos siguientes:

    • Dirección del cliente
    • Identificador
    • Id. de cliente
    • Fecha de la cita
    • Hora de la cita

  4. Agregue los campos siguientes:

    • Detalles del problema
    • Estado
    • Notas

  5. Arrastre cada campo para que se muestren en el siguiente orden, de arriba a abajo:

    • Nombre del contacto
    • Número de cliente
    • Detalles del problema
    • Estado
    • Notas
    • Imagen

  6. Seleccione el campo Nombre del cliente y expándalo para ver sus propiedades. Cambie el Tipo de control a Ver texto. Este cambio hace que el control sea de solo lectura; es útil ver el nombre del cliente en la pantalla Editar, pero un ingeniero no debería poder cambiarla.

    Hacer que el nombre del cliente sea de solo lectura.

  7. Seleccione el campo Número de contacto y expándalo para ver sus propiedades. Cambie el Tipo de control a Ver texto. Este campo también debe ser de solo lectura.

  8. Seleccione el campo Notas, expándalo y y cambie el Tipo de control a Editar texto de varias líneas. Esta configuración permite al ingeniero agregar notas detalladas que pueden abarcar varias líneas.

  9. Seleccione el campo Estado, expándalo y y cambie el Tipo de control a Valores permitidos.

  10. En el panel Vista de árbol, seleccione Status_DataCard5. En el panel derecho, en la pestaña Propiedades, seleccione Desbloquee para cambiar propiedades. Desplácese hacia abajo hasta la propiedad AllowedValues y cambie el texto a ["Fijo", "Piezas solicitadas", "Sin resolver"] (incluya los corchetes). El ingeniero de campo solo puede configurar Estado a uno de estos valores definidos.

    Establezca los valores de estado permitidos.

  11. En el panel Vista de árbol, renombre EditScreen1 como Editar cita.

Ahora puede guardar y probar la aplicación.

  1. Seleccione Archivo>Guardar como.

  2. Debajo de Guardar como, seleccione La nube, ingrese el nombre VanArsdelAppointments y luego seleccione Guardar.

  3. Seleccione la flecha Atrás en la barra de herramientas Power Apps Studio para volver a la pantalla Inicio.

  4. Seleccione F5 para obtener una vista previa de la aplicación. Sobre la página Citas, seleccione el icono > junto a cualquier cita. Debe aparecer la pantalla Detalles de la cita. En el encabezado, seleccione Editar para actualizar la cita. Compruebe lo siguiente:

    • Los campos de nombre del cliente y número de contacto son de solo lectura.
    • El campo de estado está limitado a los valores de la lista desplegable.
    • Puede ingresar notas que abarquen varias líneas.
    • Puede cargar un archivo de imagen en el campo de imagen.

    Nota

    Una mejora que agregará más adelante le permitirá tomar una foto con su teléfono desde la aplicación y agregarla al campo de imagen.

    La aplicación de citas en ejecución.

Combinar las pantallas en una sola aplicación

Maria ha creado dos aplicaciones, pero quiere combinarlas en una sola aplicación. Para hacer esto, María copia las pantallas de la aplicación de citas en la aplicación de base de conocimientos y gestión de inventario de campo, de la siguiente manera:

  1. Abra una nueva ventana del navegador e inicie sesión en Power Apps Studio con los datos de su cuenta.

  2. En el panel izquierdo, seleccione Aplicaciones, seleccione VanArdselApp y luego seleccione Editar.

    Abra la aplicación VanArsdel.

  3. En la barra de herramientas, seleccione Nueva pantalla y luego En blanco. Esta acción agregará una nueva pantalla a la aplicación en la que copiará los controles de la pantalla Navegar para la aplicación VanArsdelAppointments.

    Agregar una pantalla en blanco.

  4. La nueva pantalla se llamará Pantalla2. En el panel Vista de árbol, renombrela como BrowseAppointments.

  5. Repita el paso anterior dos veces más, para agregar dos pantallas en blanco más (Pantalla3 y Pantalla 4).

  6. Renombre Pantalla3 como Detalles de la cita y renombre Pantalla 4 como Editar cita.

  7. En la barra de herramientas izquierda de Power Apps Studio, seleccione el icono Datos. En el panel Datos, seleccione Agregar datos. En la lista desplegable Seleccione un origen de datos, en el campo Buscar, ingrese OneDrive y luego seleccione OneDrive para empresas.

    Selección del origen de datos.

  8. Seleccione el archivo de Excel Appointments.xlsx, seleccione la tabla Citas y luego seleccione Conectar.

  9. Cambie a la ventana del navegador que muestra la aplicación VanArsdelNombramientos.

  10. En la barra de herramientas, seleccione Tema (es posible que tenga que expandir la barra de herramientas para mostrar más elementos) y luego seleccionar el tema Bosque. Este es el mismo tema utilizado por la aplicación VanArsdel.

  11. En la barra de herramientas de la izquierda, seleccione el icono Vista de árbol, seleccione la pantalla Examinar citas y luego seleccione Ctrl + A. Esta acción selecciona todos los controles en la pantalla.

  12. Seleccione Ctrl + C para copiar estos controles al portapapeles.

  13. Regrese a la ventana del navegador que muestra la aplicación VanArsdelApp.

  14. En la barra de herramientas de la izquierda, seleccione el icono Vista de árbol, seleccione la pantalla BrowseAppointments.

  15. Seleccione Ctrl+V para pegar los controles en la pantalla.

    Nota

    A veces, el encabezado de la pantalla aparece un poco demasiado abajo. Para solucionar este problema, seleccione los controles IconSortUpDOwn1_1, IconRefresh1_1, LblAppName1_1 y RectQuickActionBar1_1 en el panel Vista de árbol (mantenga presionado Mayús mientras hace clic para seleccionar más de un control a la vez) y luego use el mouse o las teclas de flecha para moverlos hacia arriba en el panel de vista de diseño.

  16. Vuelva a la ventana del navegador que muestra la aplicación VanArsdelAppointments y, a continuación, seleccione y copie los controles en la pantalla AppointmentDetails al portapapeles (Ctrl + A seguido por Ctrl + C).

  17. Regrese a la ventana del navegador que muestra la aplicación VanArsdelApp, seleccione la pantalla AppointmentDetails y luego pegue los controles (Ctrl + V). Ajuste la posición de los controles en el encabezado de la pantalla, si es necesario.

    Nota

    Verá un error informado en el encabezado de la pantalla Detalles de la cita. Este error se produce porque la pantalla hace referencia a controles en la pantalla Editar cita, que aún no se ha copiado. Los siguientes pasos deberían resolver este error.

  18. Vuelva a la ventana del navegador que muestra la aplicación VanArsdelAppointments y, a continuación, seleccione y copie los controles en la pantalla EditAppointment al portapapeles.

  19. Regrese a la ventana del navegador que muestra la aplicación VanArsdelApp, seleccione la pantalla EditAppointment y luego pegue los controles. Nuevamente, mueva los controles en el encabezado de la pantalla si es necesario.

  20. En el panel Vista de árbol, seleccione la pantalla Detalles de la cita y verifique que el error indicado anteriormente haya desaparecido.

  21. En el panel Vista de árbol, seleccione la pantalla BrowseScreen1. Cambiar el nombre de esta pantalla como BrowseParts.

  22. Cambie el nombre de la pantalla DetailsScreen1 a PartDetails.

  23. Cambie el nombre de la pantalla Screen1 como Knowledgebase.

    Nota

    Es una buena práctica cambiar el nombre de las pantallas para reflejar su función en lugar de utilizar los nombres predeterminados generados por Power Apps Studio, especialmente si una aplicación contiene varias pantallas. Esto puede ayudar a evitar confusiones más adelante si otro desarrollador modifica la aplicación.

Agregar una pantalla de inicio a la aplicación

La etapa final es agregar una pantalla Inicio a la aplicación. La pantalla Inicio permitirá al ingeniero moverse entre las diferentes partes de la aplicación (gestión de inventario, base de conocimientos y citas).

  1. En la aplicación VanArsdelApp en la barra de herramientas, seleccione Nueva pantalla y luego seleccione Blanco.

  2. En el panel Vista de árbol, cambie el nombre de Screen2 a Inicio.

  3. En la barra de herramientas, seleccione Insertar. En la lista de controles, expanda Medios y luego seleccione Imagen. Se agregará el control a la pantalla.

    Agregar un control de imagen a la pantalla Inicio.

  4. Establezca la posición X del control en 16 y la posición Y en 22. Cambie el Ancho a 605 y el Alto a 127. Cambie la Posición de la imagen a Llenar.

    Establecer el tamaño y la posición de la imagen.

  5. Mientras todavía en la pestaña Propiedades, en la lista desplegable Imagen, seleccione + Agregar un archivo de imagen y luego cargue la imagen VanArsdelLogo.png al control.

    Nota

    El archivo de imagen está disponible en la carpeta Activos en el repositorio de Git para esta guía.

    Agregar un logo a la imagen.

  6. De la lista de controles, agregue cuatro controles Etiqueta de texto al formulario y colóquelos de modo que se apilen debajo del logotipo de VanArsdel.

    Agregar controles de etiqueta de texto.

  7. Seleccione el control Etiqueta de texto más alto. En el panel derecho, en la pestaña Propiedades, establezca la propiedad Text en Siguiente cita. Establezca Tamaño de fuente en 30 y utilice el selector de color para establecer el color de la fuente en verde (para que coincida con el logotipo).

    Establecer el color de la fuente.

  8. Seleccione el segundo control Etiqueta de texto. Cambie el valor de la propiedad Text a First(Appointments)."Customer Name" (incluya las comillas). Esta fórmula recupera el nombre del cliente de la primera fila en la tabla de citas.

    Mostrar el nombre del cliente.

    Nota

    Actualmente, esta fórmula solo actúa como un marcador de posición. Modificará la etiqueta más tarde para recuperar la próxima cita para el ingeniero, en lugar de mostrar siempre la primera.

  9. Seleccione el tercer control Etiqueta de texto y establezca la propiedad Text en First(Appointments)."Appointment Date".

  10. Establezca la propiedad Text del cuarto control de etiqueta en First(Appointments)."Appointment Time". Establezca la propiedad Tamaño de fuente en 30.

  11. De la lista de controles, agregue un control Rectángulo. Establezca las siguientes propiedades para este control:

    • Modo de presentación: Vista
    • X: 0
    • Y: 632
    • Anchura: 635
    • Altura: 1

    Este control actúa como un separador visual en el medio de la pantalla.

  12. Agregue tres controles Botón a la pantalla, dispuestos verticalmente y espaciados uniformemente debajo del separador. Seleccione la propiedad Text para el botón superior para Citas, la propiedad Text para el botón central para Piezas y la propiedad Text para el botón inferior para Knowledgebase.

    Botones de la pantalla principal.

  13. Seleccione el botón Citas. Cambie la expresión de la acción OnSelect a la fórmula Navigate(BrowseAppointments, ScreenTransition.Fade). Esta acción cambia la visualización a la pantalla de citas cuando el usuario selecciona el botón.

    Botón Citas.

  14. Establezca la acción OnSelect para el botón Partes para Navigate(BrowseParts, ScreenTransition.Fade).

  15. Establezca la acción OnSelect para el botón Knowledgebase para Navigate(Knowledgebase, ScreenTransition.Fade).

Además de navegar desde la pantalla Inicio a las otras pantallas en el sistema, las pantallas Citas, Partes y Knowledgebase necesitan una forma de permitir que el usuario regrese a la pantalla Inicio. María decide agregar botones de retroceso a estas pantallas.

  1. En el panel Vista de árbol, seleccione la pantalla BrowseParts.

  2. Seleccione el control RectQuickActionBar1 para darle el enfoque.

  3. Seleccione el menú Insertar y, a continuación, seleccione Agregar icono. Mueva el icono a la izquierda del control RectQuickActionBar1. Tenga en cuenta que el icono ocultará parte de la etiqueta Examinar piezas.

    Agregar un icono.

  4. En el menú Vista de árbol, cambie el nombre del nuevo control de icono a IconReturn1.

  5. Cambie la fórmula de la acción OnSelect a la expresión Back(ScreenTransition.Fade). La función Back lleva al usuario a la pantalla anterior que visitó.

  6. Sobre la pestaña Propiedades, cambie la propiedad Icon a < Left.

  7. En el encabezado de la pantalla, seleccione la etiqueta Examinar piezas. Cambie la propiedad X a IconReturn1.Width + 20. La etiqueta Examinar piezas ya no debería estar parcialmente oscurecida.

    Mover la etiqueta Examinar piezas.

  8. Siguiendo el proceso descrito en los pasos 16 a 22, agregue un icono llamado IconReturn2 hacia el control RectQuickActionBar3 en la pantalla Knowledgebase.

  9. Del mismo modo, agregue un icono llamado IconReturn3 hacia el control RectQuickActionBar1_1 en la pantalla BrowseAppointments.

  10. En el panel Vista de árbol, seleccione el objeto App. Cambie la propiedad StartScreen a la expresión Inicio. Esto asegura que la pantalla Inicio se muestra cada vez que se inicia la aplicación:

    Establecer la fórmula OnStart de la aplicación.

    Nota

    Si no especifica qué pantalla mostrar cuando se inicia la aplicación, se utilizará la pantalla que aparece en la parte superior del panel Vista de árbol. Para mover una pantalla al inicio de la lista, haga clic con el botón derecho en la pantalla en el panel Vista de árbol y seleccione Ascender hasta que esté en la parte superior.

Finalmente, puedes probar la aplicación.

  1. Seleccione Archivo>Guardar. En el cuadro Notas de la versión, ingrese Versión completa con pantalla de inicio y luego seleccione Guardar.

  2. Seleccione la flecha hacia atrás para volver a la pantalla Inicio y luego seleccione F5 para ejecutar la aplicación.

  3. Verifique que aparece la pantalla Inicio de la aplicación.

  4. Seleccionar Citas. Debería aparecer la pantalla de citas.

  5. Seleccione la flecha Atrás para volver a la pantalla Inicio.

  6. Seleccione Piezas. Debería aparecer el navegador de piezas.

  7. Seleccione la flecha Atrás para volver a la pantalla Inicio.

  8. Seleccione Base de conocimientos. Debería aparecer la pantalla de consulta de la base de conocimientos.

  9. Seleccione la flecha Atrás para volver a la pantalla Inicio.

  10. Cierre la ventana de vista previa y vuelva a Power Apps Studio.

Ahora se ha completado el prototipo de aplicación.

AnteriorSiguiente