Creación de una aplicación en SharePointCreating an app from SharePoint

Genere una aplicación de tres pantallas desde una lista de SharePoint y, luego, explore las pantallas y los controles desde la aplicación.Generate a three screen app from a SharePoint list, then explore screens and controls from the app. Actualice las pantallas, los controles y los campos de la aplicación y use fórmulas para personalizar aún más su comportamiento.Update app screens, controls, and fields; and use formulas to further customize app behavior.

Aprenderá a...

Generar una aplicaciónGenerate an app

En esta sección del curso, vamos a crear una aplicación a partir de la lista de SharePoint "Flooring Estimates".In this section of the course, we'll create an app from a "Flooring Estimates" SharePoint list. Esta aplicación la podría usar, por ejemplo, un comercial para realizar una estimación in-situ, para poder hacer referencia a la lista y mantenerla actualizada.The app could be used by someone, such as an estimator out at customer sites, to refer to the list and keep it up-to-date. En la sección Introducción, ya le mostramos cómo generar una aplicación a partir de esa lista. ¿Por qué tenemos que verlo otra vez?In the Getting Started section, we showed you how to generate an app from the same list - so why look at it again? Primero, en lugar de empezar en PowerApps Studio, ahora le mostraremos cómo se integra PowerApps en SharePoint Online.First, instead of starting in PowerApps Studio, we now show you how PowerApps is integrated into SharePoint Online. En segundo lugar, veremos con más detalle cómo ensamblar y personalizar la aplicación.Second, we dig deeper into how the app is put together, and show you how to customize it. En esta sección recibirá información nueva, así que vamos a comenzar.You'll definitely get some new information going through this section, so let's jump in!

Generar la aplicaciónGenerate the app

La siguiente imagen muestra la lista de SharePoint "Flooring Estimates", que contiene información básica como el nombre, el precio y una imagen para cada tipo de suelo.The following image shows the "Flooring Estimates" SharePoint list, which contains basic information like name and price, and an image for each flooring type. Puede ver cómo se integran PowerApps y Microsoft Flow en SharePoint Online, lo que permite compilar fácilmente aplicaciones y los flujos a partir de listas.You can see how PowerApps and Microsoft Flow are now integrated into SharePoint Online, so you can easily build apps and flows from your lists.

Lista Flooring Estimates

Para crear una aplicación, haga clic en PowerApps y en Crear una aplicación.To build an app, click PowerApps, then Create an app. En el panel derecho, escriba un nombre para la aplicación y haga clic en Crear.In the right hand pane, enter a name for the app, then click Create. Después de hacer clic en Crear, PowerApps empieza a generar la aplicación.After you click Create, PowerApps starts to generate the app. PowerApps hace todo tipo de inferencias sobre los datos para poder generar una aplicación útil como punto de partida.PowerApps makes all sorts of inferences about your data so that it generates a useful app as a starting point.

Generar una aplicación a partir de una lista

Ver la aplicación en PowerApps StudioView the app in PowerApps Studio

La nueva aplicación de tres pantallas se abre en PowerApps Studio.Your new three-screen app opens in PowerApps Studio. Todas las aplicaciones que se generan a partir de datos tienen el mismo conjunto de pantallas:All apps generated from data have the same set of screens:

  • La pantalla Examinar: donde puede examinar, ordenar, filtrar y actualizar los datos que se extraigan de la lista, así como agregar elementos solo con hacer clic en el icono (+).The browse screen: where you browse, sort, filter, and refresh the data pulled in from the list, as well as add items by clicking the (+) icon.
  • La pantalla Detalles: donde puede obtener información más detallada sobre un elemento y decidir si lo elimina o lo edita.The details screen: where you view more detail about an item, and can choose to delete or edit the item.
  • La pantalla Editar o crear: donde puede editar un elemento existente o crear uno nuevo.The edit/create screen: where you edit an existing item or create a new one.

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

Haga clic o pulse en las miniaturas para ver los controles en la pantalla correspondiente.Click or tap each thumbnail to view the controls on that screen.

La aplicación generada

Ejecutar la aplicación en modo de vista previaRun the app in preview mode

Haga clic o pulseClick or tap Flecha Iniciar vista previa de aplicación en la esquina superior derecha para ejecutar la aplicación.in the top-right corner to run the app. Si se desplaza por la aplicación, verá que incluye todos los datos de la lista y proporciona una buena experiencia predeterminada.If you navigate through the app, you see that it includes all the data from the list and provides a good default experience.

Ejecutar la aplicación en modo de vista previa

Después, exploraremos la aplicación con más detalle y la personalizaremos para que se adapte mejor a nuestras necesidades.Next we'll explore the app in more detail and later customize the app so it better suits our needs.

Exploración de una aplicación generadaExplore a generated app

En este tema, examinamos más detenidamente la aplicación generada y se revisan las pantallas y los controles que definen el comportamiento de la aplicación.In this topic, we look more closely at the generated app - reviewing the screens and controls that define the app's behavior. Aunque no expliquemos todos los detalles, el mero hecho de ver cómo funciona esta aplicación le ayudará a compilar sus propias aplicaciones.We won't go through all the details, but seeing more about how this app works will help you to build your own apps. En un tema posterior, examinaremos las fórmulas que funcionan con las pantallas y los controles.In a later topic, we'll look at the formulas that work with screens and controls.

Descripción de los controles de PowerAppsUnderstanding controls in PowerApps

Un control no es más que un elemento de la interfaz de usuario que tiene comportamientos asociados.A control is simply a UI element that has behaviors associated with it. Muchos de los controles de PowerApps son los mismos que ha utilizado en otras aplicaciones: etiquetas, cuadros de entrada de texto, listas desplegables, elementos de navegación, etc.Many controls in PowerApps are the same as controls that you've used in other apps: labels, text-input boxes, drop-down lists, navigation elements, and so on. Pero PowerApps tiene controles más especializados como Galerías (que muestran datos resumidos) y Formularios (que muestran datos detallados y permiten crear y editar elementos).But PowerApps has more specialized controls like Galleries (which display summary data) and Forms (which display detail data and enable you to create and edit items). También tiene otros controles realmente increíbles, como Imagen, Cámara y Código de barras.And also some other really cool controls like Image, Camera, and Barcode. Para ver cuáles están disponibles, pulse o haga clic en Insertar en la cinta de opciones y, después, pulse o haga clic en cada una de las opciones, de Texto a Iconos.To see what's available, click or tap Insert on the ribbon, and then click or tap each of the options in turn, Text through Icons.

Pestaña de controles en la cinta de opciones de PowerApps Studio

Exploración de la pantalla de exploraciónExplore the browse screen

Cada una de las tres pantallas de la aplicación tiene un control principal y varios controles adicionales.Each of the three app screens has a main control and some additional controls. La primera pantalla de la aplicación es la pantalla de exploración, denominada BrowseScreen1 de manera predeterminada.The first screen in the app is the browse screen, named BrowseScreen1 by default. El control principal de esta pantalla es una galería denominada BrowseGallery1.The main control on this screen is a gallery named BrowseGallery1. BrowseGallery1 contiene otros controles, como NextArrow1 (un control de icono; haga clic en él o púlselo para ir a la pantalla de detalles).BrowseGallery1 contains other controls, like NextArrow1 (an icon control - click or tap it to go to the details screen). En la pantalla también hay controles independientes, como IconNewItem1 (un control de icono; haga clic en él o púlselo para crear un elemento en la pantalla de edición o creación).There are also separate controls on the screen, like IconNewItem1 (an icon control - click or tap it to create an item in the edit/create screen).

Pantalla de exploración con controles

PowerApps tiene varios tipos de galerías, por lo que puede utilizar la que mejor se adapte a los requisitos de diseño de la aplicación.PowerApps has a variety of gallery types so you can use the one that best suits your app's layout requirements. Más adelante en esta sección encontrará más formas de controlar el diseño.You will see more ways to control layout later in this section.

Opciones de galería de PowerApps

Exploración de la pantalla de detallesExplore the details screen

A continuación se encuentra la pantalla de detalles, denominada DetailScreen1 de manera predeterminada.Next is the details screen, named DetailScreen1 by default. El control principal de esta pantalla es un formulario de presentación denominado DetailForm1.The main control on this screen is a display form named DetailForm1. DetailForm1 contiene otros controles, como DataCard1 (un control de tarjeta, que muestra la categoría de suelos en este caso).DetailForm1 contains other controls, like DataCard1 (a card control, which displays the flooring category in this case). En la pantalla también hay controles independientes, como IconEdit1 (un control de icono; haga clic en él o púlselo para editar el elemento actual en la pantalla de edición o creación).There are also separate controls on the screen like IconEdit1 (an icon control - click or tap it to edit the current item on the edit/create screen).

Pantalla de detalles con controles

Hay muchas opciones en la galería, pero los formularios son más sencillos, ya que solo se puede elegir entre un formulario de edición o un formulario de presentación.There are lots of gallery options, but forms are more straightforward - it's either an edit form or a display form.

Opciones de formulario de PowerApps

Explorar la pantalla de edición o creaciónExplore the edit/create screen

La tercera pantalla de la aplicación es la pantalla de edición o creación, denominada EditScreen1 de forma predeterminada.The third screen in the app is the edit/create screen, named EditScreen1 by default. El control principal de esta pantalla es un formulario de edición denominado EditForm1.The main control on this screen is an edit form named EditForm1. EditForm1 contiene otros controles, como DataCard8 (un control de tarjeta, que permite editar la categoría de suelos en este caso).EditForm1 contains other controls, like DataCard8 (a card control, which allows you to edit the flooring category in this case). En la pantalla también hay controles independientes, como IconAccept1 (un control de icono; haga clic en él o púlselo para guardar los cambios realizados en la pantalla de edición o creación).There are also separate controls on the screen like IconAccept1 (an icon control - click or tap it to save the changes you made on the edit/create screen).

Pantalla de edición con controles

Ahora que tiene una idea de las pantallas y los controles que componen la aplicación, en el siguiente tema veremos cómo personalizarla.Now that you have a sense of how the app is composed of screens and controls, we'll look at how you customize the app in the next topic.

Personalizar la aplicaciónCustomize the app

En los dos primeros temas de esta sección, se generó una aplicación a partir de una lista de SharePoint y se exploró dicha aplicación para conocer mejor la composición de las tres aplicaciones en pantalla.In the first two topics in this section, you generated an app from a SharePoint list and explored the app to get a better understanding of how three screen apps are composed. La aplicación que PowerApps generó es útil, pero a menudo las aplicaciones se personalizan después de generarlas.The app that PowerApps generated is useful, but you will often customize an app after it's generated. En este tema, explicaremos varios de los cambios básicos que se producen en cada pantalla de la aplicación.In this topic, we'll walk through some basic changes for each screen in the app. Sin embargo, para personalizar una aplicación se pueden realizar muchas más acciones, que se tratarán en temas posteriores.There is a lot more you can do to customize an app - we'll get to that in later topics. Entretanto, puede aprovechar lo que aprenda en este tema y basarse en ello.In the meantime, you can take what you learn in this topic and build on it. Tome cualquier aplicación que genere (una lista, un archivo de Excel o cualquier otro origen) y vea cómo se puede personalizar.Take any app you generate-from a list, an Excel file, or another source-and see how you can customize it. Esta es la mejor manera de aprender a combinar aplicaciones.It really is the best way to learn how apps are put together.

Pantalla de exploraciónBrowse screen

Comenzaremos por la pantalla de exploración.We'll start with the browse screen. La lista de SharePoint contiene una imagen para cada producto, pero de forma predeterminada dicha imagen no se muestra.The SharePoint list contains an image for each product but the image isn't displayed by default. Vamos a solucionar este problema.Let's fix that. En el panel derecho, en la pestaña Layout (Diseño), seleccione otro diseño para la pantalla de exploración.In the right-hand pane, on the Layout tab, select a different layout for the browse screen. Los resultados se verán de inmediato, ya que PowerApps actualiza la aplicación en cuanto se realizan los cambios.You see the results right away because PowerApps updates the app as you make changes.

Cambiar el diseño de la pantalla de exploración

Con el diseño básico correcto, cambie los campos que se muestran.With the right basic layout, now change the fields that are displayed. Haga clic en un campo del primer elemento, o púlselo, y, después, en el panel derecho, cambie los datos que se muestran en cada elemento.Click or tap a field in the first item, then in the right-hand pane, change the data that is displayed for each item. Así se proporciona un mejor resumen de cada elemento de la lista.This provides a better summary of each item in the list.

Cambiar los campos de la pantalla de exploración

Pantalla de detallesDetails screen

En la pantalla de detalles, deseamos cambiar el orden de los campos y también mostrar la imagen.On the details screen, we want to change the order of the fields and display the image also. Esta pantalla contiene distintos controles, por lo que el proceso es ligeramente distinto del de la pantalla de exploración.There are different controls on this screen, so the process is a little different from the browse screen. Haga clic en un campo, o puntéelo, y, después, en el panel derecho, arrastre el campo Title (Título) a la parte superior.Click or tap a field, then in the right-hand pane, drag the Title field to the top. Luego, haga clic en el campo Image (Imagen), o puntéelo, para mostrarlo.Then click or tap the Image field to display it.

Cambiar los campos de la pantalla de detalle

Pantalla de edición o creaciónEdit/create screen

Por último, en la pantalla en que se editan y se crean las entradas, deseamos cambiar un campo para que sea más fácil escribir texto.Finally, on the screen where you edit and create entries, we want to change a field so that it's easier to enter text. Haga clic o pulse en la lista desplegable del campo Información general y luego haga clic o pulse en el control Editar texto multilínea.Click or tap the drop-down list for the Overview field, and then click or tap the Edit Multi-line Text control.

Cambiar los campos de la pantalla de edición

Puede ver que unos pocos pasos básicos pueden ayudar a mejorar la apariencia de una aplicación generada y la experiencia de usarla.You can see how a few basic steps can do a lot to improve the appearance and experience of using a generated app. En este tema nos hemos centrado en la interfaz de usuario de PowerApps Studio, que proporciona muchas opciones para personalizar las aplicaciones.In this topic, we focused on the PowerApps Studio UI, which provides a lot of options for customizing your apps. En el siguiente tema, se explicarán las fórmulas, que desempeñan un rol importante en el control del comportamiento de las aplicaciones.In the next topic, we'll get into formulas, which play an important role in driving app behavior.

Exploración de las fórmulas de la aplicaciónExplore app formulas

Una de las principales ventajas de PowerApps es que no hace falta escribir código de aplicación tradicional (no es preciso ser programador para crear aplicaciones).One of the major benefits of PowerApps is not having to write traditional application code - you don't have to be a developer to create apps! Pero se necesita una forma de expresar la lógica de una aplicación y controlar la navegación, el filtrado, la ordenación y otras funcionalidades de una aplicación.But you still need a way to express logic in an app and to control an app's navigation, filtering, sorting, and other functionality. Aquí es donde entran en juego las fórmulas.This is where formulas come in. Si ha usado fórmulas de Excel, el enfoque que usa PowerApps le resultará familiar.If you have used Excel formulas, the approach that PowerApps takes should feel familiar. En este tema, se mostrarán un par de fórmulas básicas para dar formato a texto y, después, se explicarán tres de las fórmulas que PowerApps incluye en la aplicación generada.In this topic, we'll show a couple of basic formulas for text formatting and then walk through three of the formulas that PowerApps includes in the generated app. Se hará una idea de lo que pueden hacer las fórmulas.You will get a taste of what formulas can do. Después puede dedicar un tiempo a examinar otras fórmulas de la aplicación generada y crear las suyas propias.Then you can spend some time looking at other formulas in the generated app and writing your own.

Descripción de fórmulas y propiedadesUnderstanding formulas and properties

En el tema anterior, se incluyó el campo de precio en la galería de la pantalla de exploración, pero se mostraba como un número sin formato y sin símbolo de moneda.In the previous topic, we included the Price field in the browse screen gallery, but it showed up as a plain number without a currency symbol. Imaginemos que deseamos agregar un signo de dólar y cambiar el color del texto en función del coste del elemento (por ejemplo, rojo si cuesta más de 5 dólares y verde en caso contrario).Suppose we want to add a dollar sign, and also change the text color depending on how much the item costs (for example red if it's more than $5, otherwise green). La siguiente imagen muestra la idea.The following image shows the idea.

Formato de texto, en lo referente al color y la moneda

Empecemos con el formato de moneda.Let's start with the currency formatting. De manera predeterminada, PowerApps simplemente usa un valor Price para cada elemento, que se establece como la propiedad Texto de la etiqueta que muestra el precio.By default PowerApps just pulls in a Price value for each item, which is set as the Text property of the label that displays the price.

Formato predeterminado del precio

Para agregar el símbolo de moneda estadounidense, haga clic o pulse en el control de etiqueta y, en la barra de fórmulas, establezca la propiedad Texto en esta fórmula.To add the US currency symbol, click or tap the label control, and in the formula bar set the Text property to this formula.

Formato de moneda de precio

La fórmula - Text(Price, "[$-en-US]$ ##.00" utiliza la función Text para especificar cómo debe formatear el número.The formula - Text(Price, "[$-en-US]$ ##.00" uses the Text function to specify how the number should be formatted. Esta fórmula es parecida a una de Excel, pero las fórmulas de PowerApps hacen referencia a controles y a otros elementos de la aplicación en lugar de a celdas de una hoja de cálculo.The formula is like an Excel formula, but PowerApps formulas refer to controls and other app elements rather than cells in a spreadsheet. Si hace clic en un control, o lo pulsa, y después hace clic en la lista desplegable de propiedades, o la pulsa, verá una lista de propiedades que son pertinentes para el control.If you click or tap a control and then click or tap the property drop down list, you see a list of properties that are relevant to the control. Por ejemplo, esta es una lista parcial de las propiedades de una etiqueta.For example, here is a partial list of the properties for a label. Algunas de ellas son pertinentes en un amplio conjunto de controles, mientras que otras solo lo son para un control específico.Some properties are relevant across a broad range of controls and others only for a specific control.

Establecimiento de propiedades

Para dar formato el color de manera condicional en función del precio, use una fórmula como la siguiente para la propiedad Color de la etiqueta: If(Price > 5, Color.Red, Color.Green).To format the color conditionally based on the price, use a formula like the following for the Color property of the label: If(Price > 5, Color.Red, Color.Green).

Formato de color por precio

Fórmulas incluidas en la aplicación generadaFormulas included in the generated app

Ahora que sabe cómo utilizar las fórmulas en conjunción con propiedades, examinaremos tres ejemplos de fórmulas que PowerApps utiliza en la aplicación generada.Now that you understand how to use formulas in conjunction with properties, we'll look at three examples of formulas that PowerApps uses in the generated app. Todos los ejemplos son de la pantalla de exploración y funcionan con la propiedad OnSelect, que define lo que sucede cuando un usuario hace clic en un control de la aplicación, o lo pulsa.The examples are all from the browse screen and work with the OnSelect property, which defines what happens when a user clicks or taps an app control.

  • La primera fórmula está asociada con el control IconNewItem1: Icono Elemento nuevo.The first formula is associated with the IconNewItem1 control: New item icon. Haga clic en este control, o púlselo, para pasar de la pantalla de exploración a la de edición o creación, y crear un elemento.You click or tap this control to go from the browse screen to the edit/create screen and create an item.

    • La fórmula es NewForm(EditForm1);Navigate(EditScreen1, ScreenTransition.None)The formula is NewForm(EditForm1);Navigate(EditScreen1, ScreenTransition.None)
    • La fórmula crea una instancia de un nuevo formulario de edición y, después, navega a la pantalla de edición o creación para que pueda crear un elemento nuevo.The formula instantiates a new edit form and then navigates to the edit/create screen so that you can create a new item. El valor ScreenTransition.None significa que no hay transición entre pantallas (por ejemplo, un fundido).A value of ScreenTransition.None means there is no transition between screens (such as a fade).
  • La segunda fórmula está asociada con el control IconSortUpDown1: Icono Ordenar galería.The second formula is associated with the IconSortUpDown1 control: Sort gallery icon. Haga clic en este control, o púlselo, para ordenar la lista de elementos de la galería de la pantalla de exploración.You click or tap this control to sort the list of items in the browse screen gallery.

    • La fórmula es UpdateContext({SortDescending1: !SortDescending1})The formula is UpdateContext({SortDescending1: !SortDescending1})
    • La fórmula utiliza UpdateContext para actualizar una variable denominada SortDescending1.The formula uses UpdateContext to update a variable called SortDescending1. El valor de la variable se desplaza hacia delante y detrás al hacer clic en el control.The value of the variable switches back and forth as you click the control. Esto indica a la galería de esta pantalla cómo ordenar los elementos (para más información, vea el vídeo).This tells the gallery on this screen how to sort the items (watch the video for more details).
  • La tercera fórmula está asociada con el control NextArrow1: Icono de flecha Ir a detalles.The third formula is associated with the NextArrow1 control: Go to details arrow icon. Haga clic en este control, o púlselo, para pasar de la pantalla de exploración a la de detalles.You click or tap this control to go from the browse screen to the details screen.

    • La fórmula es Navigate(DetailScreen1, ScreenTransition.None)The formula is Navigate(DetailScreen1, ScreenTransition.None)
    • La fórmula navega a la pantalla de detalles de nuevo sin transición alguna.The formula navigates to the details screen, again with no transition.

Hay muchas otras fórmulas en la aplicación, por lo se recomienda invertir un tiempo en hacer clic en los controles y ver qué fórmulas están establecidas para las distintas propiedades.There are many other formulas in the app, so take some time to click on controls and see what formulas are set for various properties.

En resumenWrapping it all up

Así llegamos al final de la exploración de la aplicación generada y podemos echar un vistazo a las pantallas, los controles, las propiedades y las fórmulas que confieren a la aplicación sus funcionalidades.This brings us to the end of exploring the generated app, and taking a look behind the scenes at the screens, controls, properties, and formulas that give the app its capabilities. Si ha seguido estos pasos, debe conocer mejor el funcionamiento de una aplicación generada,If you've followed along, you should have a better understanding of how a generated app works. algo que puede aprovechar para crear sus propias aplicaciones.Now you can take this understanding into creating your own apps.

Antes de pasar la siguiente sección, queremos volver a SharePoint y mostrarle cómo se integra ahora la aplicación con la experiencia de la lista.Before moving on to the next section, we want to loop back to SharePoint and show you how the app is now integrated with the list experience. Como puede ver, FlooringApp ahora funciona como un vista de la lista y para iniciar la aplicación, es preciso hacer clic en Abrir.As you can see FlooringApp now functions as a view of the list, and you launch the app by clicking Open. Esta es una forma sencilla de administrar las listas con una experiencia personalizada fácil de usar.This provides a simple way to manage your lists with a friendly customized experience.

Aplicación como vista de la lista de Sharepoint

Una vez que ha terminado la sección de la aplicación SharePoint, puede elegir a dónde desea dirigirse:Now that you've gone through the SharePoint app section, you have a choice about where to go next:

La sección de administración muestra cómo compartir y controlar las versiones de las aplicaciones, y presenta los entornos, que son contenedores de aplicaciones, datos y otros recursos.The management section shows you how to share and version apps, and introduces environments, which are containers for apps, data, and other resources. Se recomienda que todos los usuarios lean la sección de administración en algún momento, pero la información que contiene la sección relativa a Common Data Service es excelente e incluye más personalizaciones de las aplicaciones.We recommend that everyone go through the management section at some point, but the Common Data Service section has some great information too, including more app customizations.

¡Enhorabuena!

Ha completado la sección Creación de una aplicación en SharePoint del aprendizaje guiado de Microsoft PowerApps.You've completed the Creating an app from SharePoint section of Microsoft PowerApps Guided Learning.

Ha aprendido a...

Siguiente tutorial

Creación de una aplicación en Common Data ServiceCreating an app from the Common Data Service

Colaboradores

  • Michael Blythe
  • olprod