建立購物清單卡片

在本教學課程中,您將建立一個顯示購物清單的卡片,並能讓您新增項目。 您將使用卡片設計工具變數Power Fx

在此教學課程結束時,您的購物清單卡片應該如下所示:

已完成購物清單卡片的螢幕擷取畫面。

先決條件

建立卡片

  1. 登入 Power Apps 並選取環境。

  2. 在左窗格中,選取卡片。 If the item isn’t in the side panel pane, select …More and then select the item you want.

  3. 選取 + 建立卡片

  4. 卡片名稱下,書入 SimpleShoppingCard,然後選擇建立

  5. 選取您的卡片標題位於此處的文字。 在文字標籤屬性窗格中,將文字設定為購物清單

  6. 選擇文字新增及移除元素以自訂新卡片。 在文字標籤屬性窗格中,將文字設定為使用下方的方塊,將項目新增至清單中

新增變數

購物清單將在不同的文字行中存放各項目。 看起來像只有一個資料行的表格,每一個資料列都有一個雜貨項目。 這表示您需要建立表格變數來儲存您的清單。

  1. 在左窗格中,選取變數

  2. 選取 + 新增變數

  3. 新變數視窗中,在名稱下輸入MyGroceryList。 將類型設定為表格

  4. 選取預設值右邊的波浪括弧,並在括弧中輸入 ""。 這表示我們包含文字值的表格在資料行中稱為數值

  5. 選取儲存

    變數屬性窗格的 MyGroceryList 螢幕擷取畫面。

將清單新增至卡片

  1. 在左導覽窗格中,選取插入

  2. 在工具窗格中,選取顯示以展開類別,然後選取文字標籤

  3. 在文字標籤屬性窗格中,選擇進階索引標籤。

  4. MyGroceryList 設定為每一項均重複

    文字標籤的進階屬性窗格的螢幕擷取畫面,MyGroceryList 每一項均重複。

    設定文字標籤的每一項均重複屬性會為指定表格中的每個項目重複文字標籤。 在此範例中,表格 MyGroceryList 是您建立的變數。 也就是說,在卡片中為雜貨清單中的每個項目建立一個單獨的文字標籤。

  5. 選取屬性索引標籤。將文字設定為 ThisItem.Value

    將系統定義的變數 ThisItem.Value 分配給文字標籤,將 MyGroceryList 數列中目前項目的值顯示為標籤文字。 數列是表格變數的另一個術語。 您可以在資料編輯列或屬性窗格中輸入變數名稱。

    在文字標籤的文字屬性中輸入變數名稱的螢幕擷取畫面。

新增輸入方塊

您建立的清單為空,因此在最後一步中,您將允許使用者新增項目。

  1. 在左導覽窗格中,選取插入

  2. 在工具窗格中,選取輸入以展開類別,然後選取文字輸入

  3. 在文字輸入屬性窗格中,將名稱設定為NewItem,並將標籤設為新項目

    在輸入文字方塊的名稱與標籤屬性中輸入變數名稱的螢幕擷取畫面。

    Name 屬性可讓您在 Power Fx 運算式中參考控制項。 它必須是一個字,不含空格或特殊字元。 Label 屬性會顯示在卡片中。 控制項的名稱和標籤不必一定要相似,但使用相似的名稱可以更輕鬆地追蹤控制項。

新增 Power Fx 按鈕

  1. 在左導覽窗格中,選取插入

  2. 在工具窗格中,選取輸入以展開類別,然後選取按鈕

  3. 在按鈕屬性窗格中,將標題設定為新增項目

  4. 在屬性窗格中,選取 PowerFx 將游標置於資料編輯列中。

  5. 在公式列中輸入下列 Power Fx 運算式:收集 (MyGroceryList, {Value: NewItem})

    此運算式會使用 Power Fx 函數收集 ,將使用者輸入 NewItem 的值附加至隱式資料行中的 MyGroceryList 表格變數。 由於運算式繫結到按鈕的 OnSelect 屬性,因此它會在使用者選擇按鈕時執行。

    資料編輯列中 Power Fx 運算式的螢幕擷取畫面,指派給按鈕的 OnSelect 屬性。

測試卡片

在播放卡片之前,您應一律儲存所做的變更。 選取儲存,然後選取播放

在雜貨清單中新增一些項目,測試您的卡片。

後續步驟

了解如何使用 Microsoft Dataverse 連接器製作更複雜的卡片。