キャンバスアプリで詳細ギャラリーを作成する

[アーティクル]
03/15/2023

詳細な手順に従って、Northwind Traders データベースの架空のデータを管理するため、キャンバスアプリで詳細ギャラリーを作成します。このトピックは、Microsoft Dataverse のリレーショナルデータでビジネスアプリを構築する方法を説明するシリーズの一部です。最良の結果を得るには、これらのトピックを次の順序で調べてください:

受注ギャラリーの作成。
概要フォームを作成する。
詳細ギャラリーを作成する (このトピック)。

画面領域の定義

前提条件

このトピックで前述したように、このトピックを開始する前にデータベースをインストールする必要があります。次に、受注ギャラリーと概要フォームを作成するか、または Northwind Orders (キャンバス) - パート 3 の開始アプリを開く必要があります。アプリには既にそのギャラリーとフォームが含まれています。

別のタイトルバーを作成する

画面の上部で、タイトルバーとして機能する ラベル コントロールを選択し、Ctrl-C キーを押してコピーしてから、Ctrl-V キーを押して貼り付けます。
コピーをサイズ変更して移動し、概要フォームのすぐ下に表示されるようにします。
次のいずれかの方法でコピーからテキストを削除します:
- テキストをダブルクリックして選択し、削除キーを押します。
- ラベルの Text プロパティを空の文字列 ("") に設定します。

ギャラリーを追加する

ギャラリー コントロールを縦方向 (空) レイアウトに挿入します:

注文詳細を表示する新しいギャラリーが左上隅に表示されます。
フライアウトデータソースダイアログを閉じてから、詳細ギャラリーをサイズ変更して、右下隅の新しいタイトルバーの下に移動します。
詳細ギャラリーの Items プロパティを次の数式に設定します:
```
Gallery1.Selected.'Order Details'
```
エラーが表示された場合は、受注ギャラリーに Gallery1 (左端のツリービュー ウィンドウにある) という名前が付けられていることを確認します。そのギャラリーに別の名前がある場合は、Gallery1 に名前変更します。

2 つのギャラリーをリンクしました。ユーザーが注文ギャラリーで注文を選択すると、注文テーブルでレコードが特定されます。その注文に 1 つ以上の明細行品目が含まれている場合、注文テーブルにあるレコードは、注文詳細 テーブル内の 1 つまたはそれ以上のレコード、および詳細ギャラリーに表示されるレコードのデータにリンクされています、この動作は、注文および 注文詳細 テーブル間で作成された一対多の関連付けに反映します。指定した式は、ドット表記を使用してその関連付けを "移動" します:

製品名を表示する

詳細ギャラリーで、挿入タブから項目を追加してギャラリーテンプレートを選択します:

ギャラリー自体ではなく、ギャラリーテンプレートを選択したことを確認してください。境界ボックスはギャラリーの境界の少し内側にあり、おそらくギャラリーの高さよりも短いはずです。このテンプレートにコントロールを挿入すると、ギャラリー内の項目ごとにコントロールが繰り返されます。
挿入タブで、詳細ギャラリーにラベルを挿入します。

ラベルはギャラリー内に表示される必要があります。表示されない場合は、やり直してください。ただしラベルを挿入する前に、ギャラリーのテンプレートを選択していることを確認してください。
新しいラベルの Text プロパティを次の式に設定します:
```
ThisItem.Product.'Product Name'
```
テキストが表示されない場合は、受注ギャラリーの下部にある受注 0901 の矢印を選択します。
フルテキストが表示されるようにラベルをサイズ変更します:

この式は、注文詳細 テーブルのレコードから入手します。レコードは、多対一の関連付けによる 製品の注文 テーブルで ThisItem に維持されます。

製品名 列 (およびこれから使用する他の列) が抽出されます。

製品画像を表示する

挿入タブで、画像コントロールを詳細ギャラリーに挿入します:
画像とラベルをサイズ変更し、並ぶように移動します。

ヒント

コントロールのサイズと位置をより細かく制御するには、Alt キーを押さずにサイズ変更または移動を開始し、Alt キーを押しながらコントロールのサイズ変更または移動を続けます:
画像の Image プロパティを次の式に設定します:
```
ThisItem.Product.Picture
```
この場合も、式はこの受注明細に関連付けられている製品を参照し、表示する画像フィールドを抽出します。
複数の受注明細レコードが一度に表示されるよう、ギャラリーのテンプレートの高さを縮めます:

製品の数量とコストを表示する

挿入タブで、別のラベルを詳細ギャラリーに挿入してから、新しいラベルをサイズ変更して製品情報の右側に移動します。
新しいラベルの Text プロパティを次の式に設定します:
```
ThisItem.Quantity
```
この式は、注文詳細 テーブルから直接情報を引き出します (関連付けは必要ありません)。
ホーム タブで、このコントロールの配置を右に変更します:
挿入タブで、別のラベルを詳細ギャラリーに挿入してから、ラベルをサイズ変更して数量ラベルの右側に移動します。
新しいラベルの Text プロパティを次の式に設定します:
```
Text( ThisItem.'Unit Price', "[$-en-US]$ #,###.00" )
```
言語タグ ([$-en-US]) が含まれない場合は、言語と地域に基づいて追加されます。別の言語タグを使用する場合は、右角かっこ (]) 直後の $ を削除してから、その位置に独自の通貨記号を追加します。
ホーム タブで、このコントロールの配置を右に変更します:
挿入タブで、別のラベルコントロールを詳細ギャラリーに挿入してから、新しいラベルをサイズ変更して単価の右側に移動します。
新しいラベルの Text プロパティを次の式に設定します:
```
Text( ThisItem.Quantity * ThisItem.'Unit Price', "[$-en-US]$ #,###.00" )
```
この場合も、言語タグ ([$-en-US]) が含まれない場合は、言語と地域に基づいて追加されます。タグが異なる場合は、右角かっこ (]) 直後の $ の代わりに独自の通貨記号を使用します。
ホーム タブで、このコントロールの配置を右に変更します:

これで、コントロールを詳細ギャラリーに追加できました。
ツリービュー ウィンドウで、Screen1 を選択して詳細ギャラリーが選択されていないことを確認します。

新しいタイトルバーにテキストを追加する

挿入タブで、画面に別のラベルを挿入します:
2 番目のタイトルバーの製品の画像の上にある新しいラベルをサイズ変更し移動してから、ホーム タブでテキストの色を白に変更します。
ラベルのテキストをダブルクリックしてから、製品と入力します:
製品ラベルをコピーし貼り付けてから、コピーをサイズ変更して数量列の上に移動します。
新しいラベルのテキストをダブルクリックしてから、数量と入力します:
数量ラベルをコピーし貼り付けてから、コピーをサイズ変更して単価列の上に移動します。
新しいラベルのテキストをダブルクリックしてから、単価と入力します:
単価ラベルをコピーし貼り付けてから、コピーをサイズ変更して拡張価格列の上に移動します。
新しいラベルのテキストをダブルクリックしてから、拡張済と入力します:

受注合計を表示する

詳細ギャラリーの高さを縮めて、画面の下部に受注合計のスペースを確保します:
画面中央のタイトルバーをコピーし貼り付けてから、コピーを画面の下部に移動します:
中央のタイトルバーから製品ラベルをコピーし貼り付けてから、コピーをタイトルバーの下部、数量列の左側に移動します。
新しいラベルのテキストをダブルクリックしてから、次のテキストを入力します:
受注合計:
受注合計ラベルをコピーし貼り付けてから、コピーをサイズ変更して受注合計ラベルの右側に移動します。
新しいラベルの Text プロパティを次の式に設定します:
```
Sum( Gallery1.Selected.'Order Details', Quantity )
```
この式は委任警告を表示しますが、500 以上の製品が含まれる単一の受注がないため、これは無視できます。
ホーム タブで、新しいラベルのテキスト配置を右に設定します:
このラベルコントロールをコピーし貼り付けてから、コピーをサイズ変更して拡張済列の下に移動します。
コピーの Text プロパティを次の式に設定します:
```
Text( Sum( Gallery1.Selected.'Order Details', Quantity * 'Unit Price' ), "[$-en-US]$ #,###.00" )
```
この式は委任警告を表示しますが、500 以上の製品が含まれる単一の受注がないため、これは無視できます。

新しい明細用のスペースを追加する

任意のギャラリーで、データは表示できますが、更新したりレコードを追加することはできません。詳細ギャラリーの下に、ユーザーが 注文詳細 テーブルで記録を構成できる領域を追加して、そのレコードを注文に挿入します。

詳細ギャラリーの高さを十分に縮めて、そのギャラリーの下にある単一品目の編集スペースを確保します。

このスペースで、ユーザーが受注明細を追加できるようにコントロールを追加します。
挿入タブで、ラベルを挿入してから、サイズを変更して詳細ギャラリーの下に移動します。
新しいラベルのテキストをダブルクリックしてから、削除キーを押します。
ホーム タブで、新しいラベルの塗りつぶしの色を LightBlue に設定します:

製品を選択する

挿入タブで、コントロール > コンボボックス を選択します:

コンボボックス コントロールは左上隅に表示されます。
フライアウトダイアログで、注文製品 データソースを選択します。
コンボボックスのプロパティ タブで、編集 (フィールドの横にある) を選択してデータ ウィンドウを開きます。 主要テキストおよび SearchField が nwind_productname に設定されていることを確認します。

この場合データ ウィンドウがまだ表示名をサポートしていないため、論理名を指定します。
データ ウィンドウを閉じます。
右端にあるプロパティ タブで、下にスクロールし、複数の選択を許可をオフにし、検索を許可がオンになっていることを確認します:
コンボボックスをサイズ変更し、詳細ギャラリーの製品名列のすぐ下の淡い青色の領域に移動します:

このコンボボックスでは、ユーザーは、アプリが作成する 注文詳細 レコードの製品テーブルで、レコードを指定します。
Alt キーを押しながら、コンボボックスの下矢印を選択します。

ヒント

Alt キーを押したままにして、プレビューモードを開かずに Power Apps Studio でコントロールを操作できます。
表示される製品の一覧で、製品を選択します:

製品画像を追加する

挿入タブで、メディア > 画像を選択します:

画像コントロールは左上隅に表示されます:
画像をサイズ変更して、他の製品画像の下の淡い青色の領域およびコンボボックスの横に移動します。
画像の Image プロパティを以下に設定します:
```
ComboBox1.Selected.Picture
```
概要フォームで従業員の写真を表示するのに使用したのと同じ方法を使用しています。コンボボックスの Selected プロパティは、画像フィールドを含む、ユーザーが選択する製品のレコード全体を返します。

数量ボックスを追加する

挿入タブで、テキスト > テキスト入力を選択します:

テキスト入力 コントロールは左上隅に表示されます:
テキスト入力ボックスをサイズ変更し、コンボボックスの右側、詳細ギャラリーの数量列の下に移動します:

このテキスト入力ボックスを使用して、ユーザーは受注明細レコードの数量フィールドを指定します。
このコントロールの Default プロパティを "" に設定します:
ホーム タブで、このコントロールのテキスト配置を右に設定します:

単位と拡張価格を表示する

挿入タブで、ラベル コントロールを挿入します。

ラベルは画面の左上隅に表示されます:
ラベルをサイズ変更してテキスト入力コントロールの右側に移動し、ラベルの Text プロパティをこの式に設定します:
```
Text( ComboBox1.Selected.'List Price', "[$-en-US]$ #,###.00" )
```
このコントロールは、製品の注文 テーブルから定価を表示します。この値により、受注明細レコードの単価フィールドが決定されます。

注意

このシナリオでは、値は読み取り専用ですが、他のシナリオでは、アプリユーザーが値を変更する必要があります。その場合は、テキスト入力 コントロールを使用し、そのDefault プロパティを定価に設定します。
ホーム タブで、定価ラベルのテキスト配置を右に設定します:
定価ラベルをコピーし貼り付けてから、コピーをサイズ変更して定価ラベルの右側に移動します。
新しいラベルの Text プロパティを次の式に設定します:
```
Text( Value(TextInput1.Text) * ComboBox1.Selected.'List Price', "[$-en-US]$ #,###.00" )
```
このコントロールでは、アプリユーザーが指定した数量およびアプリユーザーが選択した製品の定価に基づいて、拡張価格が表示されます。これは、アプリユーザー向けの情報です。
数量のテキスト入力コントロールをダブルクリックしてから、数値を入力します。

拡張済価格ラベルが再計算され、新しい値が表示されます:

追加アイコンを追加する

挿入タブで、アイコン > 追加を選択します:

アイコンは画面の左上隅に表示されます。
このアイコンをサイズ変更して淡い青色の領域の右端に移動してから、アイコンの OnSelect プロパティをこの式に設定します:
```
Patch( 'Order Details',
    Defaults('Order Details'),
    {
        Order: Gallery1.Selected,
        Product: ComboBox1.Selected,
        Quantity: Value(TextInput1.Text),
        'Unit Price': ComboBox1.Selected.'List Price'
    }
);
Refresh( Orders );
Reset( ComboBox1 );
Reset( TextInput1 )
```
一般に、Patch 関数はレコードを更新して作成します。この数式の特定の引数により、関数が実行する正確な変更が決まります。
- 最初の引数は、関数がレコードを更新または作成するデータソース (この場合は 注文詳細 テーブル) を指定します。
- 2 番目の引数は、3 番目の引数で特に指定されていない限り、関数が 注文詳細 テーブルの既定値でレコードを作成することを指定します。
- 3 番目の引数は、新しいレコードの 4 つの列にユーザーからの値が含まれることを指定します。
  - 受注列には、ユーザーが受注ギャラリーで選択した受注の番号が含まれます。
  - 製品列には、製品を表示するコンボボックスでユーザーが選択した製品の名前が含まれます。
  - 数量列には、ユーザーがテキスト入力ボックスで指定した値が含まれます。
  - 単価列には、ユーザーがこの受注明細に対して選択した製品の定価が含まれます。
注意

製品を表示するコンボボックスでアプリユーザーが選択した製品の任意の列 (製品の注文 テーブルにある) にあるデータを使用する式を作成できます。ユーザーが 製品の注文 テーブルでレコードを選択したとき、製品名がコンボボックスに表示されるだけでなく、製品の単価もラベルに表示されます。キャンバスアプリの各検索値は、主キーだけでなく、レコード全体を参照します。

更新関数が、注文テーブルが 注文詳細 テーブルに追加したばかりのレコードを反映させます。 Reset 関数は、製品、数量、および単価のデータをクリアして、ユーザーが同じ受注に対して別の受注明細をより簡単に作成できるようにします。
F5 キーを押してから、追加アイコンを選択します。

受注には、指定した情報が反映されます:
(オプション) 受注に別の項目を追加します。
Esc キーを押してプレビューモードを閉じます。

受注明細を削除する

画面の中央で、詳細ギャラリーのテンプレートを選択します:
挿入タブで、アイコン > ごみ箱を選択します:

ゴミ箱アイコンはギャラリーテンプレートの左上隅に表示されます。
ゴミ箱アイコンをサイズ変更して詳細ギャラリーテンプレートの右側に移動してから、アイコンの OnSelect プロパティをこの式に設定します:
```
Remove( 'Order Details', ThisItem ); Refresh( Orders )
```
現時点では、関連付けから直接レコードを削除することはできないため、削除関数は、関連するテーブルからレコードを直接削除します。 ThisItem では、ゴミ箱アイコンが表示される詳細ギャラリーの同じレコードから取得した、削除するレコードを指定します。

この場合も、操作はキャッシュされたデータを使用するため、更新関数は注文テーブルに、アプリが関連テーブルの 1 つを変更したことを伝えます。
F5 キーを押してプレビューモードを開いてから、受注から削除する各受注明細レコードの横にあるゴミ箱アイコンを選択します。
受注からのさまざまな受注明細を追加および削除してみてください:

まとめ

要約すると、別のギャラリーを追加して受注明細を表示し、アプリで受注明細の追加と削除を制御しました。以下の要素を使用しました:

一対多の関連付けを介して受注ギャラリーにリンクされた 2 番目のギャラリーコントロール: Gallery2.Items = Gallery1.Selected.'Order Details'
注文詳細 テーブルから 注文製品 テーブルの多対一の関連付け: ThisItem.Product.'Product Name' および ThisItem.Product.Picture
製品の一覧を取得する Choices 関数: Choices( 'Order Details'.Product' )
完全な多対一の関連レコードとしてのコンボボックスの Selected プロパティ: ComboBox1.Selected.Picture および ComboBox1.Selected.'List Price'
受注明細レコードを作成する Patch関数: Patch( 'Order Details', Defaults( 'Order Details' ), ... )
受注明細レコードを削除する Remove関数: Remove( 'Order Details', ThisItem )

この一連のトピックでは、教育目的で、Dataverse の関連付けとキャンバスアプリでの選択肢について簡単に説明します。アプリを運用版にリリースする前に、フィールドの検証、エラー処理、およびその他の多くの要素を検討する必要があります。

注意

ドキュメントの言語設定についてお聞かせください。簡単な調査を行います。 (この調査は英語です)

この調査には約 7 分かかります。個人データは収集されません (プライバシーステートメント)。

次の方法で共有

キャンバスアプリで詳細ギャラリーを作成する

前提条件

別のタイトルバーを作成する

ギャラリーを追加する

製品名を表示する

製品画像を表示する

製品の数量とコストを表示する

新しいタイトルバーにテキストを追加する

受注合計を表示する

新しい明細用のスペースを追加する

製品を選択する

製品画像を追加する

数量ボックスを追加する

単位と拡張価格を表示する

追加アイコンを追加する

受注明細を削除する

まとめ

その他のリソース

次の方法で共有

キャンバス アプリで詳細ギャラリーを作成する

前提条件

別のタイトル バーを作成する

ギャラリーを追加する

製品名を表示する

製品画像を表示する

製品の数量とコストを表示する

新しいタイトル バーにテキストを追加する

受注合計を表示する

新しい明細用のスペースを追加する

製品を選択する

製品画像を追加する

数量ボックスを追加する

単位と拡張価格を表示する

追加アイコンを追加する

受注明細を削除する

まとめ

その他のリソース

キャンバスアプリで詳細ギャラリーを作成する

別のタイトルバーを作成する

新しいタイトルバーにテキストを追加する