Crear y actualizar una colección en su aplicaciónCreate and update a collection in your app

Use una colección para almacenar datos que se pueden usar en la aplicación.Use a collection to store data that can be used in your app. Una colección es un grupo de elementos que son similares.A collection is a group of items that are similar. Por ejemplo, cree una colección MisImágenes que almacene todas las imágenes de los productos que vende su compañía.For example, you create a MyImages collection that stores all the product images your company sells. En PowerApps, puede agregar la colección MisImágenes y crear una aplicación que muestre todas las imágenes de estos productos.Within PowerApps, you can add your MyImages collection and create an app that displays all the pictures of these products. En otro ejemplo, puede crear una colección PriceList que incluya los productos y el precio de cada uno de ellos.In another example, you can create a PriceList collection that lists the products and the price of each product.

Puede crear y usar colecciones en PowerApps.You can create and use collections within PowerApps. Empecemos.Let's get started.

Requisitos previosPrerequisites

  • Suscríbase a PowerApps, instálelo, ábralo e inicie sesión con las mismas credenciales que usó para suscribirse.Sign up for PowerApps, install it, open it, and then sign in by providing the same credentials that you used to sign up.
  • Cree una aplicación o abra una existente en PowerApps.Create an app or open an existing app in PowerApps.
  • Aprenda a configurar un control en PowerApps.Learn how to configure a control in PowerApps.
  • En estos pasos se utiliza el archivo PriceList.zip como datos de entrada de ejemplo.These steps use the PriceList.zip file as sample input data. El archivo zip incluye un archivo XML que se puede convertir a Excel.The zip file includes an XML file that can be converted to Excel. De lo contrario, PowerApps lee automáticamente los archivos dentro los archivos .zip y lo importa correctamente.Otherwise, PowerApps automatically reads the files in the .zip files and imports it successfully. Puede descargar y usar estos datos de ejemplo o importar los suyos propios.You can download and use this sample data, or import your own.

Crear una colección de una sola columnaCreate a single-column collection

En los pasos siguientes se muestra cómo crear una colección dentro de la aplicación mediante la función Recopilar y cómo agregar elementos a la colección.The following steps show you how to create a collection within your app using the Collect function, and how to add items to your collection.

  1. Abra la aplicación.Open your app.
  2. En la pestaña Insertar, seleccione Texto y Entrada de texto:On the Insert tab, select Text, and then select Text input:
  3. En la esquina superior izquierda, seleccione Text1 y cambie el nombre del control a Destino:In the top left corner, select Text1, and rename the control to Destination:
  4. En la pestaña Insertar, seleccione Botón para agregar un control de botón al diseñador.On the Insert tab, select Button to add a button control to your designer. En la lista desplegable, aparece la propiedad AlSeleccionar.From the drop-down list, the OnSelect property is listed. Establézcala en la siguiente función:Set it to the following function:

    Collect(Destinations, Destination!Text)

    Debería parecerse a lo siguiente:It should look like the following:

  5. Seleccione el texto del botón y escriba Agregar:Select the button text, and enter Add:
  6. Seleccione el botón Agregar y muévalo bajo el control de texto.Select the Add button, and move it under your text control. Puede moverlo a cualquier lugar:You can move it anywhere:

En estos pasos, ha usado la función Recopilar para crear una colección denominada Destinos.In these steps, you used the Collect function to create a collection named Destinations. También ha agregado un control de botón que, cuando se selecciona, agrega nuevos elementos a la colección.You also added a button control and when selected, adds new items to your collection. Ahora, vea lo que ha creado:Now, see what you created:

  1. Seleccione Vista previa:Select Preview:
  2. Escriba un nombre de ciudad en el cuadro y seleccione el botón Agregar.Type a city name into the box, and then select the Add button.
  3. Escriba más nombres de ciudades y seleccione el botón Agregar con cada una.Enter some additional city names and select the Add button each time.
  4. Presione la tecla Esc para cerrar la ventana de vista previa.Press the Esc key to close the Preview window.
  5. Vea la colección Destinos y los valores de texto que ha especificado.See the Destinations collection and the text values you entered. En la pestaña Archivo, seleccione Colecciones.On the File tab, select Collections. Aparece el texto que escribió:The text you entered is listed:

Crédito extraExtra credit

Ahora, va a enlazar la colección Destinos a un cuadro de lista:Now, let's bind the Destinations collection to a listbox:

  1. Vuelva al diseñador.Go back to your designer.
  2. En la pestaña Insertar, seleccione Controles y Cuadro de lista:On the Insert tab, select Controls, and then select ListBox:
  3. Mueva el cuadro de lista para que se vea fácilmente.Move the listbox so you can easily see it. Establezca la propiedad Elementos en la siguiente expresión:Set its Items property to the following expression:
    Destinations!Value

    Cuando lo haga, el cuadro de lista se rellena automáticamente con los elementos que especificó antes en la colección Destinos:When you do this, the listbox is automatically populated with the items you previously entered in the Destinations collection:

Obtenga una vista previa de los cambios: .Preview your changes: . En el cuadro de lista, puede ver las distintas ciudades que especificó.In the listbox, you can see the different cities you entered. En el control de entrada de texto, escriba una nueva ciudad y seleccione el botón Agregar.In the text-input control, enter a new city, and select the Add button. El cuadro de lista se actualiza automáticamente para incluir la nueva ciudad que escribió.The listbox is automatically updated to include the new city you entered.

Crear una colección de varias columnasCreate a multi-column collection

En los pasos siguientes se muestra cómo crear una colección dentro de la aplicación mediante la función Recopilar y cómo agregar varias filas a la colección.The following steps show you how to create a collection within your app using the Collect function, and how to add multiple rows to your collection.

  1. En la pestaña Inicio, abra una nueva pantalla.On the Home tab, open a new screen.
  2. En la pestaña Insertar, seleccione Texto y Entrada de texto.On the Insert tab, select Text, and then select Text input.
  3. Cambie el nombre del control de texto a Ciudad:Rename the text control to City:
  4. Inserte otro control de entrada de texto y cambie su nombre a Estados.Insert another text-input control, and rename it to States.
  5. Mueva los controles de texto Ciudad y Provincias de forma que se vean ambos:Move the City and States text controls so you can see them both:

    Nota: Puede reemplazar "Entrada de texto" por algo como "Ciudad" o "Provincia", como en la imagen.Note: You can replace 'Text Input' with something like 'City' or 'State', which was done in the image.

  6. En la pestaña Insertar, seleccione Botón.On the Insert tab, select Button. Establezca su propiedad AlSeleccionar en la función siguiente:Set its OnSelect property to the following function:
    Collect(Destinations, {Cities:City!Text, States:States!Text})

    Debería parecerse a lo siguiente:It should look like the following:

    Nota: Puede usar esta misma función para agregar más columnas a esta colección.Note: You can use this same function to add additional columns to this collection. Por ejemplo, puede agregar otro control de entrada de texto para País para agregar una columna Países:For example, you can add another text-input control for Country to add a Countries column:

    Collect(Destinations, {Cities:City!Text, States:States!Text}, {Countries:Country!Text})

  7. Cambie el nombre del control de botón AddCityStateButton y establezca su propiedad Texto en Agregar ciudad y provincia:Rename the button control AddCityStateButton, and set its Text property to Add City and State:

En estos pasos, ha agregado una columna Ciudades y una columna Provincias a la colección Destinos.In these steps, you added a Cities column and a States column to the Destinations collection. El control de botón agrega estos nuevos elementos de texto a la colección.The button control adds these new text items to your collection. Ahora, vea lo que ha creado:Now, see what you created:

  1. Seleccione Vista previa:Select Preview:
  2. Escriba texto en los cuadros Ciudad y Provincia, y seleccione el botón Agregar ciudad y provincia.Type some text into the City and State boxes, and then select the Add City and State button.
  3. Agregue más ciudades y provincias.Add a few more cities and states.
  4. Presione la tecla Esc para cerrar la ventana de vista previa.Press the Esc key to close the Preview window.
  5. Para ver los elementos que agregó a la colección Destinos, seleccione la pestaña Archivo y seleccione Colecciones:To see the items you added to the Destinations collection, select the File tab, and then select Collections:

Agregar columnas a una colecciónAdd columns to a collection

Hay algunas secciones en este tutorial.There are a few sections in this walk-through. Cuando haya finalizado, sabrá importar datos a la colección, crear una galería que muestre datos en una lista de precios y usar un control deslizante que determina la cantidad de un producto.When complete, you'll know how to import data into your collection, create a gallery that shows data in a price list, and use a slider control that determines the quantity of a product.

Importar la lista de precios y crear la colecciónImport the price list and create the collection

  1. Descargue el archivo PriceList.zip.Download the PriceList zip file.
  2. En la pestaña Inicio, agregue una nueva pantalla.On the Home tab, add a new screen.
  3. En la pestaña Insertar, seleccione Controles e Importar:On the Insert tab, select Controls, and then select Import:
  4. En la pestaña Acción, seleccione Cuando se selecciona.On the Action tab, select OnSelect. Escriba la siguiente función:Enter the following function:

    Collect(PriceList, Import1!Data)

  5. Obtenga una vista previa de la aplicación.Preview your app. Seleccione el botón Importar datos, el archivo PriceList.zip y Abrir.Select the Import Data button, select the PriceList.zip file, and select Open.
  6. Cierre la ventana de vista previa.Close the Preview window.
  7. Seleccione la pestaña Archivo y Colecciones.Select the File tab, and select Collections. Aparecen en la lista los elementos de PriceList que se han importado:The PriceList items you imported are listed:
  1. Vuelva al diseñador.Go back to your designer.
  2. En la pestaña Insertar, seleccione Galería, baje hasta Galería personalizada y seleccione Vertical:On the Insert tab, select Gallery, scroll down to Custom Galleries, and then select Portrait:
  3. Cambie el nombre de la galería a GaleríaDePrecios y establezca la propiedad Elementos en PriceList:Rename the gallery to PriceGallery and set the Items property to PriceList:
  4. Mueva la galería de PriceList bajo el control Importar datos.Move the PriceList gallery below the Import Data control. Seleccione los bordes de la galería y haga clic y arrastre para cambiar su tamaño de forma que se muestren tres recuadros.Select the gallery borders and use click-and-drag to resize the gallery so three squares are shown.
  5. En la galería, seleccione el primer recuadro y agregue tres etiquetas (pestaña Insertar > Etiqueta).In the gallery, select the first square, and add three labels (Insert tab > Label).
  6. Cambie el tamaño de las etiquetas y organícelas en una fila cerca de la parte superior del primer recuadro.Resize and arrange the labels in a row near the top of the first square. La galería tendrá un aspecto similar al siguiente:Your gallery looks similar to the following:
  7. Establezca la propiedad Texto de cada etiqueta en la siguiente expresión:Set the Text property of each label to the following expression:

    EtiquetasLabel Establezca la propiedad Texto enSet Text property to
    Etiqueta1Label1 ThisItem!Name
    Etiqueta2Label2 Text(ThisItem!Price, "$#")
    Etiqueta3Label3 ThisItem!Maker

    Cuando hace esto, las etiquetas se actualizan automáticamente con los valores de nombre, precio y fabricante dentro de la colección PriceList.When you do this, the labels are automatically updated with the name, price, and maker values within the PriceList collection.

  8. Cambie el tamaño de las etiquetas y la galería para quitar el espacio extra.Resize the labels and the gallery to remove any extra spaces. El pantalla tiene un aspecto similar al siguiente:Your screen look similar to the following:

Agregar el control deslizante de cantidad y actualizar la colecciónAdd the quantity slider and update the collection

  1. En el menú Insertar, seleccione Controles y Control deslizante.On the Insert menu, select Controls, and select Slider. Cambie el nombre del control deslizante a CantPedido y muévalo bajo la galería.Rename the slider to OrderQty, and move it under the gallery.
  2. Agregue un botón, establezca la propiedad Texto en Agregar y muévalo bajo el control deslizante CantPedido.Add a button, set its Text property to Add, and move it under the OrderQty slider. La aplicación tendrá un aspecto similar al siguiente:Your app looks similar to the following:
  3. Establezca la propiedad AlSeleccionar del botón Agregar en la siguiente expresión:Set the OnSelect property of the Add button to the following expression:

    Collect(OrderList, {Name:PriceGallery!Selected!Name, Qty:OrderQty!Value, Cost:OrderQty!Value*LookUp(PriceList, PriceGallery!Selected!Name in Name, Price)});SaveData(OrderList, "orderfile")

    Nota: Cuando seleccione este botón más adelante en este procedimiento, creará y guardará una colección llamada ListaDePedidos.Note When you select this button later in this procedure, you'll create and save a collection named OrderList. La colección contendrá el nombre de un producto que especifique en la galería, una cantidad que elija con el control deslizante y el costo total calculado al multiplicar la cantidad por el precio del producto.The collection will contain the name of a product that you enter in the gallery, a quantity that you choose with the slider, and the total cost calculated by multiplying the quantity by the price of the product.

  4. Seleccione la pestaña Pantalla y establezca la propiedad AlEstarVisible en la siguiente expresión:Select the Screen tab and set the OnVisible property to the following expression:

    If(IsEmpty(PriceList), LoadData(PriceList, "pricefile"));If(IsEmpty(OrderList), LoadData(OrderList, "orderfile"))

Ahora, vea lo que ha creado:Now, see what you created:

  1. Abra Vista previa.Open Preview.
  2. Seleccione un producto en la galería, mueva el control deslizante a la cantidad deseada y seleccione el botón Agregar.Select a product in the gallery, move the slider to your desired quantity, and then select the Add button.

    Importante

    Cuando selecciona un producto, este no se resalta para indicar que se ha seleccionado.When you select a product, that product is not highlighted to indicate you selected it. Cuando se creó la galería, no se agregó esta funcionalidad.When we created the gallery, we didn't add this functionality. Tenga en cuenta que, si hace clic en el producto, se selecciona.Know that clicking the product does select it.

  3. Repita estos pasos para agregar algunos productos más.Repeat these steps to add a couple more products. Presione ESC para cerrar la ventana de vista previa.Press ESC to close the Preview window.
  4. En la pestaña Archivo, seleccione Colecciones para mostrar una vista previa de la colección ListaDePedidos creada:On the File tab, select Collections to display a preview of the OrderList collection you created:

Sugerencia

Para quitar todos los elementos de la lista de pedidos, agregue un botón, establezca su propiedad Texto en Borrar y establezca su propiedad OnSelect en la siguiente expresión:To remove all items from the order list, add a button, set its Text property to Clear, and set its OnSelect property to the following expression:
Clear(OrderList);SaveData(OrderList, "orderfile")
Para quitar un elemento cada vez, muestre la colección ListaDePedidos en una galería y establezca la propiedad AlSeleccionar de una etiqueta de dicha galería en la siguiente expresión:To remove one item at a time, show the OrderList collection in a gallery, and then set the OnSelect property of a label in that gallery to the following expression:
Remove(OrderList, ThisItem);SaveData(OrderList, "orderfile")

consejos y trucosTips and Tricks

  • En cualquier momento, puede seleccionar el botón Vista previa () para ver los gráficos y cómo se muestran con los datos.At anytime, you can select the Preview button () to view your charts, and to see how they look with data.
  • Al diseñar la aplicación, puede volver a cambiar el tamaño de los controles y moverlos haciendo clic en ellos y arrastrándolos.When designing your app, you can re-size the controls and move them around using click-and-drag.

Qué ha aprendidoWhat you learned

En este tema:In this topic, you:

  • Ha usado la función Collect() para crear una colección dentro de la aplicación.Used the Collect() function to create a collection within your app.
  • Ha agregado un control de botón que, cuando se selecciona, agrega nuevos elementos a la colección.You added a button control and when selected, the button adds new items to your collection.
  • Ha usado un cuadro de lista para agregar elementos a la colección.Used a listbox to add items to your collection.
  • Ha agregado un control deslizante para actualizar elementos dentro de la colección.Added a slider control to update items within the collection.