共用方式為

在畫布應用程式庫中顯示、排序及篩選資料

建立圖庫以顯示數個產品的影像和文字，並排序和篩選該資訊。

在 Power Apps 中，您可以使用圖庫來顯示數個相關項目，就像您在目錄中看到的一樣地。 圖庫非常適合顯示有關產品的信息，例如名稱和價格。 在本主題中，我們會建立圖庫，並使用類似 Excel 的功能來對資訊進行排序和篩選。 此外，選取項目時，項目周圍會放置邊框。

備註

本主題使用平板電腦應用程式。 您可以使用手機應用程序，但需要調整某些控件的大小。

先決條件

  • 註冊 Power Apps，然後使用註冊時的相同帳戶登入。
  • 從 範本、 資料或 從頭開始建立平板電腦應用程式。
  • 瞭解如何 設定控制項。
  • 這些步驟會使用 CreateFirstApp 作為範例輸入資料，其中包括 .jpg 影像。 zip 檔案包含可轉換為 Excel 的 XML 檔案。 否則，Power Apps 會自動讀取 .zip 檔案中的檔案並成功匯入。 您可以下載並使用此範例資料，或匯入您自己的範例資料。

  1. 使用範例資料建立名為 Inventory 的集合。 步驟包括：

    1. 在 [ 插入 ] 索引標籤上，選取 [ 控制項]，然後選取 [匯入]：

      插入控制項

    2. 將匯入控制項的 OnSelect 屬性設定為下列公式：
      Collect（Inventory，Import1.Data）

      OnSelect 屬性

    3. 選取 [匯入資料 ] 按鈕以開啟 Windows 檔案總管。 選取 CreateFirstApp.zip，然後選取 開啟。

    4. 在 [檔案] 功能表中，選取 [集合]。 Inventory 集合會列出您匯入的資料：

      檔案 - 集合

      您剛剛建立了 [庫存] 集合，其中包含五種產品的相關資訊，包括設計影像、產品名稱和庫存單位數量。

      備註

      匯入控制項可用來匯入類似 Excel 的資料並建立集合。 匯入控制項會在您建立應用程式和預覽應用程式時匯入資料。 目前，匯入控制項不會在您發佈應用程式時匯入資料。

  2. 選取返回箭頭以返回設計介面。

  3. 在 [插入] 功能區上，點擊或輕觸 [資源庫]，然後點擊或輕觸 [水平畫廊]。

    畫廊 - 水平

  4. 在右側窗格中，按一下或點選標題和副標題疊加在圖像上的選項：

    佈局

  5. 將資源庫的 Items 屬性設定為 Inventory：

    圖庫佈局

  6. 將資源庫重新命名為 ProductGallery，然後移動資源庫，使其不會封鎖其他控制項。 調整圖庫大小，使其顯示三個產品：

    重新命名圖庫

  7. 在圖庫的第一項中，選取底部標籤：

    帶圖庫的應用程序

    備註

    當您變更任何圖庫中的第一個項目時，您會自動變更圖庫中的所有其他項目。

  8. 將標籤的 Text 屬性設定為下列運算式：
    此項目.庫存單位

    當您執行此操作時，標籤會顯示每種產品的庫存單位：

各產品庫存

備註

依預設，頂端標籤的 Text 屬性會設定為 ThisItem.ProductName。 您可以將其更改為收藏中的任何其他項目。 例如，如果您的集合有 ProductDescription 或 Price 欄位，您可以將標籤設定為 ThisItem.ProductDescription 或 ThisItem.Price。

使用這些步驟，您將包含 .jpg 影像的資料匯入集合。 然後，您新增了顯示資料的圖庫，並設定了標籤以顯示每個產品的庫存單位。

  1. 請選擇畫廊中除了第一個以外的任何項目。 編輯圖示隨即顯示（左上角）。 選取編輯圖示：
    Edit

  2. 在 [插入] 索引標籤上，選取 [圖形]，然後選取矩形。 每個圖庫項目中都會顯示一個藍色實心矩形。

  3. 在 [首頁] 索引標籤上，選取 [填入]，然後選取 [無填入]。

  4. 選取 [框線]，選取 [框線樣式]，然後選取實線。

  5. 再次選取「 邊框 」，並將厚度設定為 3。 調整矩形的大小，使其包圍圖庫項目。 圖庫中的項目現在具有藍色框線，看起來應該類似以下內容：
    選取邊框

  6. 在 [圖形] 索引標籤上，選取 [ 可見]，然後在 [公式列] 中輸入下列公式：

    If（ThisItem.IsSelected， true）

    資源庫中目前選取的項目周圍會有藍色矩形。 選取幾個圖庫項目，以確認矩形出現在所選項目的周圍。 請記住，您也可以開啟「 預覽預覽」按鈕 來查看和測試您正在建立的內容。

小提示

依序選取矩形、首頁 索引標籤上的重新排列，以及移到最下層。 使用此功能，您可以選擇一個圖庫項目，而不會被邊框阻擋任何內容。

使用這些步驟，您可以在圖庫中的目前選取範圍周圍新增框線。

在這些步驟中，我們將按升序和降序對圖庫項目進行排序。 此外，我們還將添加一個滑塊控件，以按您選擇的庫存單位“過濾”圖庫項目。

以遞增或遞減順序排序

  1. 選取資源庫中除第一個項目 之外 的任何項目。

  2. Items 屬性目前設定為 Inventory （您的集合名稱）。 將其變更為下列內容：

    Sort（Inventory， ProductName）

    當您執行此操作時，資源庫中的項目會依產品名稱遞增排序： 資源庫排序

    嘗試降序。 將資源庫的 Items 屬性設定為下列公式：

    排序(Inventory, ProductName, 遞減)

  1. 新增一個 Slider 控制項（於 插入 索引標籤 >控制項），將其重新命名為 StockFilter，然後將其移至畫廊下方。

  2. 設定滑桿，讓使用者無法將其設定為庫存單位範圍之外的值：

    1. 在 [內容 ] 索引標籤上，選取 [最小值]，然後輸入下列運算式：
      Min(Inventory, UnitsInStock)
    2. 在 [內容 ] 索引標籤上，選取 [最大]，然後輸入下列運算式：
      Max(Inventory, UnitsInStock)

  3. 選取資源庫中的任何項目，但第一個項目除外。 將資源庫的 Items 屬性設定為下列運算式：
    Filter(Inventory, UnitsInStock<=StockFilter.Value)

  4. 在 「預覽」中，將滑桿調整為介於圖庫中最高和最低數量之間的值。 當您調整滑桿時，畫廊只會顯示在您選擇的值以下的產品：
    具有滑桿值的預覽圖庫

現在，讓我們添加到我們的過濾器中：

  1. 返回設計工具。
  2. 在 [插入] 索引標籤上，選取 [文字]，選取 [輸入文字]，然後將新控制項重新命名為 NameFilter。 將文字控制項移至滑桿下方。
  3. 將資源庫的 Items 屬性設定為下列運算式：
    Filter(Inventory, UnitsInStock<=StockFilter.Value && NameFilter.Text in ProductName)
  4. 在 [預覽] 中，將滑桿設定為 30，然後在文字輸入控制項中輸入字母 g 。 圖庫展示了庫存低於 30 件且名稱中帶有字母“g”的唯一產品：
    預覽滑桿設定值為 30

提示和技巧

  • 您可以隨時選取預覽按鈕 （預覽按鈕影像） 來查看您建立的內容並進行測試。
  • 設計應用程式時，您可以調整控制項的大小，並使用按一下並拖曳來移動控制項。
  • 按 ESC 或選擇 X 關閉預覽視窗。
  • 使用圖庫時，請選取圖庫中的第一個項目，以變更圖庫中的所有項目。 例如，選取第一個項目，以將框線新增至圖庫中的所有項目。
  • 若要更新資源庫的屬性，請選取資源庫中除第一個項目 以外的 任何項目。 例如，選取第二個專案以更新 Items、 ShowScrollbar 和其他套用至資源庫的屬性 （而不是資源庫中的專案）。

您學到的內容

在本主題中，您會：

  • 建立集合，將包含 .jpg 影像的資料匯入該集合，並在圖庫中顯示資料。
  • 在圖庫中的每個影像下，設定一個標籤，列出該項目的庫存單位。
  • 在您選取的項目周圍新增框線。
  • 按產品名稱以升序和降序對項目進行排序。
  • 新增滑桿和輸入文字控制項，以依庫存單位和產品名稱篩選產品。
  • Last updated on