Nota: Este artículo forma parte de una serie de tutoriales sobre el uso de PowerApps, Microsoft Flow 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.

Ahora que las listas de SharePoint están en su sitio, podemos generar y personalizar la primera aplicación. PowerApps está integrado con SharePoint, por lo que es fácil generar una aplicación de tres pantallas básica directamente desde una lista. 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. Si crea una aplicación directamente a partir de una lista, esta aparece como un vista en dicha lista. Posteriormente, dicha aplicación se puede ejecutar tanto en un explorador como en un teléfono móvil.

Sugerencia: El paquete de descarga para este escenario incluye una versión terminada de la aplicación: project-requests-app.msapp.

Paso 1: Generación de una aplicación a partir de una lista de SharePoint

  1. En la lista Project Requests que ha creado, pulse o haga clic en PowerApps y, después en, Crear una aplicación.

    Crear una aplicación

  2. Asigne un nombre a la aplicación, como "Project Requests app", y haga clic o pulse en Crear. Cuando la aplicación está lista, se abre en PowerApps Studio para web.

    Especifique un nombre para la aplicación

Paso 2: Examen de la aplicación en 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.

    PowerApps Studio con la vista jerárquica

  2. Haga clic o pulse en el icono de la miniatura para cambiar de vista.

    Selector de vistas de PowerApps Studio

  3. Pulse o haga clic en la pantalla que desee para verla en el panel central. Hay tres pantallas:

    1. La pantalla de exploración, donde se exploran, ordenan y filtran los datos extraídos de la lista.
    2. La pantalla de detalles, en la que aparece información más detallada de un elemento.
    3. La pantalla de edición o creación, donde se editan los elementos existentes o se crean nuevos.

    PowerApps Studio con la vista de miniaturas

Paso 3: Personalización de la pantalla de exploración de la aplicación

  1. Haga clic o pulse en la pantalla de exploración.

    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.

  2. Seleccione la galería BrowseGallery1 haciendo clic o pulsando en cualquier registro, excepto en el primero.

    Explorar galería

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

    • RequestDate
    • Description
    • Title
    • Requestor

    Campos de la galería

  4. Con BrowseGallery1 aún seleccionado, seleccione la propiedad Elementos.

    Propiedad Elementos

  5. Cambie la fórmula a 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. Para más información, consulte Formula deep-dive (Análisis en profundidad de una fórmula).

  6. Pulse o haga clic en Archivo y, luego, en Guardar. Haga clic o pulse en el icono Back to app (Volver a la aplicación) para volver a la aplicación.

Paso 4: Personalización de la pantalla de detalles y la pantalla de edición de la aplicación

  1. Haga clic o pulse en la pantalla de detalles.

    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. Tiene controles para editar y eliminar elementos, y para volver a la pantalla de exploración.

  2. Seleccione el formulario de presentación DetailForm1.

    Detalles del formulario de presentación

  3. En el panel derecho, arrastre el campo Title a la parte superior.

    Campo Title

  4. Haga clic o pulse en la pantalla de edición.

    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). Tiene controles para guardar o descartar los cambios.

  5. Seleccione el formulario de edición EditForm1.

    Formulario de edición

  6. Como antes, arrastre el campo Title a la parte superior.

    Campo Title

Paso 5: Ejecución de la aplicación desde la lista

  1. En la lista Project Requests, pulse o haga clic en Todos los elementos y en 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.

    Abrir Project Requests app

  3. En la aplicación, pulse o haga clic en Icono Ir a detalles en el primer elemento de la galería de exploración.

    Primer elemento de la galería

  4. Haga clic o pulse en Icono Lápiz (edición) para editar el elemento.

  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ón

    Actualizar campo Description

  6. Cierre la pestaña del explorador.

  7. Vuelva a la lista Project Requests, pulse o haga clic en Project Requests app y en Todos los elementos.

    Ver todos los elementos

  8. Compruebe el cambio que realizó en la aplicación.

    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. 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.

Análisis en profundidad de una fórmula

Esta sección es opcional, pero le ayudará a conocer mejor cómo funcionan las fórmulas. En el paso 3 de esta tarea, se modificó la fórmula de la propiedad Elementos de 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. Esta es la fórmula modificada:

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

Pero, ¿qué hace esta fórmula? 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. La fórmula usa funciones para realizar todas estas acciones. Las funciones toman parámetros (es decir, entrada), realizan una operación (por ejemplo, filtrado) y un devuelven un valor (es decir, salida):

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

  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.

    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". No verá todos los elementos de "Mobile devices" porque no empiezan por "de".

  2. La función Filter devuelve filas de la tabla Project Requests. Si no hay texto en el cuadro de búsqueda con el que comparar, Filter devuelve todas las filas.

    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). A continuación, la función devuelve uno de estos dos valores: Descending o Ascending.

    If (SortDescending1, Descending, Ascending)

  4. Ahora la función SortByColumns puede ordenar la galería. En este caso, la ordena por el campo Title, pero puede ser un campo que no se en el que se busca.

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. Para más información, consulte Referencia sobre fórmulas para PowerApps.

Pasos siguientes

El siguiente paso de esta serie de tutoriales es crear un flujo para administrar aprobaciones de proyectos.