必要條件

在本教學課程中,我們︰

  • 建立 Excel 檔案並將其格式化為資料表
  • 建立商務用 OneDrive 的連接。 任何雲端儲存體帳戶都會運作。 在此逐步解說中,會使用商務用 OneDrive。
  • 使用畫筆輸入控制項建立應用程式
  • 將從畫筆輸入控制項建立的影像儲存到 Excel 檔案
  • 在您的應用程式中從 Excel 檔案顯示影像

建立 Excel 檔案做為資料表

  1. 在空白的 Excel 檔案中,將資料行命名為影像 [image]
  2. 使用下列步驟建立資料表︰

    1. 在任何資料列和任何資料行中選取任何資料的片段。 例如,選取 [影像]。
    2. 在 [插入] 功能區中,選取 [資料表]。
    3. 在對話視窗中,選取 [我的資料表有標題],然後選取 [確定]。

      您的 Excel 檔案現在是資料表格式。 將資料格式化為資料表可在 Excel 中的資料表格式上提供其他詳細資料。

    4. 將資料表命名為 Drawings

      將資料表重新命名為 Drawings

  3. 將 Excel 檔案命名為 SavePen.xlsx,並將檔案儲存到您的雲端儲存體帳戶 (商務用 OneDrive、Dropbox 等等)。

使用手寫筆控制項建立應用程式

  1. 在 PowerApps 中,建立空白應用程式
  2. 在應用程式中新增雲端儲存體帳戶做為資料來源。 一旦新增做為資料來源後,新增 SavePen.xlsx做為連接,然後選取 Drawings 資料表︰
    連接

    現在,列出 Drawings 資料表做為資料來源。

  3. 在 [插入] 功能表上,選取 [文字],然後選取 [筆畫輸入]。 將它重新命名為 MyPen

    重新命名

  4. 新增 [按鈕] 控制項 ([插入] 功能表),並將其 OnSelect 屬性設定為以下公式:
    Patch(Drawings, Defaults(Drawings), {Image:MyPen.Image})

  5. 新增 [圖像藝廊] 控制項 ([插入] 功能表 > [資源庫]),並將其 Items 屬性設定為 Drawings。 資源庫控制項的 Image 屬性會自動設為 ThisItem.Image

    您的畫面看起來應該如下所示︰

    範例畫面

  6. 按下 F5 鍵或選取 預覽)。 在 MyPen 中繪製項目,並選取按鈕。 資源庫控制項中的第一個影像會顯示您所繪製的項目。 在您的繪圖中新增其他元素,然後選取該按鈕。 資源庫控制項中的第二個影像會顯示您所繪製的項目。

    關閉預覽視窗。

  7. 移至您的雲端儲存體帳戶。 會自動建立新的 SavePen_images 資料夾。 您可能需要重新整理以查看新的資料夾。 此資料夾包含已儲存影像與其檔名的識別碼。

    開啟 SavePen.xlsx。 Image 資料行包含這些新影像的路徑。

將 Excel 檔案中的影像新增至應用程式

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

在此範例中,我們使用 CreateFirstApp.zip,其中包含一些 .jpeg 檔案。

請注意,從 Excel 檔案顯示影像時,這些影像的路徑必須使用正斜線。 當 PowerApps 將影像儲存至 Excel 資料表 (如同上一個步驟) 時,路徑會使用反斜線。 因此,您也可以使用前一個範例中的 SavePen_images。 如果您這樣做,請變更 Excel 資料表中的路徑,使用正斜線而不是反斜線。 否則,不會顯示影像。

  1. 下載 CreateFirstApp.zip,並解壓縮資產資料夾至您的雲端儲存體帳戶。
  2. 在 Excel 試算表中,建立的資料表看起來如下所示︰

    Jackets 資料表

  3. 將資料表命名為 Jackets。 將 Excel 檔案命名為 Assets.xlsx。 您也可以將資產資料夾重新命名為 Assets_images

  4. 在您的應用程式中新增 Jackets 資料表做為資料來源。

  5. 新增 [僅限影像] 控制項 ([插入] 功能表 > [資源庫]),並將其 Items 屬性設定為 Jackets

    Items 屬性

    資源庫會以影像自動更新︰

    Jacket 影像

當您設定 Items 屬性時,Excel 資料表會自動更新,新的資料行名為 PowerAppsId

在 Excel 資料表中,影像路徑也可以是影像的 URL。 將地板估計範例檔案下載至您的雲端儲存體帳戶、新增 FlooringEstimates 資料表做為應用程式中的資料來源,然後將資源庫控制項設定為 FlooringEstimates。 資源庫會以影像自動更新。

深入了解

新增影像、視訊或音效
在您應用程式中的線條、圓形或橫條圖中顯示資料
了解 PowerApps 中的資料表和記錄