Generación de una aplicación para controlar solicitudes de proyectoGenerate an app to handle project requests

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.

Ahora que las listas de SharePoint están en su sitio, podemos generar y personalizar la primera aplicación.Now that the SharePoint lists are in place, we can build and customize our first app. PowerApps está integrado con SharePoint, por lo que es fácil generar una aplicación de tres pantallas básica directamente desde una lista.PowerApps is integrated with SharePoint, so it's easy to generate a basic three screen app directly from a list. Esta aplicación permite ver información tanto resumida como detallada de cada elemento de la lista, actualizar los elementos existentes en la lista y crear nuevos elementos en la lista.This app allows you to view summary and detailed information for each list item, update existing list items, and create new list items. Si crea una aplicación directamente a partir de una lista, esta aparece como un vista en dicha lista.If you create an app directly from a list, the app appears as a view for that list. Posteriormente, dicha aplicación se puede ejecutar tanto en un explorador como en un teléfono móvil.You can then run that app in a browser, as well as on a mobile phone.

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

Paso 1: Generación de una aplicación a partir de una lista de SharePointStep 1: Generate an app from a SharePoint list

  1. En la lista Project Requests que ha creado, pulse o haga clic en PowerApps y, después en, Crear una aplicación.In the Project Requests list you created, click or tap PowerApps, then Create an app.

    Crear una aplicación

  2. Asigne un nombre a la aplicación, como "Project Requests app", y haga clic o pulse en Crear.Give the app a name, like "Project Requests app", then click or tap Create. Cuando la aplicación está lista, se abre en PowerApps Studio para web.When the app is ready, it opens in PowerApps Studio for web.

    Especifique un nombre para la aplicación

Paso 2: Examen de la aplicación en PowerApps StudioStep 2: Review the app in PowerApps Studio

  1. En PowerApps Studio, la barra de navegación izquierda muestra de forma predeterminada una vista jerárquica de las pantallas y los controles de la aplicación.In PowerApps Studio, the left navigation bar by default shows a hierarchical view of the screens and controls in the app.

    PowerApps Studio con la vista jerárquica

  2. Haga clic o pulse en el icono de la miniatura para cambiar de vista.Click or tap the thumbnail icon to switch views.

    Selector de vistas de PowerApps Studio

  3. Pulse o haga clic en la pantalla que desee para verla en el panel central.Click or tap each screen to view it in the middle pane. Hay tres pantallas:There are three screens:

    1. La pantalla de exploración, donde se exploran, ordenan y filtran los datos extraídos de la lista.The browse screen, where you browse, sort, and filter the data pulled in from the list.
    2. La pantalla de detalles, en la que aparece información más detallada de un elemento.The details screen, where you view more detail about an item.
    3. La pantalla de edición o creación, donde se editan los elementos existentes o se crean nuevos.The edit/create screen, where you edit an existing item or create a new one.

      PowerApps Studio con la vista de miniaturas

Paso 3: Personalización de la pantalla de exploración de la aplicaciónStep 3: Customize the app's browse screen

  1. Haga clic o pulse en la pantalla de exploración.Click or tap the browse screen.

    Esta pantalla tiene una diseño que contiene un galería que muestra los elementos de lista, así como otros controles, como una barra de búsqueda y un botón de ordenación.This screen has a layout that contains a gallery to show list items, as well as other controls, like a search bar and sort button.

  2. Seleccione la galería BrowseGallery1 haciendo clic o pulsando en cualquier registro, excepto en el primero.Select the BrowseGallery1 gallery by clicking or tapping any record except the first one.

    Explorar galería

  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:

    • RequestDateRequestDate
    • DescriptionDescription
    • TitleTitle
    • RequestorRequestor

      Campos de la galería

  4. Con BrowseGallery1 aún seleccionado, seleccione la propiedad Elementos.With BrowseGallery1 still selected, select the Items property.

    Propiedad Elementos

  5. Cambie la fórmula a SortByColumns(Filter('Project Requests', StartsWith(Title, TextSearchBox1.Text)), "Title", If(SortDescending1, Descending, Ascending)).Change the formula to SortByColumns(Filter('Project Requests', StartsWith(Title, TextSearchBox1.Text)), "Title", If(SortDescending1, Descending, Ascending)).

    Barra de fórmulas

    Le permite ordenar y buscar por el campo Title, en lugar del predeterminado que eligió PowerApps.This allows you to sort and search by the Title field, instead of the default that PowerApps picked. Para más información, consulte Formula deep-dive (Análisis en profundidad de una fórmula).See Formula deep-dive for more information.

  6. Pulse o haga clic en Archivo y, luego, en Guardar.Click or tap File, then Save. Haga clic o pulse en el icono Back to app (Volver a la aplicación) para volver a la aplicación.Click or tap Back to app icon to go back to the app.

Paso 4: Personalización de la pantalla de detalles y la pantalla de edición de la aplicaciónStep 4: Customize the app's details screen and edit screen

  1. Haga clic o pulse en la pantalla de detalles.Click or tap the details screen.

    Esta pantalla tiene un diseño diferente que contiene un formulario de presentación que muestra los detalles de un elemento seleccionado en la galería.This screen has a different layout that contains a display form to show the details for an item selected in the gallery. Tiene controles para editar y eliminar elementos, y para volver a la pantalla de exploración.It has controls to edit and delete items, and to go back to the browse screen.

  2. Seleccione el formulario de presentación DetailForm1.Select the DetailForm1 display form.

    Detalles del formulario de presentación

  3. En el panel derecho, arrastre el campo Title a la parte superior.In the right pane, drag the Title field to the top.

    Campo Title

  4. Haga clic o pulse en la pantalla de edición.Click or tap the edit screen.

    Esta pantalla contiene un formulario de edición para editar el elemento seleccionado o para crear uno nuevo (si se accede a él directamente desde la pantalla de exploración).This screen contains an edit form to edit the selected item, or create a new one (if you come here directly from the browse screen). Tiene controles para guardar o descartar los cambios.It has controls to save or discard changes.

  5. Seleccione el formulario de edición EditForm1.Select the EditForm1 edit form.

    Formulario de edición

  6. Como antes, arrastre el campo Title a la parte superior.As above, drag the Title field to the top.

    Campo Title

Paso 5: Ejecución de la aplicación desde la listaStep 5: Run the app from the list

  1. En la lista Project Requests, pulse o haga clic en Todos los elementos y en Project Requests app.In the Project Requests list, click or tap All Items, then Project Requests app.

    Ver Project Requests app

  2. Haga clic en Abrir, lo que abre la aplicación en una nueva pestaña de explorador.Click Open, which opens the app in a new browser tab.

    Abrir Project Requests app

  3. En la aplicación, pulse o haga clic enIn the app, click or tap Icono Ir a detalles en el primer elemento de la galería de exploración.for the first item in the browse gallery.

    Primer elemento de la galería

  4. Haga clic o pulse enClick or tap Icono Lápiz (edición) para editar el elemento.to edit the item.
  5. Actualice el campo Description: cambie la última palabra de "group" a "team" y, luego, pulse o haga clic en el icono de marca de verificaciónUpdate the Description field – change the last word from "group" to "team," then click or tap Check mark icon

    Actualizar campo Description

  6. Cierre la pestaña del explorador.Close the browser tab.
  7. Vuelva a la lista Project Requests, pulse o haga clic en Project Requests app y en Todos los elementos.Go back to the Project Requests list, click or tap Project Requests app, then All Items.

    Ver todos los elementos

  8. Compruebe el cambio que realizó en la aplicación.Verify the change you made from the app.

    Comprobar la edición

Se trata de una aplicación muy simple y solo hemos realizado unas pocas personalizaciones básicas, pero se puede ver que es posible crear rápidamente algo interesante.This is a pretty simple app, and we only made a few basic customizations, but you can see it's possible to quickly build something interesting. Vamos a pasar a la tarea siguiente, pero si lo desea, examine la aplicación con mayor profundidad para ver cómo funcionan conjuntamente los controles y las fórmulas para potenciar el comportamiento de la aplicación.We're going to move on to the next task, but look around the app a little more if you want, and see how the controls and formulas work together to drive app behavior.

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

Esta sección es opcional, pero le ayudará a conocer mejor cómo funcionan las fórmulas.This section is optional, but it will help you understand more about how formulas work. En el paso 3 de esta tarea, se modificó la fórmula de la propiedad Elementos de BrowseGallery1.In step 3 of this task, we modified the formula for the Items property of BrowseGallery1. En concreto, se cambió la forma en que se realizaban las acciones de ordenación y búsqueda para utilizar el campo Title, en lugar del campo que PowerApps seleccionaba.Specifically, we changed the sort and search to use the Title field, instead of the field that PowerApps picked. Esta es la fórmula modificada:Here's the modified formula:

SortByColumns ( Filter ( 'Project Requests', StartsWith ( Title, TextSearchBox1.Text ) ), "Title", If ( SortDescending1, Descending, Ascending ) )SortByColumns ( Filter ( 'Project Requests', StartsWith ( Title, TextSearchBox1.Text ) ), "Title", If ( SortDescending1, Descending, Ascending ) )

Pero, ¿qué hace esta fórmula?But what does this formula do? Determina el origen de datos que aparece en la galería, filtra los datos en función del texto que se escriba en el cuadro de búsqueda y ordena los resultados en función del botón de ordenación de la aplicación.It determines the source of data that appears in the gallery, filters the data based on any text entered in the search box, and sorts the results based on the sort button in the app. La fórmula usa funciones para realizar todas estas acciones.The formula uses functions to do its work. Las funciones toman parámetros (es decir, entrada), realizan una operación (por ejemplo, filtrado) y un devuelven un valor (es decir, salida):Functions take parameters (i.e. input), perform an operation (like filtering), and return a value (i.e. output):

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. Si escribe texto en el cuadro de búsqueda, la función StartsWith compara dicho texto con el principio de cada cadena de la columna Title de la lista.If you enter text in the search box, the StartsWith function compares that text to the start of each string in the Title column of the list.

    StartsWith (Title, TextSearchBox1.Text)StartsWith ( Title, TextSearchBox1.Text )

    Por ejemplo, si escribe "de" en el cuadro de búsqueda, verá cuatro resultados, incluidos los elementos que comienza por "Desktop" y "Device".For example, if you enter "de" in the search box, you see four results, including items that start with "Desktop" and "Device." No verá todos los elementos de "Mobile devices" porque no empiezan por "de".You won't see all the "Mobile devices" items because those don't start with "de."

  2. La función Filter devuelve filas de la tabla Project Requests.The Filter function returns rows from the Project Requests table. Si no hay texto en el cuadro de búsqueda con el que comparar, Filter devuelve todas las filas.If there is no text in the search box to compare, Filter returns all rows.

    Filter ('Project Requests', StartsWith (Title, TextSearchBox1.Text)Filter ( 'Project Requests', StartsWith ( Title, TextSearchBox1.Text )

  3. La función If examina si la variable SortDescending1 está establecida en true o false (la establece el botón de ordenación de la aplicación).The If function looks at whether the variable SortDescending1 is set to true or false (the sort button in the app sets it). A continuación, la función devuelve uno de estos dos valores: Descending o Ascending.The function then returns a value of Descending or Ascending.

    If (SortDescending1, Descending, Ascending)If ( SortDescending1, Descending, Ascending )

  4. Ahora la función SortByColumns puede ordenar la galería.Now the SortByColumns function can sort the gallery. En este caso, la ordena por el campo Title, pero puede ser un campo que no se en el que se busca.In this case, it sorts based on the Title field, but this can be a different field than the one you search on.

Si ha seguido la explicación, esperamos que conozca mejor cómo funciona esta fórmula y cómo puede combinar funciones y otros elementos para lograr el comportamiento que las aplicaciones requieren.If you stuck with us up to this point, we hope you have a better sense of how this formula works, and how you can combine functions and other elements to drive the behavior your apps require. Para más información, consulte Referencia sobre fórmulas para PowerApps.For more information, see Formula reference for PowerApps.

Pasos siguientesNext steps

El siguiente paso de esta serie de tutoriales es crear un flujo para administrar aprobaciones de proyectos.The next step in this tutorial series is to Create a flow to manage project approvals.