Creación de una aplicación de lienzo para administrar proyectos

  • Artículo

Nota

Este artículo forma parte de una serie de tutoriales sobre el uso de Power Apps, Power Automate y Power BI con SharePoint Online. Asegúrese de leer la introducción a la serie para hacerse una idea general, así como para obtener descargas relacionadas.

En esta tarea se va a compilar una aplicación de lienzo desde el principio. Esta aplicación permite a un usuario asignar un administrador a proyectos y actualizar los detalles de proyectos. Va a ver algunos de los mismos controles y fórmulas que en la primera aplicación, pero creará más partes de la aplicación en esta ocasión. El proceso es más complejo, pero aprenderá más, por lo que el equilibrio debería ser razonable.

Revisión rápida de Power Apps Studio

Power Apps Studio tiene tres paneles y una cinta de opciones que hacen que crear aplicaciones sea similar a crear un conjunto de diapositivas en PowerPoint:

  1. Barra de navegación izquierda, que muestra una vista jerárquica de todas las pantallas y los controles de la aplicación, así como miniaturas de las pantallas.
  2. Panel central, que contiene la pantalla de la aplicación con la que está trabajando.
  3. Panel derecho, donde se establecen opciones como los orígenes de datos y el diseño.
  4. Lista desplegable Propiedad, donde se seleccionan las propiedades a las que se aplican las fórmulas.
  5. Barra de fórmulas, donde se agregan las fórmulas (como en Excel) que definen el comportamiento de la aplicación.
  6. Cinta de opciones, donde puede agregar controles y personalizar los elementos de diseño.

Power Apps Studio.

Paso 1: Creación de pantallas

Una vez terminado el repaso, empiece a crear una aplicación.

Crear la aplicación

Cree una aplicación de lienzo en blanco con diseño de Teléfono y el nombre "Aplicación de gestión de proyectos".

Agregar cuatro pantallas a la aplicación

En este paso, se van a crear cuatro pantallas en blanco para la aplicación. Se usarán diseños de pantalla diferentes, según el propósito de la pantalla. Se agregarán más pantallas en pasos posteriores.

Pantalla Finalidad
SelectTask Pantalla de apertura; navegar a otras pantallas.
AssignManager Asignar un administrador a un proyecto aprobado.
ViewProjects Ver una lista de proyectos, con información de resumen.
UpdateDetails Ver y actualizar los detalles de un proyecto.

  1. En la pestaña Inicio, pulse o haga clic en Nueva pantalla y en Pantalla desplazable.

    Pantalla desplazable.

  2. Cambie el nombre de la pantalla a SelectTask.

    Cambiar el nombre de pantalla.

  3. Cree y cambie el nombre de pantallas adicionales:

    1. Pulse o haga clic en Nueva pantalla y en Pantalla desplazable. Cambie el nombre de la pantalla a AssignManager.
    2. Pulse o haga clic en Nueva pantalla y en Pantalla de lista. Cambie el nombre de la pantalla a ViewProjects.
    3. Pulse o haga clic en Nueva pantalla y en Pantalla de formulario. Cambie el nombre de la pantalla a UpdateDetails.

  4. Seleccione los puntos suspensivos (…) junto a Screen1 y pulse o haga clic en Eliminar.

    Eliminar pantalla.

Ahora la aplicación debería parecerse a la siguiente imagen.

Todas las pantallas de la aplicación.

Paso 2: conectar a una lista creada con Microsoft Lists

En este paso, se conectará a la lista Detalles del producto. Solo se usa una lista en esta aplicación, pero puede conectarse fácilmente a ambas si desea ampliarla.

  1. En la barra de navegación izquierda, pulse o haga clic en la pantalla SelectTask.

  2. En el panel derecho, pulse o haga clic en Agregar origen de datos.

    Conectarse a los datos.

  3. Pulse o haga clic en Nueva conexión.

    Nueva conexión.

  4. Haga clic o pulse en SharePoint.

    Conexión de SharePoint.

  5. Seleccione Conectar directamente (servicios en la nube) y pulse o haga clic en Crear.

    Conectar directamente (servicios en la nube).

  6. Escriba una dirección URL de SharePoint y pulse o haga clic en Ir.

    Dirección URL SharePoint para conexión.

  7. Seleccione la lista Project Details y pulse o haga clic en Conectar.

    Seleccionar la lista Project Details.

    La pestaña Orígenes de datos en el panel derecho muestra ahora la conexión que ha creado.

    Pestaña Orígenes de datos.

Paso 3: Preparación de la pantalla SelectTask

En este paso, se proporciona una forma de navegar hasta las restantes pantallas de la aplicación mediante el uso de algunos de los controles, las fórmulas y las opciones de formato que proporciona Power Apps.

Actualizar el título e insertar el texto de introducción

  1. En la barra de navegación izquierda, seleccione la pantalla SelectTask.

  2. En el panel central, seleccione el valor predeterminado [Title] y, en la barra de fórmulas, actualice la propiedad Text a "Contoso Project Management".

    Propiedad Text en la barra de fórmulas.

  3. En la pestaña Insertar, pulse o haga clic en Etiqueta y arrastre la etiqueta debajo del título superior.

    Agregar etiqueta.

  4. En la barra de fórmulas, establezca las siguientes propiedades para la etiqueta:

    • Propiedad Color = DarkGray

    • Propiedad Size = 18

    • Propiedad Text = "Click or tap a task to continue…"

      Actualizar el texto de la etiqueta.

Agregar dos botones de navegación

  1. En la pestaña Insertar, pulse o haga clic en Botón y arrastre el botón debajo de la etiqueta.

    Botón Agregar.

  2. En la barra de fórmulas, establezca las siguientes propiedades para el botón:

    • Propiedad OnSelect = Navigate(AssignManager, Fade). Cuando ejecute la aplicación y haga clic en este botón, irá a la segunda pantalla de la aplicación, con una transición de fundido entre las pantallas.

    • Propiedad Text = "Assign Manager"

  3. Cambie el tamaño del botón para dar cabida al texto.

    Botón de cambio de tamaño.

  4. Inserte otro botón con las siguientes propiedades:

    • Propiedad OnSelect = Navigate(ViewProjects, Fade).

    • Propiedad Text = "Update Details"

      Actualizar texto del botón.

      Nota

      El botón se etiqueta como Update Details, pero primero va a ir a la pantalla ViewProjects para seleccionar un proyecto para actualizar.

Ejecutar la prueba

La aplicación aún no hace mucho, pero se puede ejecutar si así lo desea:

  1. Pulse o haga clic en la pantalla SelectTask (la aplicación siempre se inicia desde la pantalla seleccionada en el modo de vista previa de Power Apps Studio).

  2. Haga clic o pulse en Icono Ejecutar aplicación. en la esquina superior derecha para ejecutar la aplicación.

  3. Pulse o haga clic en uno de los botones para ir a otra pantalla.

  4. Haga clic o pulse en en Icono Cerrar vista previa de aplicación. en la esquina superior derecha para cerrar la aplicación.

Paso 4: Preparación de la pantalla AssignManager

En este paso, se va a usar una galería para mostrar todos los proyectos que se han aprobado pero aún carecen de administrador. Se agregarán otros controles, para que pueda asignar un administrador.

Nota

Más adelante, se va a crear en la aplicación una página que permite editar todos los campos de un proyecto (incluido el de administrador), pero también podría estar bien crear una pantalla como esta.

  1. Guarde los cambios que haya realizado hasta ahora.

  2. En la barra de navegación izquierda, pulse o haga clic en la pantalla AssignManager.

Actualizar el título e insertar el texto de introducción

  1. Cambie [Title] a Assign Manager.

  2. Agregue una etiqueta con las siguientes propiedades:

    • Propiedad Color = DarkGray

    • Propiedad Size = 18

    • Propiedad Text = "Select a project, then assign a manager"

      Diseño de Assign Manager.

Agregar una flecha Atrás para volver a la pantalla SelectTask

  1. Pulse o haga clic en la barra azul en la parte superior de la pantalla.

  2. En la pestaña Insertar, pulse o haga clic en Iconos y en Izquierda.

    Insertar flecha izquierda.

  3. Mueva la flecha al lado izquierdo de la barra azul y establezca las siguientes propiedades:

    • Propiedad Color = White

    • Propiedad Height = 40

    • Propiedad OnSelect = Navigate(SelectTask, Fade)

    • Propiedad Width = 40

      Agregar botón Atrás.

  1. En la pestaña Insertar, pulse o haga clic en Galería y en Vertical.

    Agregar una galería vertical.

  2. Seleccione Título, subtítulo y cuerpo en el menú Diseño en el panel derecho.

    Cambiar el diseño de la galería.

    La galería tiene ahora el diseño correcto, pero aún contiene el texto de ejemplo predeterminado. Esto se va a solucionar a continuación.

    Galería con texto predeterminado.

  3. Establezca las siguientes propiedades para la galería:

    • Propiedad BorderThickness = 1

    • Propiedad BorderStyle = Dotted

    • Propiedad Items = Filter('Project Details', PMAssigned="Unassigned"). Solo se incluyen en la galería los proyectos que no tienen ningún administrador asignado.

      Galería con texto de lista.

  4. En el panel derecho, actualice los campos para que coincidan con la siguiente lista:

    • ApprovedDate

    • Estado

    • Puesto

      Galería.

  5. Cambie el tamaño de las etiquetas en la galería según corresponda y quite la flecha del primer elemento de la galería (no es necesario salir de esta galería).

    Quitar icono de flecha.

    Ahora la pantalla debería parecerse a la siguiente imagen.

    Galería con formato.

Cambiar el color de un elemento si está seleccionado

  1. Seleccione la galería y establezca la propiedad TemplateFill en If (ThisItem.IsSelected=true, Orange, White).

  2. Seleccione un elemento en la galería. Ahora la pantalla debería parecerse a la siguiente imagen.

    Galería con elemento seleccionado.

Agregar una etiqueta, text input y un botón Aceptar para asignaciones de administrador

  1. Pulse o haga clic fuera de la galería en la que ha estado trabajando.

  2. En la pestaña Insertar, pulse o haga clic en Etiqueta. Arrastre la etiqueta debajo de la galería, a la izquierda. Establezca las siguientes propiedades para la etiqueta:

    • Propiedad Size = 20

    • Propiedad Text = "Manager:"

    Agregar la etiqueta Manager.

  3. En la pestaña Insertar, pulse o haga clic en Texto y en Text input. Arrastre text input debajo de la galería, en el centro. Establezca las siguientes propiedades para la lista desplegable:

    • Propiedad Default = ""

    • Propiedad Height = 60

    • Propiedad Size = 20

    • Propiedad Width = 250

    Agregar text input.

  4. En la pestaña Insertar, pulse o haga clic en Botón. Arrastre el botón debajo de la galería, a la derecha. Establezca las siguientes propiedades para el botón:

    • Propiedad Height = 60

    • Propiedad OnSelect = Patch('Project Details', LookUp('Project Details', ID = Gallery1.Selected.ID), {PMAssigned: TextInput1.Text}). Para obtener más información, consulte Análisis en profundidad de una fórmula.

    • Esta fórmula actualiza la lista Project Details y establece un valor para el campo PMAssigned.

    • Propiedad Size = 20

    • Propiedad Text = "OK"

    • Propiedad Width = 80

    Agregar el botón Aceptar.

Ahora la pantalla completada debería parecerse a la siguiente imagen.

Pantalla Assign Manager completada.

Paso 5: Preparación de la pantalla ViewProjects

En este paso, se cambiarán las propiedades para la galería en la pantalla ViewProjects. Esta galería muestra elementos de la lista Project Details. Seleccione un elemento en esta pantalla y edite los detalles en la pantalla UpdateDetails.

  1. En la barra de navegación izquierda, pulse o haga clic en la pantalla ViewProjects.

  2. Cambie [Title] a "View Projects".

  3. En la barra de navegación izquierda, pulse o haga clic en BrowserGallery1 en ViewProjects.

  4. Seleccione Título, subtítulo y cuerpo en el menú Diseño en el panel derecho.

    Cambiar el diseño de la galería.

    La galería tiene ahora el diseño correcto, con el texto de ejemplo predeterminado.

    Galería con diseño correcto.

  5. Seleccione el botón Actualizar Icono Actualizar. y establezca su propiedad OnSelect en Refresh('Project Details').

  6. Seleccione el botón Nuevo elemento Icono Agregar nuevo. y establezca su propiedad OnSelect en NewForm(EditForm1); Navigate(UpdateDetails, ScreenTransition.None).

Agregar una flecha Atrás para volver a la pantalla SelectTask

  1. En la barra de navegación izquierda, pulse o haga clic en la pantalla AssignManager.

  2. Seleccione la flecha Atrás que agregó allí y cópiela.

  3. Pegue la flecha en la pantalla ViewProjects y colóquela a la izquierda del botón Actualizar.

    Botón Atrás.

    La acompañan todas sus propiedades, incluida la propiedad OnSelect de Navigate(SelectTask, Fade).

  1. Seleccione la galería BrowseGallery1 y establezca la propiedad Items de la galería en SortByColumns(Filter('Project Details', StartsWith(Title, TextSearchBox1.Text)), "Title", If(SortDescending1, Descending, Ascending)).

    Esto establece el origen de datos de la galería en la lista Project Details y usa el campo Título para búsquedas y clasificación.

  2. Selecciona el Icono de fecha Detalles. en el primer elemento de la galería y establezca la propiedad OnSelect en Navigate(UpdateDetails, None).

    Galería View Projects; primer elemento seleccionado.

  3. En el panel derecho, actualice los campos para que coincidan con la siguiente lista:

    • Estado

    • PMAssigned

    • Puesto

      Campos de la galería.

      Ahora la pantalla completada debería parecerse a la siguiente imagen.

      Pantalla View Project completada.

Paso 6: Preparación de la pantalla UpdateDetails

En este paso, se conectará el formulario de edición en la pantalla UpdateDetails al origen de datos, y se harán algunos cambios en propiedades y campos. En esta pantalla, puede editar los detalles de un proyecto que haya seleccionado en la pantalla View Projects.

  1. En la barra de navegación izquierda, pulse o haga clic en la pantalla UpdateDetails.

  2. Cambie [Title] a "Update Details".

  3. En la barra de navegación izquierda, pulse o haga clic en EditForm1 en UpdateDetails.

  4. Establezca las siguientes propiedades para el formulario:

    • Propiedad DataSource = 'Project Details'

    • Propiedad Item = BrowseGallery1.Selected

  5. Con el formulario aún seleccionado, en el panel derecho, pulse o haga clic en la casilla de los siguientes campos, en el orden mostrado:

    • Título

    • PMAssigned

    • Estado

    • ProjectedStartDate

    • ProjectedEndDate

    • ProjectedDays

    • ActualDays

      Editar campos de formulario.

  6. Seleccione el botón Cancelar Icono Cancelar. y establezca su propiedad OnSelect en ResetForm(EditForm1); Back().

  7. Seleccione el botón para guardar Icono Guardar con marca de verificación. y consulta la fórmula OnSelect - SubmitForm(EditForm1). Como se va a usar el control de formulario de edición, se puede utilizar Submit() en lugar de Patch(), como antes.

La pantalla completada debería parecerse a la siguiente imagen (si los campos están vacíos, asegúrese de seleccionar un elemento en la pantalla View Projects).

Pantalla Update Details completada.

Paso 7: Ejecución de la aplicación

Ahora que la aplicación está completa, ejecútela para ver cómo funciona. Se agregará un vínculo en el sitio de SharePoint a la aplicación. Podrá ejecutar la aplicación en el explorador, pero es posible que tenga que compartirla para que otras personas la ejecuten. Para obtener más información, consulte Uso compartido de la aplicación.

  1. En el iniciador de aplicaciones de Office 365, pulse o haga clic en Power Apps.

    Power Apps en el iniciador de aplicaciones de Office 365.

  2. En Power Apps, pulse o haga clic en el botón de puntos suspensivos (. . .) para Project Management app y en Abrir.

    Seleccionar Project Management app.

  3. Copie la dirección (URL) de la aplicación en el explorador.

    Copiar URL de la aplicación.

  4. En SharePoint, pulse o haga clic en EDITAR VÍNCULOS.

    Editar vínculos a sitios de SharePoint.

  5. Pulse o haga clic en (+) vínculo.

    Agregar vínculo de aplicación a sitio de SharePoint.

  6. Escriba "Project Management app" y pegue la dirección para la aplicación.

    Editar propiedades del vínculo.

  7. Pulse o haga clic en Aceptar y en Guardar.

    Guardar cambios de vínculo.

Asignar un administrador a un proyecto

Ahora que la aplicación está en este sitio de SharePoint, se va a asumir el rol de aprobador de proyecto; se buscarán proyectos sin administrador asignado y se asignará un administrador a uno de ellos. A continuación, se asumirá el rol de administrador del proyecto y se agregará alguna información sobre un proyecto que se tenga asignado.

  1. En primer lugar, vamos a echar un vistazo a la lista Project Details en SharePoint. Dos proyectos tienen el valor Unassigned en la columna PMAssigned. Se verán en la aplicación.

    Proyectos sin asignar en la lista.

  2. Pulse o haga clic en el vínculo que ha creado a la aplicación.

  3. En la primera pantalla, pulse o haga clic en Asignar administrador.

    Pantalla de introducción de la aplicación.

  4. En la pantalla Asignar administrador, verá los dos proyectos sin asignar en la lista. Seleccione el proyecto New BI software.

    Galería con elemento seleccionado.

  5. En el text input Administrador, escriba "Joni Sherman" y haga clic en Aceptar.

    Se aplica el cambio a la lista y la galería se actualiza, de forma que solo se muestra el proyecto sin asignar restante.

    Asignar administrador al proyecto.

  6. Vuelva a la lista y actualice la página. Verá que la entrada del proyecto se ha actualizado con el nombre del administrador de proyecto.

    Administrador de proyecto asignado en la lista.

Actualizar detalles para el proyecto

  1. Haga clic o pulse el icono Atrás. para volver a la primera pantalla y, a continuación, haga clic o pulse en Actualizar detalles.

    Detalles de la actualización.

  2. En la pantalla View Projects, escriba "New" en el cuadro de búsqueda.

    Buscar en la galería de aplicaciones.

  3. Haga clic en el icono de flecha Detalles. para el elemento New BI software.

    Elemento de la galería seleccionado.

  4. En la pantalla Actualizar detalles, establezca los valores siguientes:

    • El campo ProjectedStartDate = "3/6/2017"

    • El campo ProjectedEndDate = "3/24/2017"

    • El campo ProjectedDays = "15"

    Actualizar detalles de los elementos.

  5. Haga clic o pulse en Icono de marca de verificación. para aplicar el cambio a la lista.

  6. Cierre la aplicación y vuelva a la lista. Verá que la entrada del proyecto se ha actualizado con los cambios de fecha y día.

    Lista actualizada.

Análisis en profundidad de una fórmula

Se trata de la segunda sección opcional sobre las fórmulas de Power Apps. En la primera, se analizó una de las fórmulas que Power Apps genera para la galería de examen en una aplicación de tres pantallas. En este análisis en profundidad, se examinará una fórmula que se usa para la pantalla AssignManager de nuestra segunda aplicación. Esta es la fórmula:

Patch( 'Project Details', LookUp( 'Project Details', ID = Gallery1.Selected.ID ), {PMAssigned: TextInput1.Text} )

¿Qué hace esta fórmula? Cuando selecciona un elemento en la galería y hace clic en el botón Aceptar, la fórmula actualiza la lista Project Details, lo que establece la columna PMAssigned en el valor que especifique en text input. La fórmula usa funciones para realizar todas estas acciones:

  • La función Patch modifica uno o varios registros de un origen de datos.

  • La función LookUp busca el primer registro de una tabla que satisface una fórmula.

Cuando se juntan las funciones en la fórmula, ocurre lo siguiente:

  1. Al hacer clic en el botón Aceptar, se llama a la función Patch para actualizar la lista Project Details.

  2. En la función Patch, la función LookUp identifica qué fila de la lista Project Details se debe actualizar. Para ello, compara el identificador del elemento seleccionado de la galería con el identificador de la lista. Por ejemplo, el identificador 12 significa que la entrada de New BI software debe actualizarse.

  3. Ahora que la función Patch tiene el identificador correcto, actualiza el campo PMAssigned con el valor de TextInput1.Text.

Pasos siguientes

El siguiente paso de esta serie de tutoriales es crear un informe de Power BI para analizar proyectos.

Vea también

Nota

¿Puede indicarnos sus preferencias de idioma de documentación? Realice una breve encuesta. (tenga en cuenta que esta encuesta está en inglés)

La encuesta durará unos siete minutos. No se recopilan datos personales (declaración de privacidad).