カード コントロールは、編集フォーム コントロールと表示フォーム コントロールの構成要素です。 フォームはレコード全体を表し、各カードはそのレコードの 1 つのフィールドを表します。

カードと対話する最も簡単な方法は、デザイン ワークスペースでフォーム コントロールが選択されているときに右側のウィンドウを使用する方法です。 このウィンドウでは、表示するフィールドを選択したり、各フィールドの表示方法を選択したりできます。また、フィールドを配置し直すこともできます。

カードを使用するにあたり、フォームの追加に関するページとデータ フォームに関するページを参照してください。 このトピックの残りの部分では、カードのしくみ、カスタマイズ方法、作成方法について詳しく説明します。

定義済みのカード

PowerApps には、文字列、数値、その他のデータ型用の定義済みのカードのセットが用意されています。 右側のウィンドウでは、使用できるバリエーションを確認したり、フィールドに使用するカードを変更したりできます。

この例では単一行テキストのカードが選択されていますが、URL のテキストが長すぎて 1 行に表示できなくなっています。 これを、ユーザーが編集するのに十分な広さがある、複数行テキストのカードに変更してみましょう。

さらにこの例では、このデータ ソースのいくつかのフィールドが表示されていません。 目のアイコンを選択すると、これらの表示/非表示を切り替えることができます。

カードをカスタマイズ

カードには、他のコントロールが含まれます。 ユーザーがデータを入力する標準のテキスト入力コントロールは [挿入] タブから追加します。

それでは、コントロールを操作してカードの外観を変更するいくつかの例を見てみましょう。

  1. 最初に、SecurityCode フィールド用に最後に挿入したカードに戻ります。 このカードをクリックするか 1 回タップして選択します。

  2. カード内のテキスト入力コントロールをクリックまたはタップして選択します。

  3. 選択ボックスをドラッグして、カード内でこのコントロールを移動します。さらに、選択ボックスの枠上のハンドルをドラッグして、コントロールのサイズを変更します。

    このコントロールに対しては、サイズ変更、移動、その他の変更操作を実行できます。ただし、このコントロールを削除するには、最初にロックを解除する必要があります。 次のセクションでは、カードのロックを解除する方法について説明します。

  4. カードに 1 つまたは複数のコントロールを挿入します。たとえば、[挿入] タブの [図形] メニューから次のような星印を挿入します。

    これで、新しいコントロールがカードの一部になり、フォーム内でカードの順序を変更した場合にこのコントロールもカードと共に移動するようになります。

別の例として、次の図に示すように、テキスト入力コントロールに画像の URL を表示する代わりに、イメージ コントロールに画像を表示してみましょう。

  1. [挿入] タブで、ImageURL カードの下にイメージ コントロールを追加します。

  2. 数式バーで、このコントロールの Image プロパティを TextBox.Text に設定します。ここで、TextBox は URL を保持する入力テキスト コントロールの名前です。

    ヒント: Alt キーを押すと、各コントロールの名前が表示されます。

    画像が表示され、その URL を編集することができます。 Parent.DefaultImage プロパティとして使用することもできましたが、その場合、ユーザーが新しい URL を入力したときに画像が更新されません。

  3. このアプリの 2 番目の画面でも同じ作業を行うことができます。ここでは、表示フォーム コントロールを使用して、レコードの詳細を表示します。 この画面ではユーザーが URL を編集できないように、ラベルを非表示にします (カードではなくテキスト ボックス コントロールの Visible プロパティを false に設定します)。

カードのロックを解除

包含するコントロールに加えて、カード自体も、他のコントロールと同様に、プロパティと数式を備えたコントロールです。 フォームにフィールドを表示することを選択すると、右側のウィンドウで自動的にカードが作成され、必要な数式が生成されます。 これらの数式は、[表示] タブからアクセスできる [詳細] ウィンドウで確認できます。

ここには、カードの最も重要なプロパティの 1 つである DataField プロパティが表示されています。 このプロパティは、データ ソースのどのフィールドがこのカードに表示され、ユーザーが編集できるかを示します。

[詳細] ビューの上部にある大きなバナーは、このカードのプロパティがロックされていることを示します。 DataFieldDefaultDisplayName の各プロパティの横にも錠アイコンが表示されています。 これらの数式は右ウィンドウで自動的に作成されたもので、これらのプロパティが誤って変更されるのを防ぐためにロックされています。

上部のバナーをクリックまたはタップしてカードのロックを解除すると、これらのプロパティを変更できます。

ここでは、DisplayName を変更して、AssetID の間にスペースを挿入します。 この変更を行うことで、自動的に生成された値が変更されます。 右側のウィンドウで、このカードに異なるラベルが設定されています。

これでこのカードを管理できるようになりました。必要に応じてさらに修正を行えます。 しかし、先ほどのようにカードをある表現から別の表現に (たとえば、単一行のテキストから複数行のテキストに) 変更することはできません。 それは、あらかじめ定義されたカードを、管理できる "カスタム カード" に変換したためです。

注意事項: ロックを解除した場合、カードを再度ロックすることはできません。 ロック状態に戻すには、カードを削除し、右側のウィンドウにカードをもう一度挿入します。

フォームとの対話

カードのロックを解除すると、カードとそこに含まれるフォームとの間の対話方法を変更できます。

コントロールがカードとどのように連携する必要があるか、およびカードがフォームとどのように連携する必要があるかに関するいくつかのガイドラインを次に示します。 これらはガイドラインにすぎません。 PowerApps の他のコントロールと同様に、PowerApps の他のコントロールを参照する数式を作成できます。これは、カードとカード内のコントロールにも当てはまります。 創造力を生かして、さまざまな方法でアプリを作成できます。

DataField プロパティ

カードで最も重要なプロパティは DataField プロパティです。 このプロパティは、検証、更新されるフィールド、カードのその他の側面に作用します。

入力される情報

フォームは、コンテナーとして、ThisItem をそこに含まれるすべてのカードで利用できるようにします。 このレコードには、現在対象になっているレコードのすべてのフィールドが含まれます。

すべてのカードの Default プロパティを ThisItem.FieldName に設定する必要があります。 特定の状況下では、この値を途中の段階で変換することができます。 たとえば、文字列の書式を設定したり、ある言語の値を別の言語に変換したりできます。

カード内の各コントロールでは、Parent.Default を参照してフィールドの値を取得する必要があります。 これによりある程度のカードのカプセル化が提供されるため、カードの内部数式を変更することなく、カードの Default プロパティを変更できます。

既定では、DataField プロパティに基づいて、DefaultValue プロパティと Required プロパティがデータ ソースのメタデータから取得されます。 これらの数式を独自のロジックで上書きし、DataSourceInfo 関数を使用してデータ ソースのメタデータを統合することができます。

出力される情報

ユーザーによってカード内のコントロールが使用され、レコードが変更されたら、SubmitForm 関数を使用してこれらの変更をデータ ソースに保存します。 この関数が実行されると、フォーム コントロールは、変更するフィールドを識別するために各カードの DataField プロパティの値を読み取ります。

フォーム コントロールは、各カードの Update プロパティの値も読み取ります。 この値は、このフィールドのデータ ソースに格納されます。 ここは、カードの Default の数式で適用された変換を反転するなど、別の変換を適用するための場所です。

Valid プロパティは、DataField プロパティに基づいて、データ ソースのメタデータから設定されます。 また、Required プロパティと、Update プロパティに値が含まれているかどうかにも基づきます。 Update プロパティの値が有効でない場合、Error プロパティはユーザー フレンドリなエラー メッセージを提供します。

カードの DataField プロパティが "空白" の場合、カードは単にコントロールのコンテナーです。 フォームを送信するとき、その Valid プロパティと Update プロパティは関与しません。

例の解説

ここでは、基本的なデータ入力カードを構成するコントロールについて見ていきます。 各コントロールが見えやすいように、コントロール間のスペースが増やされています。

Alt キーを押したままにすると、このカードを構成するコントロールの名前が表示されます。

このカードは、次の 4 つのコントロールで構成されています。

名前 種類 説明
TextRequiredStar ラベル コントロール 星印を表示します。この印は、データ入力フォームで必須フィールドを示すためによく使用されます。
TextFieldDisplayName ラベル コントロール このフィールドのユーザー フレンドリ名を表示します。 この名前は、データ ソースのスキーマに含まれる名前と同じである必要はありません。
InputText 入力テキスト コントロール フィールドの初期値を表示します。ユーザーは、この値を変更できます。
TextErrorMessage ラベル コントロール 検証で問題が発生した場合、ユーザー フレンドリなエラー メッセージをユーザーに表示します。 また、必須フィールドにおいて値が入力されることを保証します。

これらのコントロールにデータを入力するために、これらの重要な数式を使用して、そのプロパティをカードのプロパティから設定することができます。 これらの数式のいずれも特定のフィールドを参照していないことに注意してください。 代わりに、すべての情報がカードから取得されます。

コントロールのプロパティ 数式 説明
TextRequiredStar.Visible Parent.Required 星印は、フィールドが必須フィールドの場合にのみ表示されます。 Required は、開発者またはデータ ソースのメタデータによって設定される数式です。
TextFieldDisplayName.Text Parent.DisplayName このテキスト ボックス コントロールには、ユーザー フレンドリ名が表示されます。ユーザー フレンドリ名は、開発者またはデータ ソースのメタデータから提供され、カードの DisplayName プロパティに設定されます。
InputText.Default Parent.Default このテキスト入力コントロールに最初に表示される値は、カードの既定値によって提供されるデータ ソースのフィールドの値です。
TextErrorMessage.Text Parent.Error 検証で問題が発生した場合、カードの Error プロパティによって適切なエラー メッセージが提供されます。

これらのコントロールから情報を取得し、データ ソースにプッシュ転送するための重要な数式として、次の数式があります。

コントロール名 数式 説明
DataCard.DataField "ApproverEmail" このカードでユーザーが表示して編集できるフィールドの名前。
DataCard.Update InputText.Text SubmitForm が実行されたときに検証され、データ ソースにプッシュ転送される値。