了解數據卡Understand data cards

卡片控制項是編輯表單顯示表單控制項的建置組塊。Card controls are the building blocks of the Edit form and Display form controls. 表單代表整個記錄,每個卡片則代表該記錄的單一欄位。The form represents the entire record, and each card represents a single field of that record.

在設計工作區中選取表單控制項後,就可以在右窗格中以最輕鬆的方式與卡片進行互動。You can interact with cards most easily in the right-hand pane after you select a form control in the design workspace. 在該窗格中,您可以選擇要顯示哪些欄位、如何顯示每個欄位,以及欄位顯示順序。In that pane, you can choose which fields to show, how to show each field, and in what order to show them. 本範例會示範在應用程式中從名為資產的 SharePoint 清單建置的編輯表單控制項。This example shows an Edit form control in an app built from a SharePoint list that's named Assets.

若要開始使用卡片,請參閱新增表單了解資料表單To get started with cards, see add a form and understand data forms. 本主題的其餘部分會更加詳細地說明卡片的運作方式,以及要如何自訂或甚至是建立自己的卡片。The remainder of this topic goes into more detail about how cards work and how you can customize or even create your own.

預先定義的卡片Predefined cards

PowerApps 針對字串、數字和其他資料類型提供了一組預先定義的卡片。PowerApps offers a predefined set of cards for strings, numbers, and other data types. 在右窗格中,您可以看到各種可用卡片,並變更欄位所使用的卡片︰In the right-hand pane, you can see the variations available and change the card used for a field:

在此範例中,我們選取了單行文字卡片,但 URL 的文字長度超過單行可以顯示的範圍。In this example, a single-line text card is selected, but the URL's text is longer than can be shown on a single line. 讓我們將此卡片變更為多行文字卡片,以便讓使用者有更多的空間來編輯︰Let's change this to a multi-line text card to give our users more room to edit:

未顯示此資料來源的數個欄位,但您可以選取其核取方塊來顯示或隱藏欄位。Several fields of this data source aren't being shown, but you can show or hide a field by selecting its checkbox. 此範例會說明如何顯示 SecurityCode 欄位。This example illustrates how to show the SecurityCode field.

自訂卡片Customize a card

卡片可構成其他控制項。Cards comprise other controls. 編輯表單控制項中,使用者可在標準的文字輸入控制項中輸入資料,而該控制項是從 [插入] 索引標籤中新增的。In an Edit form control, the user enters data in a standard Text input control that you add from the Insert tab.

讓我們逐步瀏覽範例,了解如何藉由處理卡片中的控制項來變更卡片外觀。Let's walk through an example of how to change a card's appearance by manipulating controls in it.

  1. 首先,讓我們回到我們最近插入的卡片,找到 [SecurityCode] 欄位。First, let's return to the card that we inserted most recently, for the SecurityCode field. 對此卡片按一下或點選一次,來加以選取︰Select this card by clicking or tapping it once:

  2. 對輸入控制項本身按一下或加以點選,選取卡片內部的文字輸入控制項。Select the Text input control inside the card by clicking or tapping the input control itself.

  3. 拖曳選取方塊以在卡片內移動這個控制項,並拖曳選取方塊邊緣的控點來調整控制項大小︰Move this control within the card by dragging the selection box, and resize the control by dragging the handles along the edge of the selection box:

您可以對卡片內的控制項調整大小、移動和進行其他修改,但無法在未先解除鎖定的狀況下刪除它。You can resize, move, and make other modifications to controls within a card, but you can't delete it without unlocking it first.

解除鎖定卡片Unlock a card

就像其他任何控制項一樣,卡片本身除了包含控制項外,也是具有屬性和公式的控制項。In addition to containing controls, cards themselves are controls that have properties and formulas just like any other control. 當您選擇在表單上顯示某欄位時,右窗格會自動為您建立卡片,並產生所需的公式。When you choose to display a field on a form, the right-hand pane automatically creates the card for you and generates the needed formulas. 我們可以在右窗格的 [進階] 索引標籤中看到這些公式:We can see these formulas in the Advanced tab of the right-hand pane:

我們會立即看到其中一個最重要的卡片屬性︰DataField 屬性。We immediately see one of the most important properties of the card: the DataField property. 這個屬性指出使用者會在此卡片中看到並可編輯資料來源的哪一個欄位。This property indicates which field of the data source the user sees and can edit in this card.

在 [進階] 索引標籤上,頂端的橫幅會指出此卡片的屬性已遭鎖定。On the Advanced tab, the banner at the top indicates that the properties of this card are locked. DataFieldDisplayNameRequired 屬性旁邊也會出現鎖定圖示。A lock icon also appears next to the DataField, DisplayName, and Required properties. 右窗格建立了這些公式,而鎖定可防止這些屬性遭到意外變更。The right-hand pane created these formulas, and the lock prevents accidental changes to these properties.

按一下或點選頂端橫幅可將卡片解除鎖定,以便您可以修改這些屬性︰Click or tap the banner at the top to unlock the card so that you can modify these properties:

讓我們修改 DisplayName,將 AssetID 之間空一格。Let's modify the DisplayName to put a space between Asset and ID. 透過進行這項變更,我們會改變系統為我們產生的屬性。By making this change, we're altering what was generated for us. 在右窗格中,這個卡片有了不同的標籤︰In the right-hand pane, this card has a different label:

現在我們已掌控這個卡片,因此可對它進一步修改以符合我們的需求。We've now taken control over this card and can modify it further to fit our need. 但是,我們會再也無法像以前一樣將卡片從某種樣式變更為另一種樣式 (例如,從單行文字變更為多行文字)。But we've lost the ability to change the card from one representation to another (for example, single-line text to multi-line text) as we did before. 我們已將預先定義的卡片轉換為我們現在所控制的「自訂卡片」。We've transformed the predefined card into a "custom card" that we now control.

重要︰卡片一經解除鎖定,就無法重新鎖定。Important: You can't relock a card if you unlock it. 若要讓卡片回到鎖定狀態,請移除卡片,然後將它重新插入右窗格中。To get a card back to a locked state, remove it, and reinsert it in the right-hand pane.

您可以透過各種方式變更解除鎖定卡片的外觀和行為,例如新增和刪除其中的控制項。You can change the appearance and behavior of an unlocked card in a variety of ways, such as adding and deleting controls within it. 例如,您可以從 [插入] 索引標籤上的 [圖示] 功能表新增星形。For example, you can add a star shape from the Icons menu on the Insert tab.

這個星形現在成為了卡片的一部分,如果重新排列表單內的卡片 (舉例來說),此星形將會跟著卡片移動。The star is now a part of the card and will travel with it if, for example, you reorder the cards within the form.

另舉一例,將 ImageURL 卡片解除鎖定,然後從 [插入] 索引標籤將映像控制項新增至卡片:As another example, unlock the ImageURL card, and then add an Image control to it from the Insert tab:

在公式列中,將此控制項的 Image 屬性設定為 TextBox.Text,其中 TextBox 是保有 URL 之文字輸入控制項的名稱:In the formula bar, set the Image property of this control to TextBox.Text, where TextBox is the name of the Text input control that holds the URL:

提示︰按下 Alt 鍵可顯示每個控制項的名稱。Tip: Press the Alt key to show the name of each control.

現在,我們可以看到影像並編輯其 URL。And now we can see the images and edit their URLs. 請注意,我們也可以使用 Parent.Default 作為 Image 屬性,但如果使用者變更 URL 時它不會隨之更新。Note that we could have used Parent.Default as the Image property, but it wouldn't have updated if the user changed the URL.

我們可以在此應用程式的第二個畫面上執行相同的動作,亦即使用顯示表單控制項來顯示記錄的詳細資料。We can do the same thing on the second screen of this app, where we use a Display form control to display the details of a record. 本案例中,我們可能會想要隱藏標籤 (將標籤 (而非卡片) 的 Visible 屬性設定為 false),因為使用者不會編輯該畫面上的 URL:In this case, we may want to hide the label (set the Visible property of the label, not the card, to false) because the user won't edit the URL on that screen:

與表單互動Interact with a form

在將卡片解除鎖定之後,您可以變更它與所在表單的互動方式。After you unlock a card, you can change how it interacts with the form that contains it.

以下有一些方針,指出控制項該如何使用其卡片,以及卡片該如何使用表單。Below are some guidelines for how controls should work with their card and how the cards should work with the form. 這些就只是方針而已。These are only guidelines. 和 PowerApps 中的任何控制項一樣,您也可以建立參考 PowerApps 中其他任何控制項的公式,卡片和卡片內的控制項也是如此。As with any control in PowerApps, you can create formulas that reference any other control in PowerApps, and that's no less true for cards and controls within cards. 發揮您的創意︰建立應用程式的方式不只一種。Be creative: you can create an app in many ways.

DataField 屬性DataField property

卡片上最重要的屬性是 DataField 屬性。The most important property on the card is the DataField property. 這個屬性會驅動驗證、要更新什麼欄位,以及卡片的其他方面。This property drives validation, what field is updated, and other aspects of the card.

流入的資訊Information flowing in

作為容器,表單會讓 ThisItem 可供其內的所有卡片使用。As a container, the form makes ThisItem available to all cards within it. 這個記錄包含目前相關記錄的所有欄位。This record contains all of the fields for the current record of interest.

每個卡片的 Default 屬性都應該設定為 ThisItem.FieldName。The Default property of every card should be set to ThisItem.FieldName. 在某些情況下,您可能會想要在值傳入時加以轉換。Under certain circumstances, you might want to transform this value on the way in. 例如,您可能會想要將字串格式化,或將值從某一種語言轉譯為另一種語言。For example, you might want to format a string or translate the value from one language to another.

卡片內的每個控制項都應該參考 Parent.Default 以得到該欄位的值。Each control within the card should reference Parent.Default to get at the field's value. 這項策略可為卡片提供一層封裝,讓卡片的 Default 屬性可以變更,而不會變更卡片的內部公式。This strategy provides a level of encapsulation for the card so that the card's Default property can change without changing the internal formulas of the card.

依預設,系統會根據 DataField 屬性從資料來源的中繼資料取得 DefaultValueRequired 屬性。By default, DefaultValue and Required properties are taken from the data source's metadata based on the DataField property. 您可以依照自己的邏輯來覆寫這些公式,使用 DataSourceInfo 函式來整合資料來源的中繼資料。You can override these formulas with your own logic, integrating the data source's metadata by using the DataSourceInfo function.

流出的資訊Information flowing out

使用者使用卡片中的控制項修改記錄後,SubmitForm 函式會將這些變更儲存至資料來源。After the user modifies a record by using controls in the cards, the SubmitForm function saves those changes to the data source. 當該函式執行時,表單控制項會讀取每個卡片之 DataField 屬性的值,以了解要變更什麼欄位。When that function runs, the form control reads the values of each card's DataField property to know what field to change.

表單控制項也會讀取每個卡片之 Update 屬性的值。The form control also reads the value of each card's Update property. 這個值會儲存在此欄位的資料來源中。This value will be stored in the data source for this field. 您可以在這裡套用另一個轉換,或許是為了反轉對卡片的 Default 公式所套用的轉換。This is the place to apply another transform, perhaps to reverse the transform that was applied in the card's Default formula.

系統會根據 DataField 屬性,從資料來源的中繼資料驅動 Valid 屬性。The Valid property is driven from the metadata of the data source, based on the DataField property. 此外,還會根據 Required 屬性以及 Update 屬性是否包含值。It's also based on the Required property and whether the Update property contains a value. 如果 Update 屬性上的值無效,Error 屬性就會提供使用者容易了解的錯誤訊息。If the value on the Update property isn't valid, the Error property provides a user-friendly error message.

如果卡片的 DataField 屬性「空白」,該卡片就只是控制項的容器。If the DataField property of a card is blank, the card is just a container of controls. 當您提交表單時,其 ValidUpdate 屬性不會參與其中。Its Valid and Update properties don't participate when the form is submitted.

剖析範例Dissecting an example

讓我們看看可構成基本資料輸入卡片的控制項。Let's look at the controls that make up a basic data-entry card. 控制項之間的空間已拉大,以便更清楚地顯示每個控制項︰The space between controls has been increased to show each more clearly:

按住 Alt 鍵可顯示構成這個卡片之控制項的名稱︰Hold down the Alt key to show the names of the controls that make up this card:

四個控制項讓這個卡片能夠運作︰Four controls make this card work:

名稱Name 類型Type 說明Description
TextRequiredStarTextRequiredStar 標籤控制項Label control 顯示星號,這通常用於資料輸入表單以指出該欄位必填。Displays a star, which is commonly used on data-entry forms to indicate that a field is required.
TextFieldDisplayNameTextFieldDisplayName 標籤控制項Label control 顯示此欄位的使用者易記名稱。Displays the user-friendly name of this field. 此名稱可與資料來源結構描述中的名稱不同。This name can differ from what is in the data source's schema.
InputTextInputText 輸入文字控制項Input text control 顯示欄位的初始值,並允許使用者變更該值。Displays the initial value of the field and allows the user to change that value.
TextErrorMessageTextErrorMessage 標籤控制項Label control 如果驗證發生問題,會向使用者顯示使用者容易了解的錯誤訊息。Displays a user-friendly error message to the user if a problem occurs with validation. 另可確保欄位有值 (如果必須有值的話)。Also ensures that the field has a value if one is required.

若要在這些控制項中填入資料,您可以透過下列重要公式,從卡片的屬性中驅動其屬性。To populate these controls with data, their properties can be driven from the properties of the card, through these key formulas. 請注意,這些公式皆未參考特定欄位。Note that none of these formulas refers to a specific field. 相反地,所有資訊皆來自卡片。Instead, all information comes from the card.

控制項屬性Control property 公式Formula 說明Description
TextRequiredStar.VisibleTextRequiredStar.Visible Parent.RequiredParent.Required 欄位必填時才會出現星號。The star appears only if the field is required. 必填是由您或資料來源的中繼資料所驅動的公式。Required is a formula that's driven by you or the metadata of the data source.
TextFieldDisplayName.TextTextFieldDisplayName.Text Parent.DisplayNameParent.DisplayName 文字方塊控制項會顯示使用者易記名稱,此名稱是由您或資料來源的中繼資料所提供,並設定於卡片的 DisplayName 屬性上。The text-box control shows the user-friendly name, which you or the data source's metadata provides, and which is set on the card's DisplayName property.
InputText.DefaultInputText.Default Parent.DefaultParent.Default 文字輸入控制項一開始會顯示來自資料來源的欄位值,而此值是由卡片的預設值所提供。The text-input control initially shows the value of the field from the data source, as provided by the card's default value.
TextErrorMessage.TextTextErrorMessage.Text Parent.ErrorParent.Error 如果發生驗證問題,卡片的 Error 屬性會提供適當的錯誤訊息。If a validation problem occurs, the card's Error property provides an appropriate error message.

為了從這些控制項提取出資訊,並將它推送回資料來源,我們提供了下列重要公式︰To pull information out of these controls and push it back into the data source, we have the following key formulas:

控制項名稱Control name 公式Formula 說明Description
DataCard.DataFieldDataCard.DataField "ApproverEmail""ApproverEmail" 使用者可以在此卡片中顯示和編輯之欄位的名稱。The name of the field that the user can display and edit in this card.
DataCard.UpdateDataCard.Update InputText.TextInputText.Text SubmitForm 執行時,要驗證並推送回資料來源的值。The value to validate and push back into the data source when SubmitForm runs.