Crear una aplicación desde ceroCreate an app from scratch

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.Create your own app from scratch using any one of a variety of data sources, adding more sources later if you want. 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.Specify the appearance and behavior of each UI element so that you can optimize the result for your exact goals and workflow. 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.This approach is much more time-intensive than generating an app automatically, but experienced app makers can build the best app for their needs.

Nota: Este tema se ha escrito para PowerApps Studio para Windows, pero los pasos serán similares si abre PowerApps en un explorador.Note: This topic was written for PowerApps Studio for Windows, but the steps are similar if you open PowerApps in a browser.

Si sigue este tutorial, creará una aplicación que contiene dos pantallas.By following this tutorial, you'll create an app that contains two screens. En una pantalla, los usuarios pueden navegar a través de un conjunto de registros:On one screen, users can browse through a set of records:

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:On the other screen, users can create a record, update one or more fields in a record, or delete an entire record:

Pantalla en la que un usuario puede agregar o actualizar datos

Requisitos previosPrerequisites

Puede consultar este tutorial para ver los conceptos generales o puede seguirlo exactamente y completar estos pasos.You can review this tutorial for general concepts only, or you can follow it exactly if you complete these steps.

  1. Copie estos datos y péguelos en un archivo de Excel.Copy this data, and then paste it into an Excel file.

    Día de inicioStart Day Hora de inicioStart Time Voluntario 1Volunteer 1 Voluntario 2Volunteer 2
    SábadoSaturday 10 a.m. a mediodía10am-noon VasquezVasquez KumashiroKumashiro
    SábadoSaturday mediodía a 2 p.m.noon-2pm IceIce SinghalSinghal
    SábadoSaturday 2 p.m. a 4 p.m.2pm-4-pm MykMyk MuellerMueller
    DomingoSunday 10 a.m. a mediodía10am-noon LiLi AdamsAdams
    DomingoSunday 10 a.m. a mediodía10am-noon SinghSingh MorganMorgan
    DomingoSunday 10 a.m. a mediodía10am-noon BatyeBatye NguyenNguyen
  2. Dé a los datos un formato de tabla, llamada Programa, para que PowerApps pueda analizar la información.Format that data as a table, named Schedule, so that PowerApps can parse the information.

    Para más información, consulte Crear o eliminar una tabla de Excel.For more information, see Create an Excel table in a worksheet.

  3. Guarde el archivo con el nombre eventsignup.xlsy, a continuación, cárguelo en una cuenta de almacenamiento en la nube, como OneDrive.Save the file under the name eventsignup.xls, and then upload it to a cloud-storage account, such as OneDrive.
  4. Si no está familiarizado con PowerApps:If you're new to PowerApps:

Crear una aplicación vacía y conexión a los datosCreate a blank app, and connect to data

  1. En PowerApps Studio, pulse o haga clic en Nuevo en el menú Archivo (cerca del borde izquierdo de la pantalla).In PowerApps Studio, click or tap New on the File menu (near the left edge of the screen).

    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.On the Blank app tile, click or tap Phone layout.

    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).If prompted, take the intro tour to understand the main areas of PowerApps (or click or tap Skip).

    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).You can always take the tour later by clicking or tapping the question-mark icon near the upper-left corner of the screen and then clicking or tapping Take the intro tour.

  4. En la barra de navegación izquierda, haga clic o pulse en uno de los iconos de la esquina superior derecha para cambiar a la vista en miniatura.In the left navigation bar, click or tap an icon in the upper-right corner to switch to the thumbnail view.

    Alternancia de las vistas

  5. En el panel de la derecha, haga clic o pulse en Agregar origen de datos.In the right-hand pane, click or tap Add data source.

    Agregar origen de datos

  6. Realice uno de estos pasos:Perform either of these steps:

    • Si ya tiene una conexión a su cuenta de almacenamiento en la nube, haga clic o pulse en ella.If you already have a connection to your cloud-storage account, click or tap it.
    • 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.If you don't have a connection to your cloud-storage account, click or tap Add Connection, click or tap your account type, click or tap Connect, and then (if prompted) provide your credentials.
  7. En Choose an Excel file (Elegir un archivo de Excel), vaya a eventsignup.xlsx y haga clic o pulse en él.Under Choose an Excel file, browse to eventsignup.xlsx, and then click or tap it.

    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.Under Choose a table, select the Schedule check box, and then click or tap Connect.

    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.The Data sources tab of the right-hand pane shows which data sources you've added to your app.

    Mostrar orígenes de datos conectados

    Este tutorial requiere un único origen de datos, pero puede agregar más orígenes de datos posteriormente.This tutorial requires only one data source, but you can add more data sources later.

Mostrar los datosShow the data

  1. En la pestaña Inicio, haga clic o pulse en Nueva pantalla y luego haga clic o pulse Pantalla de lista.In the Home tab, click or tap New screen and then click or tap List screen.

    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 .A screen is added with several default controls, such as a search box and a Gallery control. La galería cubre toda la pantalla en el cuadro de búsqueda.The gallery covers the entire screen under the search box.

  2. Haga clic o pulse en cualquier parte de la galería excepto en una flecha, como directamente debajo del cuadro de búsqueda.Click or tap anywhere in the gallery except an arrow, such as directly under the search box.

    Seleccionar la galería

  3. En el panel derecho, abra la lista Diseños y haga clic o pulse en la opción que muestra un título, un subtítulo y el cuerpo.In the right-hand pane, open the Layouts list, and then click or tap the option that shows a title, a subtitle and body.

    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:In the property list, click or tap Items, copy this formula, and paste it into the formula bar:

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

    Si no está seguro de dónde está la lista de propiedades, consulte cómo agregar y configurar controles.If you're not sure where the property list is, see Add and configure controls.

    Nota: Para orígenes de datos de SharePoint y Excel que contienen nombres de columna con espacios, PowerApps los muestra como "_x0020_".Note: For Excel or SharePoint data sources that contain column names with spaces, PowerApps shows the spaces as "_x0020_". En este ejemplo, la columna "Volunteer 1" aparece en una fórmula tal que "Volunteer_x0020_1".In this example, the column "Volunteer 1" appears in a formula as "Volunteer_x0020_1".

    Esta galería muestra los datos de la tabla Programación.This gallery shows the data from the Schedule table.

    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.A search box can filter the gallery based on text that the user types. 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.If a user types at least one letter in the search box, the gallery shows only those records for which the Volunteer 1 field contains the text that the user typed.

    El botón de ordenación puede ordenar los registros en función de los datos de la columna Voluntarios 1.The sort button can sort the records based on data in the Volunteer 1 column. Si un usuario hace clic o pulsa ese botón, el criterio de ordenación podrá cambiar entre ascendente y descendente.If a user clicks or taps that button, the sort order toggles between ascending and descending.

    La fórmula contiene las funciones Sort, If, IsBlank, Filter y Text.That formula contains the Sort, If, IsBlank, Filter, and Text functions. Para más información sobre estas y otras funciones, consulte la referencia de las fórmulasFor more information about these and other functions, see the formula reference

  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).Type an i in the search box, and click or tap the sort button once (or an odd number of times).

    La galería muestra estos resultados.The gallery shows these results.

    Ordenar y filtrar la galería

    Más información acerca de Ordenar, Filtrar y otras funcionesMore information about the Sort, Filter, and other functions

  6. Seleccione el control Etiqueta de la parte superior de la pantalla haciendo clic o pulsando en él.Select the Label control at the top of the screen by clicking or tapping the control.

    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.In the property list, click or tap Text, copy this text, and then paste it in the formula bar.
    "Ver registros" "View Records"

    Cambiar la barra de título

Crear la pantalla ChangeScreen y su bannerCreate the ChangeScreen and its banner

  1. Eliminar Screen1y cambiar el nombre de Screen2 a ViewScreen.Delete Screen1, and rename Screen2 to ViewScreen.

    Cambiar el nombre de pantalla

  2. Agregue una pantalla y cámbiele el nombre por ChangeScreen.Add a screen, and rename it 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.On the Insert tab, click or tap Text, and then click or tap Label.
  4. Configure el control Etiqueta que acaba de agregar:Configure the Label control that you just added:

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

      El control Etiqueta refleja los cambios.The Label control reflects your changes.

      ChangeScreen con banner

Agregar y configurar un formularioAdd and configure a form

  1. En la pestaña Insertar, pulse o haga clic en Formularios y, a continuación, en Editar.On the Insert tab, click or tap Forms, and then click or tap Edit.
  2. Mueva y cambie el tamaño del formulario para que cubra la mayor parte de la pantalla.Move and resize the form to cover most of the screen.

    Agregar un formulario

    El formulario se denominará Form1 de forma predeterminada a menos que ya haya agregado y quitado algún formulario.The form is named Form1 by default unless you already added and removed a form. En ese caso, cambie el nombre del formulario a Form1.In that case, rename the form to Form1.

  3. Establezca la propiedad DataSource de Form1 en Schedule.Set DataSource property of Form1 to Schedule.
  4. Establezca la propiedad Item de Form1 en esta expresión:Set the Item property of Form1 to this expression:
    BrowseGallery1.SelectedBrowseGallery1.Selected
  5. En el panel derecho, haga clic o pulse en la casilla de cada campo para mostrarlo.In the right-hand pane, click or tap the checkbox for each field to show it.

    Mostrar campos de formulario

  6. En la parte inferior de la pantalla, pulse o haga clic en Agregar una tarjeta personalizada.Near the bottom of the form, click or tap Add a custom card.

    Agregar una tarjeta personalizada

  7. Agregue un control Etiqueta en la nueva tarjeta.Add a Label control in the new card.
  8. Establezca la propiedad AutoHeight del nuevo control en true y su propiedad Text en esta fórmula:Set the AutoHeight property of the new control to true, and set its Text property to this formula:
    Form1.ErrorForm1.Error

    La etiqueta mostrará cualquier error del formulario.The label will show any errors from the form.

  9. En la barra de navegación izquierda, pulse o haga clic en la miniatura de ChangeScreen para seleccionarla.In the left navigation bar, click or tap the thumbnail for the ChangeScreen to select it.
  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.On the Insert tab, click or tap Icons, click or tap the option to add a Back arrow, and then move the arrow to the lower-left corner of the screen.
  11. Establezca la propiedad AlSeleccionar de la flecha en esta fórmula:Set the arrow's OnSelect property to this formula:

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

    Cuando el usuario pulse o haga clic en la flecha, la función Navigate abre la pantalla ViewScreen.When the user clicks or taps the arrow, the Navigate function opens the ViewScreen.

  12. Agregue un control Botón en el formulario y establezca la propiedad Text del botón en "Save".Add a Button control under the form, and set the button's Text property to "Save".

    Agregar un botón para guardar

  13. Establezca la propiedad OnSelect del botón en esta fórmula:Set the OnSelect property of the button to this formula::

    SubmitForm(Form1); If(Form1.ErrorKind = ErrorKind.None, Navigate(ViewScreen, ScreenTransition.None))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.When the user clicks or taps the button, the SubmitForm function saves any changes to the data source, and the ViewScreen reappears.

  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:At the bottom of the screen, add another button, set its Text property to "Remove", and set its OnSelect property to this formula:

    Remove(Schedule,BrowseGallery1.Selected);
    If(IsEmpty(Errors(Schedule)),Navigate(ViewScreen,ScreenTransition.None))
    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.When the user clicks or taps this button, the Remove function removes the record, and the ViewScreen reappears.

  15. Establezca la propiedad Visible del botón Remove en esta fórmula:Set the Visible property of the Remove button to this formula:
    Form1.Mode=FormMode.EditForm1.Mode=FormMode.Edit

    Este paso oculta el botón Quitar cuando el usuario está creando un registro.This step hides the Remove button when the user is creating a record.

    La pantalla ChangeScreen coincide con este ejemplo:The ChangeScreen matches this example:

    Pantalla ChangeScreen final

Establecer navegación desde ViewScreenSet navigation from ViewScreen

  1. En la barra de navegación izquierda, pulse o haga clic en la miniatura superior de ViewScreen.In the left navigation bar, click or tap the thumbnail for the ViewScreen.

    Abrir ViewScreen

  2. Pulse o haga clic en la flecha Siguiente para ir al primer registro de la galería.Click or tap the Next arrow for the first record in the gallery.

    Flecha siguiente

  3. Establezca la propiedad OnSelect de la flecha en esta fórmula:Set the OnSelect property of that arrow to this formula:

    Navigate(ChangeScreen,ScreenTransition.None)Navigate(ChangeScreen,ScreenTransition.None)

  4. En la esquina superior derecha, pulse o haga clic en el icono del signo más.In the upper-right corner, click or tap the plus icon.

    Agregar registro

  5. Establezca la propiedad OnSelect del icono seleccionado en esta fórmula:Set the OnSelect property of the selected icon to this formula:

    NewForm(Form1);Navigate(ChangeScreen,ScreenTransition.None)`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.When the user clicks or taps this icon, ChangeScreen appears with each field empty, so that the user can create a record more easily.

Ejecutar la aplicaciónRun the app

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.As you customize the app, test your changes by running the app in Preview mode, as the steps in this section describe.

  1. En la barra de navegación izquierda, pulse o haga clic en la miniatura superior para seleccionar ViewScreen.In the left navigation bar, click or tap the top thumbnail to select the 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).Open Preview mode by pressing F5 (or clicking or tapping the Preview icon near the upper-right corner).

    Abrir el modo de vista previa

  3. Haga clic o pulse en la flecha siguiente para que un registro muestre los detalles sobre él.Click or tap the Next arrow for a record to show details about that record.
  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.On the ChangeScreen, change the information in one or more fields, and then save your changes by clicking or tapping Save, or remove the record by clicking or tapping Remove.
  5. Cierre el modo de vista previa presionando Esc (o haciendo clic o pulsando en el icono Cerrar en la barra de título).Close Preview mode by pressing Esc (or by clicking or tapping the close icon under the title bar).

    Cerrar el modo de vista previa

Pasos siguientesNext steps