Ejercicio: Trabajar con datos externos en una aplicación de lienzo

15 minutos

En este ejercicio, trabajará con datos externos en la aplicación de lienzo; agregará un origen de datos a la aplicación, creará o modificará datos mediante colecciones y modificará datos mediante la función Patch.

Para realizar el ejercicio, tiene que descargar la hoja de cálculo. Seleccione la descarga cuando se abra el vínculo. Extraiga la hoja de cálculo de Excel y cárguela en su propio OneDrive.

Agregar un origen de datos

Inicie sesión en Power Apps.
Cree una nueva aplicación de lienzo de Power Apps desde cero y asígnele el nombre ExternalData. Seleccione el formato Tableta.
Asegúrese de haber agregado la hoja de Excel (el vínculo está arriba) a su OneDrive.
En el botón Insertar, en la cinta del encabezado, seleccione Galería vertical.
En el panel Seleccionar origen de datos de la galería, escriba "OneDrive" en el campo de búsqueda y luego seleccione OneDrive para la Empresa en la lista. También puede expandir Conectores y desplazarse por todos los conectores disponibles hasta encontrar el conector OneDrive para la Empresa.
En Agregar una conexión, seleccione la conexión que desea usar para OneDrive para la Empresa (tiene una dirección de correo electrónico debajo).
En la parte inferior de OneDrive para la Empresa, seleccione Conectar.
Cuando se le indique que debe Elegir un archivo de Excel, busque el archivo de Excel que ha descargado en el paso 3 (o desplácese hasta encontrarlo) y selecciónelo.
Compruebe la tabla Artículos y seleccione Conectar.

Ahora la galería está conectada a la tabla de Excel de OneDrive para la Empresa y se pueden ver los datos del control de la galería.

Visualizar datos en una galería e interactuar con ellos

Seleccione la galería que ha agregado.
En el panel de propiedades de la derecha, seleccione el menú desplegable de la propiedad Layout.
Seleccione el diseño Imagen, título, subtítulo y cuerpo.
En el panel de propiedades de la derecha, seleccione el botón Editar para la propiedad Fields y configure los campos de la siguiente manera (tenga en cuenta que los controles tienen números al final, por ejemplo, Body será "Body1"; consulte la siguiente imagen como referencia):
- Body: Description
- Image: Image
- Subtitle: UnitPrice
- Title: Name
Cierre el cuadro de diálogo Datos (seleccione la X de la esquina superior derecha).
En la galería, seleccione el precio en la primera fila.
En la barra de fórmulas, asegúrese de que la propiedad Text esté seleccionada y escriba lo siguiente:

"$" & ThisItem.UnitPrice
En la galería, seleccione la imagen de la primera fila.
En el panel de propiedades de la derecha, seleccione el menú desplegable de la propiedad Image Position.
Cambie la propiedad de Fit a Fill y verá que la imagen se expande para rellenar las dimensiones del control de imagen.

Acaba de agregar datos personalizados y configurados a la galería.

Mover datos entre colecciones y orígenes de datos

Seleccione Screen1 (en cualquier lugar fuera de la galería).
Vamos a agregar un botón. Para ello, seleccionamos el botón Insertar en la cinta de opciones de la aplicación. Seleccione Botón y coloque el control de botón nuevo debajo de la galería.
Cambie el texto del botón a Agregar a colección y ajuste Tamaño de fuente de 15 a 12 para que el texto se ajuste al botón en una única línea.
Seleccione el botón y, en la barra de fórmulas, reemplace el valor false de OnSelect por la expresión siguiente:
```
 Collect(colItemsCollection, Items)`
```
colItemsCollection: hace referencia al nombre de la colección

Items: hace referencia al nombre del origen de los datos

Collect: copiará todos los registros de Items en la colección colItemsCollection
Seleccione el botón Versión preliminar en la parte superior derecha del editor de Power Apps (o presiones F5) para entrar en el modo de versión preliminar. Seleccione el botón Agregar a colección y salga del modo de versión preliminar. También puede mantener presionada la tecla Alt y seleccionar el botón Agregar a colección.
En el raíl lateral izquierdo, seleccione el botón Variables, expanda la opción Colecciones y seleccione los puntos suspensivos junto a la opción colItemsCollection que ha creado. Seleccione la opción Ver tabla.
Ahora debería ver una ventana emergente que muestra la tabla almacenada en la colección. Verá que los tres registros del origen de datos Items se han agregado a la colección colItemsCollection. Puede ver cualquiera de las colecciones de la aplicación y otras variables mediante esta técnica.
Seleccione Cancelar para cerrar la vista emergente y volver al lienzo de la aplicación.

Explorar otras funciones que se pueden usar con Colecciones

En la Vista de árbol, seleccione Nueva pantalla>En blanco.
Seleccione el botón Insertar, busque Datos y seleccione Tabla de datos.
En el panel de diálogo Seleccionar un origen de datos para la nueva tabla de datos, seleccione colItemsCollection.

Hemos convertido la colección colItemsCollection en el origen de datos de este control, y no la tabla Items de la hoja de Excel. El siguiente paso es definir los campos que queremos mostrar.
En el panel de propiedades de la derecha, seleccione el botón Editar campos de la propiedad Fields.
Seleccione Agregar campo.
Seleccione todos los campos disponibles y, a continuación, seleccione Agregar.
Cierre el panel Datos (seleccione la X de la derecha de Datos).
Inserte un botón seleccionando Insertar en la cinta de opciones, seleccione Botón y coloque el botón debajo de la tabla. Agregue tres botones más desde la izquierda hasta la derecha debajo del control de tabla de datos en la pantalla.
Cambie el texto de los cuatro botones por Agregar columna, Soltar columna, Mostrar columna, Cambiar nombre de columna respectivamente. Para ello, simplemente haga doble clic en cada botón y escriba el nuevo nombre. Ajuste el tamaño de fuente del botón Cambiar nombre de columna a 12, para que se ajuste en una única línea.
Seleccione el botón Agregar columna y actualice la propiedad OnSelect a esta expresión:
```
Collect(colAddCollection, AddColumns(colItemsCollection, "Revenue", UnitPrice * UnitsSold))
```
Al seleccionar este botón, se crea una nueva colección denominada colAddCollection, al tomar los datos de la colección colItemsCollection y al usar la función AddColumns, se agrega una nueva columna denominada Revenue, que se calcula como UnitPrice * UnitsSold.
Seleccione el botón Soltar columna en el lienzo y actualice la propiedad OnSelect a esta expresión:
```
Collect(colDropCollection, DropColumns(colItemsCollection, "UnitPrice"))
```
Al seleccionar este botón, se crea una nueva colección denominada colDropCollection, que copia todos los datos de la colección colItemsCollection, pero al utilizar la función DropColumns, se elimina la columna UnitPrice.
Seleccione el botón Mostrar columna y actualice la propiedad OnSelect a esta expresión:
```
Collect(colShowCollection, ShowColumns(colItemsCollection, "Name"))
```
Al seleccionar este botón, se crea una nueva colección denominada *colShowCollection, que incluye todos los datos de la colección colItemsCollection, pero utiliza la función ShowColumns para mostrar únicamente la columna Name.
Seleccione el botón Cambiar nombre de columna y actualice la propiedad OnSelect a esta expresión:
```
Collect(colRenameCollection, RenameColumns(colItemsCollection, "Name", "Product"))
```
Al seleccionar este botón, se crea una nueva colección denominada colRenameCollection, que incluye todos los datos de la colección colItemsCollection, pero al utilizar la función RenameColumns, se cambia el nombre de la columna Name por Product.

Cuando haya terminado, los botones deben tener el aspecto siguiente:
Seleccione el botón Versión preliminar (o Reproducir) en la parte superior derecha del editor de Power Apps para entrar en el modo de versión preliminar. Seleccione los cuatro botones. Luego salga del modo de versión preliminar. Lo que acabamos de hacer fue crear cuatro colecciones adicionales.
Echemos un vistazo a las cuatro nuevas colecciones que hemos creado. Seleccione Variables > Colecciones, elija los puntos suspensivos junto a colAddCollection y luego Ver tabla. Observe cómo la ventana emergente Variables tiene un menú en el lado izquierdo que muestra las cuatro nuevas colecciones que hemos creado, junto con la colección original. Puede seleccionar cada una de ellas para ver el efecto en la colección original que se mostró en la tabla de datos.

colAddCollection

colDropCollection

colShowCollection

colRenameCollection

Cierre la ventana emergente Variables después de haber echado un vistazo. Recuerde que las colecciones son tablas de datos temporales que solo están disponibles mientras usa la aplicación y solo están disponibles para el usuario actual. Por tanto, una vez que se cierra la aplicación, desaparecen.

Trabajar con la función Patch

Vuelva a Screen 1 en la aplicación.
Agregue un control Text label (seleccione el botón Insertar y luego Text label). Cambie el nombre de la propiedad Text por Product Name. Para ello, haga doble clic en la etiqueta y escriba directamente en el control. A continuación, coloque la etiqueta junto a la galería.

Sugerencia

Una técnica sencilla para copiar y pegar un control rápidamente consiste en seleccionar el control, mantener presionada la tecla Ctrl y presionar C; luego (mientras mantiene presionada la tecla Ctrl) presione V. Verá que el elemento se pega un poco por debajo y a la derecha del control que acaba de copiar.
Con la etiqueta seleccionada, cópiela, y en Texto de la etiqueta copiada, escriba Nueva descripción.
Vuelva a utilizar el botón Insertar para insertar un control Text Input. Borre la propiedad predeterminada para dejarla en blanco. Luego copie este control y coloque ambas entradas de texto junto a las etiquetas que ha creado en los pasos anteriores. Su pantalla ahora debe tener un aspecto similar al siguiente:
A continuación, inserte un control Botón y colóquelo debajo de las etiquetas. Cambie la propiedad Text por Update.
Seleccione la entrada de texto de la derecha de la etiqueta Nombre del producto.
En la barra de fórmulas, asegúrese de tener la propiedad Default y luego cambie la expresión a la siguiente (tenga en cuenta que el control de galería podría tener un nombre diferente al de Gallery1; cambie la fórmula en consecuencia):
```
Gallery1.Selected.Name
```
Esta etiqueta ahora mostrará el Nombre del registro seleccionado en la galería. Puede probarlo poniendo la aplicación en modo de Versión preliminar (o bien, manteniendo presionada la tecla Alt) y seleccionando distintos elementos de la galería. Observe cómo cambia el Nombre del producto que se muestra a medida que va seleccionando distintos elementos de la galería.
Repita este proceso para el control de entrada de texto que está a la derecha de la etiqueta Nueva descripción. Escriba la fórmula Default, tal y como se muestra a continuación:
```
Gallery1.Selected.Description
```
Otra cosa a tener en cuenta es la barra vertical oscura que se muestra en el lado izquierdo del elemento de la galería que está seleccionado.
Seleccione el botón Actualizar.
Cambie la propiedad OnSelect del botón por la expresión siguiente:
```
Patch(Items,LookUp(Items, Name = TextInput1.Text), { Description: TextInput1_1.Text })
```
Nota

Es posible que sus controles de entrada de texto tengan nombres diferentes de los que se muestran en este ejemplo. Ajuste la fórmula en función de dichos controles.

Recapitulemos lo que hemos hecho. Hemos creado una forma de actualizar la descripción de un producto.

Patch: proporciona los medios para modificar o crear un registro en el origen de datos; en este caso, estamos modificando un registro.
LookUp: utiliza el nombre de nuestro producto para encontrar el registro que deseamos modificar. Devuelve el primer registro que coincide con la condición: Name = TextInput1.Text.
Una vez que Power Apps encuentre el registro que coincida (mediante LookUp), actualizará la Descripción del producto en el origen de datos en función de lo que se haya escrito en la entrada de texto Nueva descripción.

Obtenga una versión preliminar de la aplicación para probarlo. Seleccione el elemento Canela en la galería, reemplace la descripción actual con "Té verde con sabor a canela" y luego seleccione Actualizar. La descripción que figura en la galería cambiará a la nueva descripción.

Captura de pantalla del diseño del formulario con el cambio a Canela

Enhorabuena Ha aprendido una técnica para actualizar el origen de datos.

Continuar