編集フォームの追加とカスタマイズ

  • 15 分

編集フォーム コントロールの作業では、最初に、挿入 メニューから 編集フォーム を選択します。 表示フォーム も挿入できますが、情報を表示するためだけのものであり、他のモードに (データを入力するために) 切り替えることができません。 ほぼ間違いなく、アプリで使用するのは 編集フォーム だけです。 編集フォーム では、表示フォーム でできるすべてのことに加えて、既存レコードの編集や新規レコードの作成にもフォームを使用できます。 さらに、完全にカスタマイズ可能であり、アプリの開発者は独自のソリューションを構築できます。 判断に迷うときは、編集フォーム を選択してください。

編集フォーム コントロールをキャンバスに追加して、画面の右側にあるプロパティ パネル、または画面の左上にあるプロパティ ドロップダウンからプロパティを構成します。 最初のステップは、データ ソースの選択です。 ラベルになしと表示されたドロップダウン メニューでデータ ソースを選択します。アプリに含まれているデータ ソースを選んで Dataverse テーブルに接続するか、新しいデータ ソースに接続します。また、新しいテーブルを作成することもできます。

Studio の「フィールドの選択」オプションのスクリーンショット。

フィールドの追加

データ ソースを選択するときに、フィールドの編集およびフィールドの追加を選択して、フォームに表示する列を選択できます。

Studio の [フィールドの追加] のスクリーンショット。

追加ボタンをクリックすると、各品目がカード コントロールとしてフォームに表示されます。 これらのカードは定義済カードと呼ばれ、Power Apps によってデータ ソースと一致するように作成されます。 フィールド メニューでは、データ入力に使用するコントロールのタイプをカスタマイズできます。また、各フィールドをドラッグ アンド ドロップしてフォーム上で順序を変更することもできます。 各カードには、列名を表示するラベル、データを操作するための input コントロール、およびエラー メッセージや必要な列を処理する他のコントロールが含まれます (必須データの横には '*' が表示されます)。 次の例では、フィールドの追加フォームが表示されています。ツリー ビューで Name_DataCard の下に、追加されたフィールドが表示されている点に注目してください。

エラー メッセージを処理するフォームの例のスクリーンショット。

Form コントロールでは、列のタイプに基づいて入力コントロールが自動的に選択されます。 多くの列では、複数のオプションを使用できます。 列のカードのドロップダウン メニューをクリックして、他のいずれかのオプションを選択すると、コントロールの種類を変更できます。

ドロップダウンでコントロールの種類を変更するスクリーンショット。

コントロールの種類を変更すると、別の構成が必要になる場合があります。 たとえば、テキスト列を Edit text コントロールのタイプから Allowed Values に変更する場合、ドロップダウン リストで値の設定が必要な場合があります。 カード内の Drop-down コントロールをカスタマイズする前に、カードのロックを解除する必要があります。

カードのカスタマイズ

カードのロックを解除するには、フォームでカードを選択し、カード ウィンドウで詳細設定を選択します。 ロック アイコンを選択します。 カードがカスタム カードになり、すべての設定を変更できます。

カードをカスタマイズする高度なオプションのスクリーンショット。

カスタム カードの作業を行った後で、元の設定に戻す場合は、カスタム カードを削除して、列をフォームに再度追加できます。 これを実行するにはフォームを選択し、編集ウィンドウのプロパティを選択します。そこで列の編集を選択して、カスタム カードを探します。

カスタム カード プロパティ設定のスクリーンショット。

右側の省略記号 (...) をクリックして、削除を選択します。 これで、上部にあるフィールドの追加を選択し、フォームに追加する元のフィールドを選択できます。

Form コントロールのデザイン

フォームをデザインする際、最初に決める必要があるのはフォームのレイアウトです。

編集 ウィンドウには Snap to Columns、Columns、Layout の 3 つの主要なデザイン コントロールがあります。

デザイン コントロール「Snap to Columns」のスクリーンショット。

Snap to columns では、フォーム上のカードの幅をフォームで使用できる列に固定するかどうかを制御できます。 たとえば、4 列レイアウトを選択した場合、フィールド カードは 4 列にスナップされて収まるので、カードの幅は同じになります。

または、列へのスナップをオフにすると、カードの右側を伸ばす/ドラッグするだけで、任意のサイズに各カードの幅を設定できます。 次の例では、4 列レイアウト内でカードの幅を手動で設定します。 名と姓のカードは 2 つの列の幅に合わせて拡大され、番地は 4 列すべてに合わせて拡大されています。

ドラッグ アンド ドロップ列レイアウト オプションのスクリーンショット。

わずか数回のクリックで、論理的な方法でフォームをレイアウトできます。 6 列または 12 列のレイアウトを使用するとサイズ設定の柔軟性が最大になり、列へのスナップをオフにするより推奨されます。

注意事項

幅を変更して列へのスナップを選択した瞬間に、カードのサイズが変更され、1 つのカードの幅が 1 列の幅に変わります。 これがストレスの原因になる場合があります。 列のサイズを手動で調整する場合は、最初に列へのスナップをオフにしてください。 Power Apps によってダイアログ ボックスがポップアップ表示され、列をリセットするかどうかを確認されます。

レイアウト オプションは、横 または 縦 に設定されます。 これにより、ラベルの既定の配置が上から、または左からに変更されます。 次の例は、前のフォーム レイアウトを横に変更したもので、市と都道府県が 2 列に設定され、一部の列のサイズが変更されています。

フォーム レイアウトを横に変更したスクリーンショット。

このモジュールの範囲には含まれませんが、他に次のようなカスタマイズ オプションを使用できます。

  • カードの縦の高さを増やしたり減らしたりします。 1 つのカードの高さを変更すると、行全体に影響します。

  • カスタム カードをフォームに追加し、空白領域や他のビジュアル要素、またはボタンなどのコントロールを作成することができます

ビジネス ニーズに合うようにさまざまなビジュアルのカスタマイズを自由に試すことができます。 次に示すのは、前のフォームにいくつかのデザイン概念を適用した例です。

新しい顧客情報フォームでの別のビューのスクリーンショット。

フォームでの特定のレコードの表示

データ ソースの使用に合わせてフォームを設定した後、表示または編集するレコードを表示するためのフォームを設定する必要があります。 これを行うには、フォームの Item プロパティを設定する必要があります。

レコードを取得する 2 つの最も一般的な方法は、フォーム コントロールを ギャラリー コントロールの特定のプロパティに接続する方法と、LookUp 関数を使用する方法です。

ギャラリー コントロールを使用してレコードを指定するには、フォーム コントロールと同じデータ ソースを使用するように ギャラリー コントロールを設定する必要があります。 これは、ギャラリー コントロールの Items プロパティが フォーム コントロールの DataSource プロパティと同じであることを調べることによって確認できます。 次に、フォーム コントロールの Item プロパティで、値を GalleryName.Selected に設定します (この例では、"GalleryName" をギャラリーの名前に置き換えています)。 Power Apps では、フォーム コントロールが閲覧または編集モードの場合、ギャラリー コントロールから選択されたレコードが フォーム に表示されます。

すべてのレコードを表示するために ギャラリー コントロールを使用していない場合は、LookUp 関数を使用して、フォームに表示するレコードのクエリを実行できます。 たとえば、varID という名前の変数にレコードの ID を保存しているような場合です。 その場合は、Item プロパティで、LookUp (CustomerList, ID = varID) のような関数を使用します。 この例では、データ ソースの名前が CustomerList であること、Form コントロールの DataSource プロパティで CustomerList が指定されていること、および Form コントロールがビューまたは編集モードにあることが想定されています。

ここではフォームを挿入してカスタマイズする方法について説明しました。次ではフォームを使用したデータの送信について説明します。