PowerApps では、魅力的で使い勝手の良いフォームを簡単に作成できます。 たとえば、販売注文を記録する基本的なフォームについて考えてみましょう。

サンプル販売注文

このチュートリアルでは、このフォームを作成する手順を説明します。 使用可能な領域に合わせたフィールドの動的なサイズ変更など、いくつかの高度なトピックも紹介します。

開始する前に

PowerApps を使用するのが初めての場合 (またはアプリの自動作成以外の操作をしたことがない場合) は、このトピックに取り掛かる前にアプリを最初から作成してみることをお勧めします。 アプリを最初から作成すると、このトピックに出てくるデータ ソースやコントロールの追加など、このトピックでは説明されない必要な概念を理解できるようになります。

ギャラリーを追加する

  1. タブレット アプリを最初から作成します。

    このトピックで説明するすべての内容は電話レイアウトにも適用されますが、電話アプリでは多くの場合、垂直列が 1 つだけです。

  2. アプリのデータ ソースとして Common Data ServiceSales order エンティティを追加します。

    このチュートリアルでは使用しませんが、SharePoint リストや Excel テーブルなど他のデータ ソースも使用できます。

  3. 縦方向のギャラリー コントロールを追加して、その Items プロパティを 'Sales order' に設定します。

    (省略可能) このチュートリアルの例と一致させるには、ギャラリーの [レイアウト][タイトルとサブタイトル] のみ表示するように変更します。

    販売注文の一覧

  4. ギャラリーで、SO004 をクリックまたはタップします。

    販売注文の一覧

    このトピックで後述しますが、このレコードは次の手順で作成するフォーム上に表示されます。

タイトル バーを追加する

  1. フォームを配置する空の画面を追加します。

    このチュートリアルでは行いませんが、ギャラリー編集フォーム コントロールを同じ画面に配置できます。別々の画面に配置する場合は、利用できる余白が多くなります。

  2. 新しい画面の上部にラベル コントロールを追加して、Text プロパティを次の式に設定します。
    "Sales Order " & Gallery1.Selected.SalesOrderId

    ラベルには、ギャラリーで選択したレコードの販売注文番号が表示されます。

  3. (省略可能) ラベルの書式設定を次のようにします。

    1. その Align プロパティを Center に設定します。
    2. その Size プロパティを 20 に設定します。
    3. その Fill プロパティを Navy に設定します。
    4. その Color プロパティを White に設定します。
    5. その Width プロパティを Parent.Width に設定します。
    6. その X および Y プロパティを 0 に設定します。

    タイトル バー

フォームを追加する

  1. 編集フォーム コントロールを追加して、ラベルの下の画面いっぱいになるように移動およびサイズ変更します。

    次の手順では、数式バーではなく右側のウィンドウを使用して、フォーム コントロールを Sales order データ ソースに接続します。 数式バーを使用する場合、既定ではフォームにフィールドは表示されません。 右側のウィンドウで 1 つ以上のチェック ボックスをオンにすると、いつでも好きなフィールドを表示できます。

  2. 右側のウィンドウで、[データ ソースが選択されていません] の隣にある下矢印をクリックまたはタップした後、Sales order をクリックまたはタップします。

    Sales order データ ソースのフィールドの既定セットは、シンプルな 3 列のレイアウトで表示されます。 ただし、その多くは空白であり、最終的な位置に配置されるのにしばらく時間がかかる場合があります。

  3. フォームの Item プロパティを Gallery1.Selected に設定します。

    フォームにはギャラリーで選択したレコードが表示されますが、フィールドの既定のセットでは、最終的に達成したいこととは一致しない場合があります。

  4. 右側のウィンドウで、次のフィールドのチェック ボックスをそれぞれオフにして非表示にします。

    • Sales order ID (販売注文 ID)
    • Account (アカウント)
    • Sales person (販売担当者)
    • Account contact (アカウントの連絡先)
  5. Order status (注文のステータス) フィールドを左側にドラッグして移動し、Customer purchase order reference (お客様発注リファレンス) フィールドのもう一方にドロップします。

    画面は次の例のようになります。

    基本的な 3 列のレイアウトの販売注文

データのカードを選択する

表示される各フィールドには、フォーム上に対応するデータ カードがあります。 このカードは、フィールドのタイトル、入力ボックス、スター (フィールドが必要な場合に表示されます)、検証エラー メッセージの、それぞれのコントロールのセットで構成されます。

フォーム上で直接のカードを選択することもできます。 カードを選択すると、カードの上に黒のキャプションが表示されます。

データのカードの選択

: カードを非表示にするだけでなく削除する場合は、選択して [削除] をクリックします。

列にカードを配置する

既定では、タブレット アプリのフォームには 3 つの列が、電話アプリのフォームには 1 つの列があります。 フォームの列の数を指定できるだけでなく、列の境界内にすべてのカードを収めるかどうかを指定できます。

この図では、[列へのスナップ] チェック ボックスをオンにして、フォーム内の列の数を 3 つから 4 つに変更しました。 フォーム内のカードは、新しいレイアウトに合わせて自動的に配置されました。

基本的な 4 列のレイアウトの販売注文

複数の列の間でカードのサイズを変更する

各カード内のデータによっては、一部のカードを 1 つの列の内側に収め、他のカードを複数の列に広がるようにしたい場合があるかもしれません。 1 つの列に表示するデータよりも多くのデータをカードに含めたい場合は、カードを選択してカードの選択ボックスの左側または右側の境界線上に表示されるハンドルをドラッグすると、カードの幅を広げることができます。 ハンドルをドラッグすると、カードが列の境界に "スナップ" します。

一部の構造を保持しながらデザインをより柔軟なものにするために、列の数を 12 個まで増やすことができます。 この変更を利用すると、フォームの全体、フォームの半分、3 分の 1、4 分の 1、6 分の 1 という具合に、各カードが広がる範囲を構成できます。 実際にやってみましょう。

  1. 右側のウィンドウで、フォームの列の数を 12 に設定します。

    列の数の指定

    フォームは一見すると変化がありませんが、左側または右側のハンドルをドラッグすると、変更前よりも多くのスナップ ポイントを確認できます。

  2. Order date (受注日) カードは、右側のスナップ ポイントのハンドルを右方向にドラッグして、幅を広げます。

    フォームの 12 列のうち 3 列 (フォームの 1/4) ではなく、4 列 (フォームの 1/3) にカードが広がるようにします。 1 つのスナップ ポイントでカードの幅を広げると、必ずフォームの 1/12 だけ幅が広がります。

    ドラッグ アンド ドロップでカードのサイズを変更する

  3. Order status カードと Customer purchase order reference カードを使用して、上述の手順を繰り返します。

    最初の行に 3 つのカード

  4. Name (名前) カードと Description (説明) カードの幅を広げて 6 列 (フォームの 1/2) にします。

  5. Delivery address (配送先住所) の最初の 2 行の幅を、フォームの全体に広がるように広げます。

これで完了です。 目的のフォームが完成し、複数の列に広がる行を混在させることができました。

サイズ変更された 12 列のレイアウトの販売注文

カード内のコントロールを操作する

配送先住所は、ユーザーのために視覚的にグループ化したい複数の情報で構成されています。 各フィールドは、独自のデータ カードに残りますが、フィールドが効果的に整理されるようにカード内のコントロールを操作することができます。

  1. First line of Delivery address (配送先住所の 1 行目) カードを選択し、カード内のラベルを選択して、テキストの最初の 3 語を削除します。

    最初の行のラベルの名前を変更した販売注文の配送先住所

  2. Second line of Delivery address (配送先住所の 2 行目) カードを選択し、カード内のラベルを選択して、ラベル内のすべてのテキストを削除します。

    難しく考えずにラベル コントロールを削除してしまいたい場合があるかもしれませんし、多くの場合、そうしても問題は起こりません。 しかし、そのコントロールの存在に依存する数式がある可能性があります。 安全なアプローチは、テキストを削除するか、コントロールの Visible プロパティを false に設定することです。

    2 番目の行のラベルの名前を変更した販売注文の配送先住所

  3. 同じカード内で、テキスト入力ボックスをラベルに重ねるように移動し、住所の最初の行と 2 番目の行の間のスペースを減らします。

    カード内のコンテンツが占めるスペースが小さくなり、カードの高さが縮小されます。

    2 番目の行のラベルの名前を変更した販売注文の配送先住所

住所の 3 番目の行に注目してみましょう。 前に実行した操作と同じように、これらのカードの各ラベルのテキストを短くし、各ラベルの右側にテキスト入力ボックスを並べます。 State (状態) カードの手順を次に示します。

ステップ 説明 結果
1 State カードを選択して、周囲にハンドルを表示させます。 カードを選択
2 このカード内のラベルを選択して、周囲にハンドルを表示させます。 カード内でコントロールを選択する
3 テキストの右側にカーソルを配置し、不要な部分を削除します。 カード内のコントロールのテキストを変更します。
4 サイドのグラブ ハンドルを使用して、新しいテキストのサイズに合わせてラベル コントロールのサイズを変更します。 カード内のコントロールのサイズを変更する
5 このカード内のテキスト入力コントロールを選択します。 カード内の異なるコントロールを選択します。
6 両側のハンドルを使用して、テキスト入力コントロールを目的のサイズに変更します。 カード内のコントロールのサイズを変更する
7 テキスト入力ボックスを上のラベル コントロールの右側にドラッグして、ドロップします。 カード内のコントロールを移動する
State カードの変更が完了しました。 カードの変更の完了

完了した 3 番目の住所行の結果:

より簡潔な 3 行目を含む販売注文の配送先住所

多くのカードには最初にプロパティの動的な数式が含まれています。 たとえば、上記のとおりにサイズ変更して移動したテキスト入力コントロールには、親の幅に基づいた Width プロパティがあります。 コントロールを移動またはサイズ変更するとき、動的な数式は静的な値に置き換えられます。 必要な場合は、数式バーを使用して動的な数式を復元できます。

列へのスナップをオフにする

標準の 12 列よりもさらに細かい制御が必要な場合があります。 そのような場合は、[列へのスナップ] をオフにして、カードを手動で配置します。 フォームは引き続き 12 列へのスナップを続行しますが、必要に応じて、Alt キーを押しながら手動でカードの位置やサイズを変更できます。

この例では、住所の 3 番目の行を形成する 4 つのコンポーネントが正確に同じ幅になっています。 しかし、これが最も適切なレイアウトではない場合があります。都市名は州の省略名よりも長く、国/地域のテキスト入力ボックスはラベルの長さのために短くなるからです。

このスペースを最適化するには、右側のウィンドウにある [列へのスナップ] をオフにして、Alt キーを押しながらカードのサイズや位置を変更します。 Alt キーを押している間は、すべてのコントロールが黒のキャプションで表示されます。 この動作はコントロール名を確認できるようにするためのものです。

ALT キーを押しながら位置とサイズを変更する

注意深く配置した後に、結果として各フィールドのサイズと、フィールド間の横方向の間隔が適切になります。

正確に配置された販売注文の配送先住所の 3 行目

[列へのスナップ] がオンの場合とオフの場合の違いをまとめます。

動作 列へのスナップがオン 列へのスナップがオフ
スナップのサイズを変更 選択する列の数:
1、2、3、4、6、または 12
12 列
スナップのサイズ変更を上書きできる いいえ はい (Alt キーを押しながら)
カードが行の間に自動的に再レイアウトされる (後で詳しく説明します) はい いいえ

幅と高さを設定する

PowerApps 内のすべてものと同様に、フォームのレイアウトは、カードのコントロールのプロパティによって制御されます。 前述のように、コントロールをドラッグして別の場所に移動したり、ハンドルをドラッグしてコントロールのサイズを変更したりすることで、プロパティの値を変更できます。 しかし、特に数式でフォームを動的にするときなど、自分でこれらのプロパティをより正確に理解して操作したい場合があるでしょう。

基本的なレイアウト: X、Y、および Width

X プロパティと Y プロパティでカードの位置を制御します。 加工していないキャンバス上のコントロールを操作するときに、これらのプロパティは絶対位置を提供します。 フォームでは、これらのプロパティは異なる意味を持ちます。

  • X: 行内の順序。
  • Y: 行番号。

キャンバス上のコントロールと同様に、Width プロパティは、カードの最小の幅 (瞬間的な最小要素の詳細) を指定します。

フォーム内のカードの XY、および Width プロパティを見てみましょう。

販売注文フォームの X 座標と Y 座標

行のオーバーフロー

行のカードがその行に収まらない場合はどうなるでしょう。 通常、この可能性について心配する必要はありません。 [列へのスナップ] をオンにすると、これらの 3 つのプロパティが自動的に調整され、オーバーフローなしで行内にすべてが適切に収まるように配置されます。

しかし、[列へのスナップ] をオフにするか、数式ベースの Width が 1 つ以上のカードに指定されている場合、行のオーバーフローが発生することがあります。 この場合、カードは自動的に折り返され、実際には別の行が作成されます。 たとえば、Customer purchase order reference カード (最初の行、3 番目の項目) の Width プロパティを 500 に手動で変更してみましょう。

カードのサイズの手動変更による新しい行への流し込み

一番上の行の 3 つのカードが水平方向に収まらなくなり、オーバーフローを折り返すために別の行が作成されています。 これらのすべてのカードの Y 座標は同じ 0 のままであり、NameDescription カードの Y は 1 のままです。 異なる Y の値をもつカードは、行をまたいで結合されることはありません。

この動作を使用して、カードが Z 順に基づいて配置される動的なレイアウトを作成し、できる限り多くのスペースを埋めてから次の行に移動させることができます。 これを実行するには、すべてのカードに同じ Y 値を指定し、カードの順序に X を使用します。

スペースを埋める: WidthFit

最後の例のオーバーフローによって、最初の行の 2 番目のカードである Order status カードの後に、スペースが作成されます。 残る 2 つのカードの Width プロパティを手動で調整して、このスペースを埋めることもできますが、このアプローチは面倒です。

代わりに、WidthFit プロパティを使用します。 1 行に配置されている 1 つ以上のカードでこのプロパティが true に設定されている場合、その行の残りのスペースはカード間で均等に分割されます。 このように動作するのは、前述したようにカードの Width プロパティが 最小値 であり、実際に表示される幅がそれより広くなる場合があるためです。 このプロパティによってカードが拡大されることはありますが、縮小されることはありません。

Order status カードの WidthFittrue に設定すると、使用可能なスペースにカードが収まり、最初のカードは変更されずに残ります。

2 番目のカードの WidthFit が true に設定されている

Order date カードの WidthFittrue に設定すると、使用可能なスペースを両方のカードで均等に分割します。

最初のカードと 2 番目のカードの WidthFit が true にされている

これらのカードのグラブ ハンドルは、Width プロパティによって提供される最小幅ではなく、WidthFit によって提供される追加の幅を考慮します。 WidthFit がオンになっているときに Width プロパティを操作すると混乱を招く場合があります。オフにしてから、Width を変更し、その後で再びオンに戻すことをお勧めします。

WidthFit が役に立つ状況とは 特定の状況でのみ使用されるフィールドがある場合は、その Visible プロパティを false に設定し、その行の他のカードが周囲のスペースを自動的に埋めるようにできます。 別のフィールドが特定の値を持つときにだけ、フィールドを表示する数式を使用することをお勧めします。

ここでは、Order status フィールドの Visible プロパティを静的な false に設定します。

注文ステータスが非表示で最初のカードで WidthFit が true に設定されている

2 番目のカードが実際に削除されると、3 番目のカードが最初のカードと同じ行に戻ることができます。 最初のカードの WidthFit が引き続き true に設定されているため、最初のカードだけが使用可能なスペースを埋めるように拡大されます。

Order status は非表示になっているため、キャンバス上で選択するのは簡単ではありません。 ただし、表示、非表示に関わらず、画面左側のコントロールの階層リストから、すべてのコントロールを選択できます。

Height

Height プロパティはそれぞれのカードの高さを制御します。 カードには Height についても WidthFit に相当するものがありますが、それは常に true に設定されています。 HeightFit プロパティというものがあると仮定してみてください (そのようなプロパティはまだ公開されていないため、製品内にはありません)。

この動作をオフにすることはできないので、カードの高さを変更することは困難になる可能性があります。 1 行内のすべてのカードが、最も高さのあるカードと同じ高さになって表示されます。 次のような行が表示される場合もあります。

最初のカードで WidthFit が true に設定されており、注文ステータスが非表示

行の高さを決めるのはどのカードでしょうか。 前の図で、Total amount カードが選択され、高さが高く表示されていますが、その Height プロパティは 80 (最初の行の高さと同じ) に設定されています。 行の高さを縮めるには、その行で最も高さのあるカードの Height を小さくする必要があります。各カードの Height プロパティを確認しなければ最も高さのあるカードを特定できません。

AutoHeight

AutoHeight プロパティが true に設定されているコントロールが含まれていると、予想よりもカードが高くなる場合もあります。 たとえば、多くのカードには、フィールドの値が原因で検証の問題が発生した場合にエラー メッセージを表示するラベルが含まれています。

表示するテキストがない (エラーがない) 場合、ラベルは高さがゼロに折りたたまれます。 それ以上のことを知らなければ、それがそこにあったことを知ることはできません。

高さを表示しない AutoHeight が true に設定されたコントロールを含むカード

画面の左側にあるコントロールのリストに、ラベル コントロールの ErrorMessage1 が表示されています。 アプリを更新するとき、このコントロールを選択して高さを設定したり、コントロールの位置とサイズを変更するハンドルを表示したりできます。 青いボックスの "A" は、コントロールの AutoHeighttrue に設定されていることを示しています。

オーサリング時に、AutoHeight コントロールは、ドラッグ アンド ドロップしやすいように高さを表示します。

このコントロールの Text プロパティは、Parent.Error に設定され、検証ルールに基づいて動的なエラー情報を取得するために使用されます。 わかりやすくするため、このコントロールの Text プロパティを静的に設定し、テキストの長さが収まるようにコントロールの高さ (ひいてはカードの高さ) を高くします。

エラー メッセージで、コントロールとカードが自動的に拡大される

エラー メッセージを少し長くすると、それが収まるように、コントロールとカードが再び自動的に拡大されます。 行全体の高さを増加し、カード間の垂直方向の配置は維持されます。

長いエラー メッセージを表示すると、コントロールとカードがさらに拡大され、同じ行のすべてのカードが一緒に拡大されることに注意してください。