Crear una aplicación para administrar proyectosCreate an app to manage projects

Nota: Este artículo forma parte de una serie de tutoriales sobre el uso de PowerApps, Microsoft Flow y Power BI con SharePoint Online.Note: This article is part of a tutorial series on using PowerApps, Microsoft Flow, and Power BI with SharePoint Online. Asegúrese de leer la introducción a la serie para hacerse una idea general, así como para obtener descargas relacionadas.Make sure you read the series introduction to get a sense of the big picture, as well as related downloads.

En esta tarea, se va a crear una aplicación desde el principio.In this task, we'll build an app from scratch. Esta aplicación permite a un usuario asignar un administrador a proyectos y actualizar los detalles de proyectos.This app allows a user to assign a manager to projects and to update project details. 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.You will see some of the same controls and formulas you saw in the first app, but you will build more of the app yourself this time. El proceso es más complejo, pero aprenderá más, por lo que el equilibrio debería ser razonable.The process is more complex, but you'll learn more, so we think it's a fair trade-off.

Sugerencia: El paquete de descarga para este escenario incluye una versión terminada de la aplicación: project-details-app.msapp.Tip: The download package for this scenario includes a finished version of this app: project-details-app.msapp.

Repaso rápido de PowerApps StudioQuick review of PowerApps Studio

Usó PowerApps Studio para web en la última tarea, pero aquí el objetivo es confirmar que comprende todas las partes antes de seguir adelante.You used PowerApps Studio for web in the last task, but we want to make sure you understand all the parts before we move on. Puede seguir trabajando en PowerApps Studio para web o puede usar PowerApps Studio para Windows.You can continue to work in PowerApps Studio for web, or you can use PowerApps Studio for Windows.

PowerApps Studio tiene tres paneles y una cinta de opciones que hacen que crear aplicaciones sea similar a crear un conjunto de diapositivas en PowerPoint:PowerApps Studio has three panes and a ribbon that make app creation feel like building a slide deck in 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.Left navigation bar, which shows a hierarchical view of all the app's screens and controls, as well as thumbnails of the screens
  2. Panel central, que contiene la pantalla de la aplicación con la que está trabajando.Middle pane, which contains the app screen you are working on
  3. Panel derecho, donde se establecen opciones como los orígenes de datos y el diseño.Right-hand pane, where you set options like layout and data sources
  4. Lista desplegable Propiedad, donde se seleccionan las propiedades a las que se aplican las fórmulas.Property drop-down list, where you select the properties that formulas apply to
  5. Barra de fórmulas, donde se agregan las fórmulas (como en Excel) que definen el comportamiento de la aplicación.Formula bar, where you add formulas (like in Excel) that define app behavior
  6. Cinta de opciones, donde puede agregar controles y personalizar los elementos de diseño.Ribbon, where you add controls and customize design elements

PowerApps Studio

Paso 1: Creación de pantallasStep 1: Create screens

Una vez terminado el repaso, empiece a crear una aplicación.With that review out of the way, let's start building an app.

Crear y guardar la aplicaciónCreate and save the app

  1. En PowerApps Studio, pulse o haga clic en Nuevo, en Aplicación vacía y en Diseño de teléfono.In PowerApps Studio, click or tap New, then under Blank app, click or tap Phone Layout.

    Aplicación vacía, diseño de teléfono

  2. Pulse o haga clic en Archivo, lo que abre en una pestaña Configuración de la aplicación. Escriba el nombre "Project Management app".Click or tap File, which opens to an App settings tab. Enter the name "Project Management app".

    Nombre de la aplicación

  3. Pulse o haga clic en Guardar como, compruebe que la aplicación se guardará en la nube y haga clic en Guardar en la esquina inferior derecha.Click or tap Save as, verify that the app will save to the cloud, then click Save in the lower right corner.

    Guardar en la nube

  4. Haga clic o pulseClick or tap en Icono Volver a la aplicación para volver a la aplicación.to go back to the app.

Agregar cuatro pantallas a la aplicaciónAdd four screens to the app

En este paso, se van a crear cuatro pantallas en blanco para la aplicación.In this step, we'll create four blank screens for the app. Se usarán diseños de pantalla diferentes, según el propósito de la pantalla.We'll use different screen layouts, depending on the screen's purpose. Se agregarán más pantallas en pasos posteriores.We'll add to these screens in later steps.

PantallaScreen PropósitoPurpose
SelectTaskSelectTask Pantalla de apertura; navegar a otras pantallas.Opening screen; navigate to other screens
AssignManagerAssignManager Asignar un administrador a un proyecto aprobado.Assign a manager to an approved project
ViewProjectsViewProjects Ver una lista de proyectos, con información de resumen.View a list of projects, with summary information
UpdateDetailsUpdateDetails Ver y actualizar los detalles de un proyecto.View and update the details for a project
  1. En la pestaña Inicio, pulse o haga clic en Nueva pantalla y en Pantalla desplazable.On the Home tab, click or tap NewScreen, then Scrollable screen.

    Pantalla desplazable

  2. Cambie el nombre de la pantalla a SelectTask.Rename the screen to SelectTask.

    Cambiar el nombre de pantalla

  3. Cree y cambie el nombre de pantallas adicionales:Create and rename additional screens:

    1. Pulse o haga clic en Nueva pantalla y en Pantalla desplazable.Click or tap NewScreen, then Scrollable screen. Cambie el nombre de la pantalla a AssignManager.Rename the screen to AssignManager.
    2. Pulse o haga clic en Nueva pantalla y en Pantalla de lista.Click or tap NewScreen, then List screen. Cambie el nombre de la pantalla a ViewProjects.Rename the screen to ViewProjects.
    3. Pulse o haga clic en Nueva pantalla y en Pantalla de formulario.Click or tap NewScreen, then Form screen. Cambie el nombre de la pantalla a UpdateDetails.Rename the screen to UpdateDetails.
  4. Seleccione los puntos suspensivos () junto a Screen1 y pulse o haga clic en Eliminar.Select the ellipsis (. . .) next to Screen1, then click or tap Delete.

    Eliminar pantalla

Ahora la aplicación debería parecerse a la siguiente imagen.The app should now look like the following image.

Todas las pantallas de la aplicación

Paso 2: Conexión a una lista de SharePointStep 2: Connect to a SharePoint list

En este paso, se conectará a la lista de SharePoint Detalles del producto.In this step, we'll connect to the Product Details SharePoint list. Solo se usa una lista en esta aplicación, pero puede conectarse fácilmente a ambas si desea ampliarla.We only use one list in this app, but you could easily connect to both if you want to extend the app.

  1. En la barra de navegación izquierda, pulse o haga clic en la pantalla SelectTask.In the left navigation bar, click or tap the SelectTask screen.
  2. En el panel derecho, pulse o haga clic en Agregar origen de datos.In the right pane, click or tap Add data source.

    Conectarse a datos

  3. Pulse o haga clic en Nueva conexión.Click or tap New connection.

    Nueva conexión

  4. Pulse o haga clic en SharePoint.Click or tap SharePoint.

    Conexión de SharePoint

  5. Seleccione Conectar directamente (servicios en la nube) y pulse o haga clic en Crear.Select Connect directly (cloud services), then click or tap Create.

    Conectar directamente (servicios en la nube)

  6. Escriba una dirección URL de SharePoint y pulse o haga clic en Ir.Enter a SharePoint URL, then click or tap Go.

    Dirección URL de SharePoint para la conexión

  7. Seleccione la lista Project Details y pulse o haga clic en Conectar.Select the Project Details list, then click or tap Connect.

    Seleccionar la lista Project Details

    La pestaña Orígenes de datos en el panel derecho muestra ahora la conexión que ha creado.The Data sources tab in the right pane now shows the connection that you have created.

    Pestaña Orígenes de datos

Paso 3: Preparación de la pantalla SelectTaskStep 3: Build the SelectTask screen

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 PowerApps.In this step, we'll provide a way to navigate to the other screens in the app - working with some of the controls, formulas, and formatting options that PowerApps provides.

Actualizar el título e insertar el texto de introducciónUpdate the title and insert introductory text

  1. En la barra de navegación izquierda, seleccione la pantalla SelectTask.In the left navigation bar, select the SelectTask screen.
  2. En el panel central, seleccione el valor predeterminado [Título] y, en la barra de fórmulas, actualice la propiedad Texto a "Contoso Project Management".In the middle pane, select the default [Title], then in the formula bar, update the Text property to "Contoso Project Management".

    Propiedad Texto 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.On the Insert tab, click or tap Label, then drag the label down below the top banner.

    Agregar etiqueta

  4. En la barra de fórmulas, establezca las siguientes propiedades para la etiqueta:In the formula bar, set the following properties for the label:

    • Propiedad Color = GrisOscuroColor property = DarkGray
    • Propiedad Tamaño = 18Size property = 18
    • Propiedad Texto = "Click or tap a task to continue…"Text property = "Click or tap a task to continue..."

      Actualizar el texto de la etiqueta

Agregar dos botones de navegaciónAdd two navigation buttons

  1. En la pestaña Insertar, pulse o haga clic en Botón y arrastre el botón debajo de la etiqueta.On the Insert tab, click or tap Button, then drag the button below the label.

    Botón Agregar

  2. En la barra de fórmulas, establezca las siguientes propiedades para el botón:In the formula bar, set the following properties for the button:

    • Propiedad AlSeleccionar = Navigate(AssignManager, Fade).OnSelect property = 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.When you run the app and click this button, you navigate to the second screen in the app, with a fade transition between the screens.
    • Propiedad Texto = "Assign Manager"Text property = "Assign Manager"
  3. Cambie el tamaño del botón para dar cabida al texto.Resize the button to accommodate the text.

    Actualizar texto del botón

  4. Inserte otro botón con las siguientes propiedades:Insert another button with the following properties:

    • Propiedad AlSeleccionar = Navigate(ViewProjects, Fade).OnSelect property = Navigate(ViewProjects, Fade).
    • Propiedad Texto = "Update Details"Text property = "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.Note: The button is labeled Update Details, but we first navigate to the ViewProjects screen to select a project to update.

Ejecutar la aplicaciónRun the app

La aplicación aún no hace mucho, pero se puede ejecutar si así lo desea:The app doesn't do a lot yet, but you can run it if you like:

  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 PowerApps Studio).Click or tap the SelectTask screen (the app always starts from the selected screen in Preview mode in PowerApps Studio).
  2. Haga clic o pulseClick or tap Icono Ejecutar aplicación en la esquina superior derecha para ejecutar la aplicación.in the upper right corner to run the app.
  3. Pulse o haga clic en uno de los botones para ir a otra pantalla.Click or tap one of the buttons to navigate to another screen.
  4. Haga clic o pulseClick or tap en Icono Cerrar vista previa de aplicación en la esquina superior derecha para cerrar la aplicación.in the upper right corner to close the app.

Paso 4: Preparación de la pantalla AssignManagerStep 4: Build the AssignManager screen

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.In this step, we'll use a gallery to display all projects that have been approved but don't yet have a manager. Se agregarán otros controles, para que pueda asignar un administrador.We'll add other controls, so you can assign a manager.

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.Note: We'll build a page later in the app that allows you to edit all fields for a project (including the manager field), but we thought it would be cool to build a screen like this one as well.

  1. Guarde los cambios que haya realizado hasta ahora.Save the changes you've made so far.
  2. En la barra de navegación izquierda, pulse o haga clic en la pantalla AssignManager.In the left navigation bar, click or tap the AssignManager screen.

Actualizar el título e insertar el texto de introducciónUpdate the title and insert introductory text

  1. Cambie [Título] a Assign Manager.Change [Title] to Assign Manager.
  2. Agregue una etiqueta con las siguientes propiedades:Add a label with the following properties:

    • Propiedad Color = GrisOscuroColor property = DarkGray
    • Propiedad Tamaño = 18Size property = 18
    • Propiedad Texto = "Select a project, then assign a manager"Text property = "Select a project, then assign a manager"

      Diseño de Assign Manager

Agregar una flecha Atrás para volver a la pantalla SelectTaskAdd a back arrow to return to the SelectTask screen

  1. Pulse o haga clic en la barra azul en la parte superior de la pantalla.Click or tap the blue bar at the top of the screen.
  2. En la pestaña Insertar, pulse o haga clic en Iconos y en Izquierda.On the Insert tab, click or tap Icons, then click or tap Left.

    Insertar flecha izquierda

  3. Mueva la flecha al lado izquierdo de la barra azul y establezca las siguientes propiedades:Move the arrow to the left side of the blue bar, and set the following properties:

    • Propiedad Color = BlancoColor property = White
    • Propiedad Alto = 40Height property = 40
    • Propiedad AlSeleccionar = Navigate(SelectTask, Fade)OnSelect property = Navigate(SelectTask, Fade)
    • Propiedad Ancho = 40Width property = 40

      Agregar botón Atrás

  1. En la pestaña Insertar, pulse o haga clic en Galería y en Vertical.On the Insert tab, click or tap Gallery, then Vertical.

    Agregar una galería vertical

  2. Seleccione Título, subtítulo y cuerpo en el menú Diseño en el panel derecho.Select Title, subtitle, and body from the Layout menu in the right pane.

    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.The gallery now has the right layout, but it still has the default sample text. Esto se va a solucionar a continuación.We'll fix that next.

    Galería con texto predeterminado

  3. Establezca las siguientes propiedades para la galería:Set the following properties for the gallery:

    • Propiedad GrosorDelBorde = 1BorderThickness property = 1
    • Propiedad EstiloDelBorde = PunteadoBorderStyle property = Dotted
    • Propiedad Elementos = Filter('Project Details', PMAssigned="Unassigned").Items property = Filter('Project Details', PMAssigned="Unassigned"). Solo se incluyen en la galería los proyectos que no tienen ningún administrador asignado.Only projects with no manager assigned are included in the gallery.

      Galería con texto de lista

  4. En el panel derecho, actualice los campos para que coincidan con la siguiente lista:In the right pane, update the fields to match the following list:

    • ApprovedDateApprovedDate
    • StatusStatus
    • TitleTitle

      Campos de la 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).Resize labels in the gallery as appropriate, and remove the arrow from the first gallery item (we don't need to navigate anywhere from this gallery).

    Quitar icono de flecha

    Ahora la pantalla debería parecerse a la siguiente imagen.The screen should now look like the following image.

    Galería con formato

Cambiar el color de un elemento si está seleccionadoChange the color of an item if it's selected

  1. Seleccione la galería y establezca la propiedad RellenoDePlantilla en If (ThisItem.IsSelected=true, Orange, White).Select the gallery, then set the TemplateFill property to If (ThisItem.IsSelected=true, Orange, White).
  2. Seleccione un elemento en la galería.Select an item in the gallery. Ahora la pantalla debería parecerse a la siguiente imagen.The screen should now look like the following image.

    Galería con elemento seleccionado

Agregar una etiqueta, entrada de texto y un botón OK para asignaciones de administradorAdd a label, text input, and OK button to submit manager assignments

  1. Pulse o haga clic fuera de la galería en la que ha estado trabajando.Click or tap outside the gallery you've been working on.
  2. En la pestaña Insertar, pulse o haga clic en Etiqueta.On the Insert tab, click or tap Label. Arrastre la etiqueta debajo de la galería, a la izquierda.Drag the label below the gallery, to the left. Establezca las siguientes propiedades para la etiqueta:Set the following properties for the label:

    • Propiedad Tamaño = 20Size property = 20
    • Propiedad Texto = "Manager:"Text property = "Manager:"

    Agregar la etiqueta Manager

  3. En la pestaña Insertar, pulse o haga clic en Texto y en Entrada de texto.On the Insert tab, click or tap Text, then Text input. Arrastre la entrada de texto debajo de la galería, en el centro.Drag the text input below the gallery, in the center. Establezca las siguientes propiedades para la lista desplegable:Set the following properties for the drop down:

    • Propiedad Predeterminado = ""Default property = ""
    • Propiedad Alto = 60Height property = 60
    • Propiedad Tamaño = 20Size property = 20
    • Propiedad Ancho = 250Width property = 250

    Agregar entrada de texto

  4. En la pestaña Insertar, pulse o haga clic en Botón.On the Insert tab, click or tap Button. Arrastre el botón debajo de la galería, a la derecha.Drag the button below the gallery, to the right. Establezca las siguientes propiedades para el botón:Set the following properties for the button:

    • Propiedad Alto = 60Height property = 60
    • Propiedad AlSeleccionar = Patch('Project Details', LookUp('Project Details', ID = Gallery1.Selected.ID), {PMAssigned: TextInput1.Text}).OnSelect property = Patch('Project Details', LookUp('Project Details', ID = Gallery1.Selected.ID), {PMAssigned: TextInput1.Text}). Para más información, consulte Análisis en profundidad de una fórmula.For more information, see Formula deep-dive.
    • Esta fórmula actualiza la lista Project Details y establece un valor para el campo PMAssigned.This formula updates the Project Details list, setting a value for the PMAssigned field.
    • Propiedad Tamaño = 20Size property = 20
    • Propiedad Texto = "OK"Text property = "OK"
    • Propiedad Ancho = 80Width property = 80

    Agregar el botón OK

Ahora la pantalla completada debería parecerse a la siguiente imagen.The completed screen should now look like the following image.

Pantalla Assign Manager completada

Paso 5: Preparación de la pantalla ViewProjectsStep 5: Build the ViewProjects screen

En este paso, se cambiarán las propiedades para la galería en la pantalla ViewProjects.In this step, we'll change properties for the gallery on the ViewProjects screen. Esta galería muestra elementos de la lista Project Details.This gallery displays items from the Project Details list. Seleccione un elemento en esta pantalla y edite los detalles en la pantalla UpdateDetails.You select an item on this screen, then you edit the details on the UpdateDetails screen.

  1. En la barra de navegación izquierda, pulse o haga clic en la pantalla ViewProjects.In the left navigation bar, click or tap the ViewProjects screen.
  2. Cambie [Título] a "View Projects".Change [Title] to "View Projects".
  3. En la barra de navegación izquierda, pulse o haga clic en BrowseGallery1 en ViewProjects.In the left navigation bar, click or tap BrowserGallery1 under ViewProjects.
  4. Seleccione Título, subtítulo y cuerpo en el menú Diseño en el panel derecho.Select Title, subtitle, and body from the Layout menu in the right pane.

    Cambiar el diseño de la galería

    La galería tiene ahora el diseño correcto, con el texto de ejemplo predeterminado.The gallery now has the right layout, with the default sample text.

    Galería con texto predeterminado

  5. Seleccione el botón Actualizar Icono Actualizar y establezca su propiedad AlSeleccionar en Refresh('Project Details').Select the refresh button Refresh icon, and set its OnSelect property to Refresh('Project Details').
  6. Seleccione el botón Nuevo elemento Icono Agregar nuevo y establezca su propiedad AlSeleccionar en NewForm(EditForm1); Navigate(UpdateDetails, ScreenTransition.None).Select the new item button Add new icon, and set its OnSelect property to NewForm(EditForm1); Navigate(UpdateDetails, ScreenTransition.None).

Agregar una flecha Atrás para volver a la pantalla SelectTaskAdd a back arrow to return to the SelectTask screen

  1. En la barra de navegación izquierda, pulse o haga clic en la pantalla AssignManager.In the left navigation bar, click or tap the AssignManager screen.
  2. Seleccione la flecha Atrás que agregó allí y cópiela.Select the back arrow you added there, and copy it.
  3. Pegue la flecha en la pantalla ViewProjects y colóquela a la izquierda del botón Actualizar.Paste the arrow into the ViewProjects screen and position it to the left of the refresh button.

    Botón Atrás

    La acompañan todas sus propiedades, incluida la propiedad AlSeleccionar de Navigate(SelectTask, Fade).All its properties come along with it, including the OnSelect property of Navigate(SelectTask, Fade).

  1. Seleccione la galería BrowseGallery1 y establezca la propiedad Elementos de la galería en SortByColumns(Filter('Project Details', StartsWith(Title, TextSearchBox1.Text)), "Title", If(SortDescending1, Descending, Ascending)).Select the BrowseGallery1 gallery, and set the Items property of the gallery to 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.This sets the data source of the gallery to the Project Details list, and uses the Title field for search and sort.

  2. Seleccione Icono de flecha de detalles en el primer elemento de la galería y establezca la propiedad AlSeleccionar en Navigate(UpdateDetails, None).Select the Details arrow icon in the first gallery item, and set the OnSelect property to Navigate(UpdateDetails, None).

     <span data-ttu-id="c3c1b-322">Galería View Projects; primer elemento seleccionado</span><span class="sxs-lookup"><span data-stu-id="c3c1b-322">View Projects gallery - first item selected</span></span>

  3. En el panel derecho, actualice los campos para que coincidan con la siguiente lista:In the right pane, update the fields to match the following list:

    • StatusStatus
    • PMAssignedPMAssigned
    • TitleTitle

      Campos de la galería

      Ahora la pantalla completada debería parecerse a la siguiente imagen.The completed screen should now look like the following image.

      Pantalla View Project completada

Paso 6: Preparación de la pantalla UpdateDetailsStep 6: Build the UpdateDetails screen

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.In this step, we'll connect the edit form on the UpdateDetails screen to our data source, and we'll make some property and field changes. En esta pantalla, puede editar los detalles de un proyecto que haya seleccionado en la pantalla View Projects.On this screen, you edit details for a project that you selected on the View Projects screen.

  1. En la barra de navegación izquierda, pulse o haga clic en la pantalla UpdateDetails.In the left navigation bar, click or tap the UpdateDetails screen.
  2. Cambie [Título] a "Update Details".Change [Title] to "Update Details".
  3. En la barra de navegación izquierda, pulse o haga clic en EditForm1 en UpdateDetails.In the left navigation bar, click or tap EditForm1 under UpdateDetails.
  4. Establezca las siguientes propiedades para el formulario:Set the following properties for the form:

    • Propiedad OrigenDeDatos = 'Project Details'DataSource property = 'Project Details'
    • Propiedad Elemento = BrowseGallery1.SelectedItem property = 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:With the form still selected, in the right pane click or tap the checkbox for the following fields, in the order shown:

    • TitleTitle
    • PMAssignedPMAssigned
    • StatusStatus
    • ProjectedStartDateProjectedStartDate
    • ProjectedEndDateProjectedEndDate
    • ProjectedDaysProjectedDays
    • ActualDaysActualDays

      Editar campos de formulario

  6. Seleccione el botón Cancelar Icono Cancelar y establezca su propiedad AlSeleccionar en ResetForm(EditForm1); Back().Select the cancel button Cancel icon, and set its OnSelect property to ResetForm(EditForm1); Back().
  7. Seleccione el botón Guardar Icono Guardar con marca de verificación y consulte la fórmula de AlSeleccionar: SubmitForm(EditForm1).Select the save button Checkmark save icon and check out the OnSelect formula - SubmitForm(EditForm1). Como se va a usar el control de formulario de edición, se puede utilizar Submit() en lugar de Patch(), como antes.Because we're using the edit form control, we can use Submit(), instead of using Patch() like we did earlier.

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).The completed screen should now look like the following image (if the fields are blank, make sure you select an item on the View Projects screen).

Pantalla Update Details completada

Paso 7: Ejecución de la aplicaciónStep 7: Run the app

Ahora que la aplicación está completa, ejecútela para ver cómo funciona.Now that the app is complete, let's run it to see how it works. Se agregará un vínculo en el sitio de SharePoint a la aplicación.We'll add a link on the SharePoint site to the app. Podrá ejecutar la aplicación en el explorador, pero es posible que tenga que compartirla para que otras personas la ejecuten.You will be able to run the app in the browser, but you might need to share the app for other people to run it. Para más información, consulte Uso compartido de las aplicaciones.For more information, see Share your apps.

  1. En el iniciador de aplicaciones de Office 365, pulse o haga clic en PowerApps.In the Office 365 app launcher, click or tap PowerApps.

    PowerApps en el iniciador de aplicaciones de Office 365

  2. En PowerApps, pulse o haga clic en el botón de puntos suspensivos () para Project Management app y en Abrir.In PowerApps, click or tap the ellipsis (. . .) for Project Management app, then Open.

    Seleccionar Project Management app

  3. Copie la dirección (URL) de la aplicación en el explorador.Copy the address (URL) for the app in the browser.

    Copiar la dirección URL de la aplicación

  4. En SharePoint, pulse o haga clic en EDITAR VÍNCULOS.In SharePoint, click or tap EDIT LINKS.

    Editar vínculos de sitio de SharePoint

  5. Pulse o haga clic en (+) vínculo.Click or tap (+) link.

    Agregar vínculo de la aplicación al sitio de SharePoint

  6. Escriba "Project Management app" y pegue la dirección para la aplicación.Enter "Project Management app", and paste in the address for the app.

    Editar propiedades del vínculo

  7. Pulse o haga clic en Aceptar y en Guardar.Click or tap OK, then Save.

    Guardar cambios de vínculo

Asignar un administrador a un proyectoAssign a manager to a project

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.Now that we have the app in our SharePoint site, we'll assume the role of the project approver - we'll look for any projects that don't have a manager assigned, and assign a manager to one of the projects. A continuación, se asumirá el rol de administrador del proyecto y se agregará alguna información sobre un proyecto que se tenga asignado.Then we'll assume the role of the project manager, and add some information about a project that is assigned to us.

  1. En primer lugar, se va a echar un vistazo a la lista Project Details en SharePoint.First, let's look at the Project Details list in SharePoint. Dos proyectos tienen el valor Sin asignar en la columna PMAssigned.Two projects have a value of Unassigned in the PMAssigned column. Se verán en la aplicación.We will see these in the app.

    Proyectos sin asignar en la lista de SharePoint

  2. Pulse o haga clic en el vínculo que ha creado a la aplicación.Click or tap the link that you created to the app.
  3. En la primera pantalla, pulse o haga clic en Assign Manager.On the first screen, click or tap Assign Manager.

    Pantalla de introducción de la aplicación

  4. En la pantalla Assign Manager, verá los dos proyectos sin asignar en la lista.On the Assign Manager screen, you see the two unassigned projects from the list. Seleccione el proyecto New BI software.Select the New BI software project.

    Galería con elemento seleccionado

  5. En la entrada de texto Manager, escriba "Joni Sherman" y haga clic en OK.In the Manager text input, enter "Joni Sherman", then click OK.

    Se aplica el cambio a la lista y la galería se actualiza, de forma que solo se muestra el proyecto sin asignar restante.The change is applied to the list, and the gallery refreshes so only the remaining unassigned project is displayed.

    Asignar administrador al proyecto

  6. Vuelva a la lista de SharePoint y actualice la página.Go back to the SharePoint list and refresh the page. Verá que la entrada del proyecto se ha actualizado con el nombre del administrador de proyecto.You'll see that the project entry is now updated with the project manager name.

    Administrador de proyecto asignado en la lista de SharePoint

Actualizar detalles para el proyectoUpdate details for the project

  1. Pulse o haga clic en Icono Atrás para volver a la primera pantalla y en Update Details.Click or tap Back icon to go back to the first screen, then click or tap Update Details.

    Pantalla de introducción de la aplicación

  2. En la pantalla View Projects, escriba "New" en el cuadro de búsqueda.On the View Projects screen, enter "New" in the search box.

    Buscar en la galería de aplicaciones

  3. Haga clic en Icono de flecha de detalles para el elemento New BI software.Click Details arrow icon for the New BI software item.

    Elemento de la galería seleccionado

  4. En la pantalla Update Details, establezca los valores siguientes:On the Update Details screen, set the following values:

    • El campo ProjectedStartDate = "3/6/2017"The ProjectedStartDate field = "3/6/2017"
    • El campo ProjectedEndDate = "3/24/2017"The ProjectedEndDate field = "3/24/2017"
    • El campo ProjectedDays = "15"The ProjectedDays field = "15"

    Actualizar detalles de los elementos

  5. Haga clic o pulseClick or tap en Icono de marca de verificación para aplicar el cambio a la lista de SharePoint.to apply the change to the SharePoint list.
  6. Cierre la aplicación y vuelva a la lista.Close the app, and go back to the list. Verá que la entrada del proyecto se ha actualizado con los cambios de fecha y día.You see that the project entry is now updated with the date and day changes.

    Lista de SharePoint actualizada

Análisis en profundidad de una fórmulaFormula deep-dive

Se trata de la segunda sección opcional sobre las fórmulas de PowerApps.This is the second optional section on PowerApps formulas. En la primera, se analizó una de las fórmulas que PowerApps genera para la galería de examen en una aplicación de tres pantallas.In the first deep-dive, we looked at one of the formulas that PowerApps generates for the browse gallery in a three-screen app. En este análisis en profundidad, se examinará una fórmula que se usa para la pantalla AssignManager de nuestra segunda aplicación.In this deep-dive, we'll look at a formula that we use for the AssignManager screen of our second app. Esta es la fórmula:Here's the formula:

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

¿Qué hace esta fórmula?What does this formula do? 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 la entrada de texto.When you select an item in the gallery and click the OK button, the formula updates the Project Details list, setting the PMAssigned column to the value that you specify in the text input. La fórmula usa funciones para realizar su trabajo:The formula uses functions to do its work:

  • La función Revisión modifica uno o varios registros de un origen de datos.The Patch function modifies one or more records of a data source.
  • La función Búsqueda busca el primer registro de una tabla que satisfaga una fórmula.The LookUp function finds the first record in a table that satisfies a formula.

Cuando se juntan las funciones en la fórmula, ocurre lo siguiente:When you put the functions together in the formula, here's what happens:

  1. Al hacer clic en el botón Aceptar, se llama a la función Revisión para actualizar la lista Project Details.When you click the OK button, the Patch function is called to update the Project Details list.
  2. En la función Revisión, la función Búsqueda identifica qué fila de la lista Project Details se debe actualizar.Within the Patch function, the LookUp function identifies which row of the Project Details list to update. Para ello, compara el identificador del elemento seleccionado de la galería con el identificador de la lista.It does this by comparing the ID of the selected gallery item to the ID in the list. Por ejemplo, el identificador 12 significa que la entrada de New BI software debe actualizarse.For example, an ID of 12 means that the entry for New BI software should be updated.
  3. Ahora que la función Revisión tiene el identificador correcto, actualiza el campo PMAssigned con el valor de TextInput1.Text.Now that the Patch function has the right ID, it updates the PMAssigned field to the value in TextInput1.Text.

Pasos siguientesNext steps

El siguiente paso en esta serie de tutoriales es crear un informe de Power BI para analizar proyectos.The next step in this tutorial series is to create a Power BI report to analyze projects.