建立資源庫來顯示關於幾項產品的影像和文字，並排序和篩選該資訊。

在 PowerApps 中，您可以使用資源庫來顯示幾個相關的項目，就如同您在目錄中所看到的。 資源庫非常適合用於顯示產品的相關資訊，例如名稱和價格。 在本主題中，我們將建立資源庫，並使用類似 Excel 的函式排序和篩選資訊。 此外，在選取某個項目時，該項目周圍會出現框線。

注意：

本主題使用平板電腦應用程式。 您可以使用行動電話應用程式，但您會需要調整某些控制項的大小。

必要條件

  • 註冊 PowerApps 並安裝 PowerApps。 開啟 PowerApps 之後，以您註冊時使用的認證來登入。
  • 利用範本、資料或從零開始建立平板電腦應用程式。
  • 了解如何設定控制項。
  • 這些步驟使用 CreateFirstApp 作為輸入資料範例，其中含有 .jpg 影像。 此 zip 檔包含一個可以轉換成 Excel 的 XML 檔案。 否則，PowerApps 會自動讀取.zip 檔中的檔案，並成功匯入檔案。 您可以下載並使用此範例資料，或匯入您自己的資料。

在資源庫中顯示資料

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

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


    1. 將匯入控制項的 OnSelect 屬性設定為下列公式：
    Collect(Inventory, Import1!Data)


    1. 選取 [匯入資料] 按鈕以開啟 Windows 檔案總管。 選取 *CreateFirstApp.zip*，然後選取 [開啟]。 1. 在 [檔案] 功能表中，選取 [集合]。 隨即會列出「庫存」集合和您匯入的資料︰

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

    注意：

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

  2. 選取上一步箭頭以返回設計工具。

  3. 在 [插入] 索引標籤上，按一下或點選 [資源庫]，然後按一下或點選 [水平] 資源庫。

  4. 在右側窗格中，按一下或點選標題和副標題與圖形重疊的選項︰

  5. 將資源庫的 Items 屬性設定為庫存︰

  6. 將資源庫重新命名為 ProductGallery，並移動資源庫使它不會擋住其他控制項。 調整資源庫大小，讓它顯示三項產品︰

  7. 在資源庫的第一個項目中，選取底部的標籤︰

    注意：

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

  8. 將標籤的 Text 屬性設定為下列運算式︰
    ThisItem!UnitsInStock

    當您這樣做時，標籤會顯示每項產品的庫存單位數︰

注意：

根據預設，頂端標籤的 Text 屬性會設定為 ThisItem!ProductName。 您可以將它變更為集合中的其他任何項目。 例如，如果您的集合有 [產品描述] 或 [價格] 欄位，您可以將標籤設定為 ThisItem!ProductDescription 或 ThisItem!Price。

使用這些步驟後，您已將包括 .jpg 影像在內的資料匯入集合。 接著，您新增了會顯示資料的資源庫，並設定了標籤以顯示每項產品的庫存單位數。

醒目提示您所選取的資源庫項目

  1. 在資源庫中選取任何項目，但第一個項目除外。 隨即會顯示 [編輯] 圖示 (左上角)。 選取 [編輯] 圖示︰

  2. 在 [插入] 索引標籤上，選取 [圖形]，然後選取矩形。 每個資源庫項目隨即會出現藍色實線矩形。
  3. 在 [首頁] 索引標籤上，選取 [填滿]，然後選取 [無填滿]。
  4. 依序選取 [框線]、[框線樣式] 和 [實線]。
  5. 再次選取 [框線]，並將粗細設為 3。 調整矩形大小，使其圍繞資源庫項目。 資源庫中的項目現在會有藍色框線，外觀看起來應該會像下面這樣︰

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

    If(ThisItem!IsSelected, true)

    資源庫中目前的選取項目周圍會有藍色矩形。 選取幾個資源庫項目，以確認您所選取的每個項目周圍都會顯示矩形。 請記住，您也可以開啟預覽 來查看和測試您正在建立的項目。

秘訣

依序選取矩形、[首頁] 索引標籤上的 [重新排列] 以及 [移到最下層]。 使用這項功能，您就可以選取資源庫項目，而不會讓框線擋住任何項目。

使用這些步驟，您已在資源庫目前的選取項目周圍加上框線。

在資源庫中排序和篩選項目

在這些步驟中，我們要以遞增和遞減順序排序資源庫項目。 此外，我們會新增滑桿控制項，來依庫存單位數「篩選」您所選擇的資源庫項目。

以遞增或遞減順序排序

  1. 在資源庫中選取任何項目，但第一個項目除外。

  2. Items 屬性目前設定為「庫存」(您擁有之集合的名稱)。 將它變更如下︰

    Sort(Inventory, ProductName)

    您這樣做時，資源庫中的項目會依產品名稱以遞增順序排序︰

    請嘗試遞減順序。 將資源庫的 Items 屬性設定為下列公式︰

    Sort(Inventory, ProductName, Descending)

在資源庫中新增滑桿控制項並篩選項目

  1. 新增滑桿控制項 ([插入] 索引標籤 > [控制項])，將它重新命名為 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" 的唯一產品︰

秘訣與技巧

  • 在任何時候，您都可以選取 [預覽] 按鈕 ( ) 來查看您所建立的項目並加以測試。
  • 在設計您的應用程式時，您可以調整控制項的大小，並以按一下並拖曳方式移動它們。
  • 按下 ESC 鍵或選取 X 來關閉 [預覽] 視窗。
  • 在使用資源庫時，選取資源庫中的第一個項目會變更資源庫中的所有項目。 例如，選取第一個項目來對資源庫中的所有項目加上框線。
  • 若要更新資源庫的屬性，請選取資源庫中的任何項目，但第一個項目除外。 例如，選取第二個項目來更新 Items、ShowScrollbar 和其他套用至資源庫 (而非套用至資源庫中項目) 的屬性。

您的收獲

在本主題中，您可以：

  • 建立了集合、將包括 .jpg 影像在內的資料匯入該集合中，並在資源庫中顯示資料。
  • 在資源庫中的每個影像底下設定了標籤，以列出該項目的庫存單位數。
  • 在所選項目周圍加上了框線。
  • 依產品名稱以遞增和遞減順序排序項目。
  • 新增了滑桿和輸入文字控制項，來依照庫存單位數和產品名稱篩選產品。