Cómo guardar imágenes en un archivo de Excel y luego agregar estas imágenes a la aplicaciónHow to save images in an Excel file, and then add these images to your app

 

Requisitos previosPrerequisites

En este tutorial se hará lo siguiente:In this tutorial, we:

  • Crear un archivo de Excel y darle el formato de tablaCreate an Excel file and format it as a table
  • Crear una conexión a OneDrive para la Empresa.Create a connection to OneDrive for Business. Servirá cualquier cuenta de almacenamiento en nube.Any cloud storage account will work. En este tutorial, se usa OneDrive para la Empresa.In this walk-through, OneDrive for Business is used.
  • Crear una aplicación con un control de entrada manuscritaCreate an app with a pen input control
  • Guardar las imágenes creadas desde el control de entrada manuscrita en un archivo de ExcelSave the images created from the pen input control to an Excel file
  • Mostrar imágenes de un archivo de Excel en la aplicaciónDisplay images from an Excel file in your app

Creación del archivo de Excel como tablaCreate the Excel file as a table

  1. En un archivo de Excel en blanco, asígnele a una columna el nombre Image [imagen].In a blank Excel file, name a column Image [image].
  2. Siga estos pasos para crear una tabla:Create a table using the following steps:

    1. Seleccione cualquier fragmento de datos en cualquier fila y columna.Select any piece of data in any row and any column. Por ejemplo, seleccione Imagen.For example, select Image.
    2. En la cinta Insertar, seleccione Tabla.On the Insert ribbon, select Table.
    3. En la ventana de diálogo, seleccione La tabla tiene encabezados y, luego, Aceptar.In the dialog window, select My table has headers, and select OK.

      Ahora, el archivo de Excel tiene formato de tabla.Your Excel file is now in a table format. El artículo sobre cómo dar formato de tabla a los datos proporciona información adicional sobre el formato de tabla en Excel.Format the data as a table provides additional details on table formatting in Excel.

    4. Asigne a la tabla el nombre Drawings:Name the table Drawings:

      Cambio del nombre de la tabla a Drawings

  3. Asigne el nombre SavePen.xlsx al archivo de Excel y guárdelo en la cuenta de almacenamiento en nube (OneDrive para la Empresa, Dropbox, etc.).Name the Excel file SavePen.xlsx, and save the file to your cloud storage account (OneDrive for Business, Dropbox, and so on).

Creación de una aplicación con el control de entrada manuscritaCreate an app with the pen control

  1. En PowerApps, cree una aplicación en blanco.In PowerApps, create a blank app.
  2. En la aplicación, agregue la cuenta de almacenamiento en nube como un origen de datos.In your app, add the cloud storage account as a data source. Una vez que la agregue como origen de datos, agregue SavePen.xlsx como conexión y, luego, seleccione la tabla Drawings:Once added as a data source, add SavePen.xlsx as a connection, and then select the Drawings table:
    ConectarConnect

    Ahora, la tabla Drawings aparece como origen de datos.Now, the Drawings table is listed as a Data source.

  3. En el menú Insertar, seleccione Texto y, luego, Entrada manuscrita.On the Insert menu, select Text, and then select Pen input. Cámbiele el nombre a MyPen:Rename it MyPen:

    Cambiar nombre

  4. Agregue un control Botón (menú Insertar) y establezca su propiedad OnSelect en la fórmula siguiente:Add a Button control (Insert menu), and set its OnSelect property to the following formula:
    Patch(Drawings, Defaults(Drawings), {Image:MyPen.Image})
  5. Agregue un control Galería de imágenes (menú Insertar > Galería) y establezca su propiedad Items en Drawings.Add an Image gallery control (Insert menu > Gallery), and set its Items property to Drawings. La propiedad Image del control de galería se establece automáticamente en ThisItem.Image.The Image property of the gallery control is automatically set to ThisItem.Image.

    La pantalla debe ser similar a la siguiente:Your screen should look similar to the following:

    Pantalla de ejemplo

  6. Presione F5 o seleccione Vista previa ().Press F5 or select Preview (). Dibuje algo en MyPen y seleccione el botón.Draw something in MyPen, and the select the button. En la primera imagen del control de galería aparecerá lo que ha dibujado.The first image in the gallery control displays what you drew. Agregue algo más al dibujo y seleccione el botón.Add something else to your drawing, and select the button. En la segunda imagen del control de galería aparecerá lo que ha dibujado.The second image in the gallery control displays what you drew.

    Cierre la ventana de vista previa.Close the preview window.

  7. Vaya a la cuenta de almacenamiento en nube.Go to your cloud storage account. Hay una nueva carpeta SavePen_images que se crea automáticamente.There's a new SavePen_images folder that is automatically created. Es posible que tenga que actualizar para ver la carpeta nueva.You may need to refresh to see the new folder. Esta carpeta contiene las imágenes guardadas junto con los identificadores de los nombres de archivo.This folder contains your saved images with IDs for their file names.

    Abra SavePen.xlsx.Open SavePen.xlsx. La columna Image incluye la ruta de acceso a estas imágenes nuevas.The Image column includes the path to these new images.

Incorporación de una imagen de un archivo de Excel en la aplicaciónAdd the image in an Excel file to your app

En otro ejemplo, puede guardar imágenes en una cuenta de almacenamiento en nube y, luego, usar una tabla de Excel para mostrar las imágenes en la aplicación.In another example, you can save images in a cloud storage account, and then use an Excel table to display the images in your app.

En este ejemplo, se usa CreateFirstApp.zip, que contiene algunos archivos .jpeg.In this example, we use the CreateFirstApp.zip that contains some .jpeg files.

NOTA Cuando se muestran imágenes de un archivo de Excel, en la ruta de acceso a estas imágenes se deben usar barras diagonales.NOTE When displaying images from an Excel file, the path to these images must use forward slashes. Cuando PowerApps guarda imágenes en una tabla de Excel (como con los pasos anteriores), la ruta de acceso usa barras diagonales inversas.When PowerApps saves images to an Excel table (as with the previous steps), the path uses backslashes. De ese modo, también puede usar SavePen_images del ejemplo anterior.So, you can also use the SavePen_images from the previous example. Si lo hace, cambie las rutas de acceso en la tabla de Excel para usar barras diagonales en lugar de barras diagonales inversas.If you do, change the paths in the Excel table to use forward slashes instead of backslashes. De lo contrario, no se mostrarán las imágenes.Otherwise, the images will not display.

  1. Descargue CreateFirstApp.zip y extraiga la carpeta Assets en la cuenta de almacenamiento en nube.Download CreateFirstApp.zip, and extract the Assets folder to your cloud storage account.
  2. En una hoja de cálculo de Excel, cree una tabla similar a la siguiente:In an Excel spreadsheet, create a table that looks similar to the following:

    Tabla Jackets

  3. Asigne a la tabla el nombre Jackets.Name the table Jackets. Asigne al archivo de Excel el nombre Assets.xlsx.Name the Excel file Assets.xlsx. También puede cambiar el nombre de la carpeta Assets a Assets_images.You can also rename the Assets folder to Assets_images.
  4. En la aplicación, agregue la tabla Jackets como origen de datos.In your app, add the Jackets table as a data source.
  5. Agregue un control Solo imagen (menú Insertar > Galería) y establezca la propiedad Items en Jackets:Add an Image only control (Insert menu > Gallery), and set its Items property to Jackets:

    Propiedad Items

    La galería se actualiza automáticamente con las imágenes:The gallery is automatically updated with the images:

    Imágenes de chaquetas

Cuando defina la propiedad Items, la tabla de Excel se actualizará automáticamente con una columna nueva llamada PowerAppsId.When you set the Items property, the Excel table is automatically updated with a new column named PowerAppsId.

En la tabla de Excel, la ruta de acceso de una imagen también puede ser una dirección URL.In the Excel table, the image path can also be the URL to an image. Descargue el archivo de ejemplo Flooring Estimates en la cuenta de almacenamiento en nube, agregue la tabla FlooringEstimates como origen de datos de la aplicación y, luego, establezca el control de galería en FlooringEstimates.Download the Flooring Estimates sample file to your cloud storage account, add the FlooringEstimates table as a data source in your app, and then set the gallery control to FlooringEstimates. La galería se actualiza automáticamente con las imágenes.The gallery is automatically updated with the images.

Más informaciónLearn more

Incorporación de imagen, vídeo o sonidoAdd an image, a video, or a sound
Visualización de datos en un gráfico de líneas, circular o de barras en la aplicaciónShow data in a line, pie, or bar chart in your app
Información sobre tablas y registros de PowerAppsUnderstand tables and records in PowerApps