Cree su propia aplicación desde cero mediante cualquiera de los orígenes de datos existentes. Posteriormente, podrá agregar más orígenes si lo desea. Especifique la apariencia y el comportamiento de cada elemento de la interfaz de usuario para que pueda obtener el mejor resultado de acuerdo con sus objetivos y el flujo de trabajo especificados. Este enfoque es mucho más lento que crear una aplicación automáticamente, pero los creadores de aplicaciones con experiencia pueden crear aplicaciones mejor adaptadas a sus necesidades.

Nota: Este tema se ha escrito para PowerApps Studio para Windows, pero los pasos serán similares si abre PowerApps en un explorador.

Si sigue este tutorial, creará una aplicación que contiene dos pantallas. En una pantalla, los usuarios pueden navegar a través de un conjunto de registros:

Pantalla en la que el usuario puede desplazarse a través de un conjunto de datos

En la otra pantalla, los usuarios pueden crear un registro, actualizar uno o varios campos de un registro o eliminar uno:

Pantalla en la que un usuario puede agregar o actualizar datos

Requisitos previos

Puede consultar este tutorial para ver los conceptos generales o puede seguirlo exactamente y completar estos pasos.

  1. Copie estos datos y péguelos en un archivo de Excel.

    Día de inicio Hora de inicio Voluntario 1 Voluntario 2
    Sábado 10 a.m. a mediodía Vasquez Kumashiro
    Sábado mediodía a 2 p.m. Ice Singhal
    Sábado 2 p.m. a 4 p.m. Myk Mueller
    Domingo 10 a.m. a mediodía Li Adams
    Domingo 10 a.m. a mediodía Singh Morgan
    Domingo 10 a.m. a mediodía Batye Nguyen
  2. Dé a los datos un formato de tabla, llamada Programa, para que PowerApps pueda analizar la información.

    Para más información, consulte Crear o eliminar una tabla de Excel.

  3. Guarde el archivo con el nombre eventsignup.xlsy, a continuación, cárguelo en una cuenta de almacenamiento en la nube, como OneDrive.

  4. Si no está familiarizado con PowerApps:

Crear una aplicación vacía y conexión a los datos

  1. En PowerApps Studio, pulse o haga clic en Nuevo en el menú Archivo (cerca del borde izquierdo de la pantalla).

    Opción Nuevo en el menú Archivo

  2. En el icono Aplicación vacía, pulse o haga clic en Diseño de teléfono.

    Opción para crear una aplicación a partir de datos

  3. Si se le solicita, realice el paseo introductorio para comprender las principales áreas de PowerApps (o haga clic o pulse en Omitir).

    Paseo introductorio

    Siempre puede realizar el paseo más tarde haciendo clic o pulsando en el icono del signo de interrogación situado cerca de la esquina superior izquierda de la pantalla y, a continuación, haciendo clic o pulsando en Take the intro tour (Realizar paseo introductorio).

  4. Cerca de la esquina inferior derecha, pulse o haga clic en Orígenes de datos.

    Abrir la pestaña Orígenes de datos

  5. En el panel de la derecha, haga clic o pulse en Agregar origen de datos.

    Agregar origen de datos

  6. Realice uno de estos pasos:

    • Si ya tiene una conexión a su cuenta de almacenamiento en la nube, haga clic o pulse en ella.
    • Si no tiene una conexión a la cuenta de almacenamiento en la nube, haga clic o pulse en Agregar conexión, después en el tipo de cuenta, posteriormente en Conectar y, finalmente (si se le solicita), proporcione sus credenciales.
  7. En Choose an Excel file (Elegir un archivo de Excel), vaya a eventsignup.xlsx y haga clic o pulse en él.

    Especifique el archivo de Excel que desea usar

  8. En Choose a table (Elegir una tabla), seleccione la casilla Programación y, a continuación, haga clic o pulse en Conectar.

    Especifique la tabla de Excel que desea usar

    La pestaña Orígenes de datos del panel derecho muestra qué orígenes de datos ha agregado a la aplicación.

    Mostrar orígenes de datos conectados

    Este tutorial requiere un único origen de datos, pero puede agregar más orígenes de datos posteriormente.

Mostrar los datos

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

    Agregar un diseño con un título, un subtítulo y un elemento de cuerpo

    Se agrega una pantalla con varios controles predeterminados, como un cuadro de búsqueda y un control de Galería . La galería cubre toda la pantalla en el cuadro de búsqueda.

  2. Haga clic o pulse en cualquier parte de la galería excepto en una flecha, como directamente debajo del cuadro de búsqueda.

    Seleccionar la galería

  3. En el panel derecho, abra la lista Diseños y luego haga clic o pulse la opción que muestra únicamente un título y un subtítulo.

    Seleccionar la galería

  4. En la lista de propiedades, haga clic o pulse en Items, copie esta fórmula y péguela en la barra de fórmulas:

    SortByColumns(Search(Schedule, TextSearchBox1.Text, "Volunteer_x0020_1"), "Volunteer_x0020_1", If(SortDescending1, SortOrder.Descending, SortOrder.Ascending))

    Nota: Si no está seguro de dónde está la lista de propiedades, consulte cómo agregar y configurar controles.

    Esta galería muestra los datos de la tabla Programación.

    Se mostrarán los datos de Programación en la galería de forma predeterminada

    Un cuadro de búsqueda puede filtrar la galería según el texto que escriba el usuario. Si un usuario escribe al menos una letra en el cuadro de búsqueda, la galería mostrará únicamente aquellos registros en los que el campo Voluntarios 1 contenga el texto escrito por el usuario.

    El botón de ordenación puede ordenar los registros en función de los datos de la columna Voluntarios 1. Si un usuario hace clic o pulsa ese botón, el criterio de ordenación podrá cambiar entre ascendente y descendente.

    La fórmula contiene las funciones Sort, If, IsBlank, Filter y Text. Para más información sobre estas y otras funciones, consulte la referencia de las fórmulas

  5. Escriba i en el cuadro de búsqueda y pulse o haga clic en el botón de ordenación una vez (o un número impar de veces).

    La galería muestra estos resultados.

    Ordenar y filtrar la galería

    Más información acerca de Ordenar, Filtrar y otras funciones

  6. Seleccione el control Etiqueta de la parte superior de la pantalla haciendo clic o pulsando en él.

    Seleccionar la barra de título

  7. En la lista de propiedades, haga clic o pulse en Texto, copie este texto y péguelo en la barra de fórmulas.
    "Ver registros"

    Cambiar la barra de título

Crear la pantalla ChangeScreen y su banner

  1. Cambie el nombre de la pantalla predeterminada de Screen1 a ViewScreen.

    Cambiar el nombre de pantalla

  2. Agregue una pantalla y cámbiele el nombre por ChangeScreen.

    Agregar y cambiar el nombre de pantalla

  3. En la pestaña Insertar, haga clic o pulse en Texto y luego haga clic o pulse en Etiqueta.

  4. Configure el control Etiqueta que acaba de agregar:

    • Establezca la propiedad Text en esta fórmula:
      "Cambiar registro"
    • Establezca la propiedad Fill en esta fórmula:
      RGBA(62, 96, 170, 1).
    • Establezca su propiedad Color en esta fórmula:
      RGBA(255, 255, 255, 1)
    • Establezca su propiedad Align en Center.
    • Establezca su propiedad X en 0.
    • Establezca su propiedad Width en 640.

    El control Etiqueta refleja los cambios.

    ChangeScreen con banner

Agregar y configurar un formulario

  1. En la pestaña Insertar, pulse o haga clic en Formularios y, a continuación, en Editar.

  2. Mueva y cambie el tamaño del formulario para que cubra la mayor parte de la pantalla.

    Agregar un formulario

    El formulario se denominará Form1 de forma predeterminada a menos que ya haya agregado y quitado algún formulario. En ese caso, cambie el nombre del formulario a Form1.

  3. Establezca la propiedad DataSource de Form1 en Schedule.

  4. Establezca la propiedad Item de Form1 en esta expresión:
    BrowseGallery1.Selected

  5. En el panel derecho, haga clic o pulse en el icono de ojo de cada campo para mostrarlo.

    Mostrar campos de formulario

  6. En la parte inferior de la pantalla, pulse o haga clic en Agregar una tarjeta personalizada.

    Agregar una tarjeta personalizada

  7. Agregue un control Etiqueta en la nueva tarjeta.

  8. Establezca la propiedad AutoHeight del nuevo control en true y su propiedad Text en esta fórmula:
    Form1.Error

    La etiqueta mostrará cualquier error del formulario.

  9. En la barra de navegación izquierda, pulse o haga clic en la miniatura de ChangeScreen para seleccionarla.

  10. En la pestaña Insertar, pulse o haga clic en Iconos, pulse o haga clic en la opción para agregar una flecha Anterior y, a continuación, mueva la flecha a la esquina inferior izquierda de la pantalla.

  11. Establezca la propiedad AlSeleccionar de la flecha en esta fórmula:

    ResetForm(Form1);Navigate(ViewScreen,ScreenTransition.None)

    Cuando el usuario pulse o haga clic en la flecha, la función Navigate abre la pantalla ViewScreen.

  12. Agregue un control Botón en el formulario y establezca la propiedad Text del botón en "Save".

    Agregar un botón para guardar

  13. Establezca la propiedad OnSelect del botón en esta fórmula:

    SubmitForm(Form1); If(Form1.ErrorKind = ErrorKind.None, Navigate(ViewScreen, ScreenTransition.None))

    Cuando el usuario hace clic o pulsa el botón, la función SubmitForm guarda los cambios en el origen de datos y la pantalla ViewScreen vuelve a aparecer.

  14. En la parte inferior de la pantalla, agregue otro botón, establezca su propiedad Text en "Remove" y establezca la propiedad OnSelect en esta fórmula:

    Remove(Schedule,BrowseGallery1.Selected);
    If(IsEmpty(Errors(Schedule)),Navigate(ViewScreen,ScreenTransition.None))

    Cuando el usuario hace clic o pulsa este botón, la función Remove quita el registro y la pantalla ViewScreen vuelve a aparecer.

  15. Establezca la propiedad Visible del botón Remove en esta fórmula:
    Form1.Mode=FormMode.Edit

    Este paso oculta el botón Quitar cuando el usuario está creando un registro.

    La pantalla ChangeScreen coincide con este ejemplo:

    Pantalla ChangeScreen final

Establecer navegación desde ViewScreen

  1. En la barra de navegación izquierda, pulse o haga clic en la miniatura superior de ViewScreen.

    Abrir ViewScreen

  2. Pulse o haga clic en la flecha Siguiente para ir al primer registro de la galería.

    Flecha siguiente

  3. Establezca la propiedad OnSelect de la flecha en esta fórmula:

    Navigate(ChangeScreen,ScreenTransition.None)

  4. En la esquina superior derecha, pulse o haga clic en el icono del signo más.

    Agregar registro

  5. Establezca la propiedad OnSelect del icono seleccionado en esta fórmula:

    NewForm(Form1);Navigate(ChangeScreen,ScreenTransition.None)`

    Cuando el usuario hace clic o pulsa este icono, aparece la pantalla ChangeScreen con los campos vacíos, de forma que el usuario puede crear un registro más fácilmente.

Ejecutar la aplicación

A medida que personaliza la aplicación, pruebe los cambios mediante la ejecución de la aplicación en el modo de vista previa como se describe en los pasos de esta sección.

  1. En la barra de navegación izquierda, pulse o haga clic en la miniatura superior para seleccionar ViewScreen.

    Seleccionar ViewScreen

  2. Abra el modo de vista previa presionando F5 (o haga clic o pulse en el icono de vista previa situado cerca de la esquina superior derecha).

    Abrir el modo de vista previa

  3. Haga clic o pulse en la flecha siguiente para que un registro muestre los detalles sobre él.

  4. En la pantalla ChangeScreen, cambie la información de uno o varios campos y, a continuación, pulse o haga clic en Guardar para guardar los cambios, pulse o haga clic en Quitar para eliminar el registro.

  5. Cierre el modo de vista previa presionando Esc (o haciendo clic o pulsando en el icono Cerrar en la barra de título).

    Cerrar el modo de vista previa

Pasos siguientes