データ カードについてUnderstand data cards

カード コントロールは、編集フォーム コントロールと表示フォーム コントロールの構成要素です。Card controls are the building blocks of the Edit form and Display form controls. フォームはレコード全体を表し、各カードはそのレコードの 1 つのフィールドを表します。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 リストから作成し、Assets という名前を付けたアプリの編集フォーム コントロールを示しています。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 のテキストが長すぎて 1 行に表示できなくなっています。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. このカードをクリックするか 1 回タップして選択します。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:

ここには、カードの最も重要なプロパティの 1 つである 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.

もう 1 つの例として、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.DefaultImage プロパティとして使用することもできましたが、その場合はユーザーが 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.

このアプリの 2 番目の画面でも同じ作業を行えます。ここでは、表示フォーム コントロールを使用して、レコードの詳細を表示します。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. ここでは、ユーザーがこの画面で URL を編集できないように、ラベルを非表示にします (カードではなくラベルの Visible プロパティを false に設定します)。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 プロパティに基づいて、DefaultValue プロパティと Required プロパティがデータ ソースのメタデータから取得されます。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.

Valid プロパティは、DataField プロパティに基づいて、データ ソースのメタデータから設定されます。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. フォームを送信するとき、その Valid プロパティと Update プロパティは関与しません。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:

このカードは、次の 4 つのコントロールで構成されています。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 は、開発者またはデータ ソースのメタデータによって設定される数式です。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.