如何將影像儲存在 Excel 檔案,並接著將這些影像新增至您的應用程式How to save images in an Excel file, and then add these images to your app

在本教學課程中,我們︰In this tutorial, we:

  • 建立 Excel 檔案並將其格式化為資料表Create an Excel file and format it as a table
  • 建立商務用 OneDrive 的連接。Create a connection to OneDrive for Business. 任何雲端儲存體帳戶都會運作。Any cloud storage account will work. 在此逐步解說中,會使用商務用 OneDrive。In this walk-through, OneDrive for Business is used.
  • 使用畫筆輸入控制項建立應用程式Create an app with a pen input control
  • 將從畫筆輸入控制項建立的影像儲存到 Excel 檔案Save the images created from the pen input control to an Excel file
  • 在您的應用程式中從 Excel 檔案顯示影像Display images from an Excel file in your app

必要條件Prerequisites

建立 Excel 檔案做為資料表Create the Excel file as a table

  1. 在空白的 Excel 檔案中,將資料行命名為影像 [image]In a blank Excel file, name a column Image [image].
  2. 使用下列步驟建立資料表︰Create a table using the following steps:

    1. 在任何資料列和任何資料行中選取任何資料的片段。Select any piece of data in any row and any column. 例如,選取 [影像]。For example, select Image.
    2. 在 [插入] 功能區中,選取 [資料表]。On the Insert ribbon, select Table.
    3. 在對話視窗中,選取 [我的資料表有標題],然後選取 [確定]。In the dialog window, select My table has headers, and select OK.

      您的 Excel 檔案現在是資料表格式。Your Excel file is now in a table format. 將資料格式化為資料表可在 Excel 中的資料表格式上提供其他詳細資料。Format the data as a table provides additional details on table formatting in Excel.

    4. 將資料表命名為 DrawingsName the table Drawings:

      將資料表重新命名為 Drawings

  3. 將 Excel 檔案命名為 SavePen.xlsx,並將檔案儲存到您的雲端儲存體帳戶 (商務用 OneDrive、Dropbox 等等)。Name the Excel file SavePen.xlsx, and save the file to your cloud storage account (OneDrive for Business, Dropbox, and so on).

使用手寫筆控制項建立應用程式Create an app with the pen control

  1. 在 PowerApps 中,建立空白應用程式In PowerApps, create a blank app.
  2. 在您的應用程式中,新增雲端儲存體帳戶做為資料來源In your app, add the cloud storage account as a data source. 一旦新增做為資料來源後,新增 SavePen.xlsx做為連接,然後選取 Drawings 資料表︰Once added as a data source, add SavePen.xlsx as a connection, and then select the Drawings table:
    連接Connect

    現在,Drawings 資料表已列為資料來源。Now, the Drawings table is listed as a Data source.

  3. 在 [插入] 功能表上,選取 [文字],然後選取 [筆畫輸入]。On the Insert menu, select Text, and then select Pen input. 將它重新命名為 MyPenRename it MyPen:

    重新命名

  4. 新增 [按鈕] 控制項 ([插入] 功能表),並將其 OnSelect 屬性設定為以下公式:Add a Button control (Insert menu), and set its OnSelect property to the following formula:
    Patch(Drawings, Defaults(Drawings), {Image:MyPen.Image})
  5. 新增 [圖像藝廊] 控制項 ([插入] 功能表 > [資源庫]),並將其 Items 屬性設定為 DrawingsAdd an Image gallery control (Insert menu > Gallery), and set its Items property to Drawings. 資源庫控制項的 Image 屬性會自動設為 ThisItem.ImageThe Image property of the gallery control is automatically set to ThisItem.Image.

    您的畫面看起來應該如下所示︰Your screen should look similar to the following:

    範例畫面

  6. 按下 F5 鍵或選取 [預覽]()。Press F5 or select Preview (). 在 MyPen 中繪製項目,並選取按鈕。Draw something in MyPen, and the select the button. 資源庫控制項中的第一個影像會顯示您所繪製的圖。The first image in the gallery control displays what you drew. 在您的繪圖中新增其他元素,然後選取該按鈕。Add something else to your drawing, and select the button. 資源庫控制項中的第二個影像會顯示您所繪製的圖。The second image in the gallery control displays what you drew.

    關閉預覽視窗。Close the preview window.

  7. 移至您的雲端儲存體帳戶。Go to your cloud storage account. 會自動建立新的 SavePen_images 資料夾。There's a new SavePen_images folder that is automatically created. 您可能需要重新整理以查看新的資料夾。You may need to refresh to see the new folder. 此資料夾包含已儲存影像與其檔名的識別碼。This folder contains your saved images with IDs for their file names.

    開啟 SavePen.xlsx。Open SavePen.xlsx. Image 資料行包含這些新影像的路徑。The Image column includes the path to these new images.

將 Excel 檔案中的影像新增至應用程式Add the image in an Excel file to your app

在另一個範例中,您可以將影像儲存在雲端儲存體帳戶,然後使用 Excel 資料表,在您的應用程式中顯示影像。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.

在此範例中,我們使用 CreateFirstApp.zip,其中包含一些 .jpeg 檔案。In this example, we use the CreateFirstApp.zip that contains some .jpeg files.

注意

從 Excel 檔案顯示影像時,這些影像的路徑必須使用正斜線。When displaying images from an Excel file, the path to these images must use forward slashes. 當 PowerApps 將影像儲存至 Excel 資料表 (如同上一個步驟) 時,路徑會使用反斜線。When PowerApps saves images to an Excel table (as with the previous steps), the path uses backslashes. 因此,您也可以使用前一個範例中的 SavePen_imagesSo, you can also use the SavePen_images from the previous example. 如果您這樣做,請變更 Excel 資料表中的路徑,使用正斜線而不是反斜線。If you do, change the paths in the Excel table to use forward slashes instead of backslashes. 否則,不會顯示影像。Otherwise, the images will not display.

  1. 下載 CreateFirstApp.zip,並解壓縮 Assets 資料夾至您的雲端儲存體帳戶。Download CreateFirstApp.zip, and extract the Assets folder to your cloud storage account.
  2. 在 Excel 試算表中,建立的資料表看起來如下所示︰In an Excel spreadsheet, create a table that looks similar to the following:

    Jackets 資料表

  3. 將資料表命名為 JacketsName the table Jackets. 將 Excel 檔案命名為 Assets.xlsxName the Excel file Assets.xlsx. 您也可以將資產資料夾重新命名為 Assets_imagesYou can also rename the Assets folder to Assets_images.
  4. 在您的應用程式中,新增 Jackets 資料表做為資料來源。In your app, add the Jackets table as a data source.
  5. 新增 [僅限影像] 控制項 ([插入] 功能表 > [資源庫]),並將其 Items 屬性設定為 JacketsAdd an Image only control (Insert menu > Gallery), and set its Items property to Jackets:

    Items 屬性

    資源庫會以影像自動更新︰The gallery is automatically updated with the images:

    Jacket 影像

當您設定 Items 屬性時,Excel 資料表會自動更新,新的資料行名為 PowerAppsIdWhen you set the Items property, the Excel table is automatically updated with a new column named PowerAppsId.

在 Excel 資料表中,影像路徑也可以是影像的 URL。In the Excel table, the image path can also be the URL to an image. 地板估計範例檔案下載至您的雲端儲存體帳戶、新增 FlooringEstimates 資料表做為應用程式中的資料來源,然後將資源庫控制項設定為 FlooringEstimatesDownload 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. 資源庫會以影像自動更新。The gallery is automatically updated with the images.

深入了解Learn more

新增影像、視訊或音效Add an image, a video, or a sound
在您應用程式中的線條、圓形或橫條圖中顯示資料Show data in a line, pie, or bar chart in your app
了解 PowerApps 中的資料表和記錄Understand tables and records in PowerApps