次の方法で共有


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

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

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

画面領域の定義

前提条件

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

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

  1. 画面の上部で、タイトル バーとして機能する ラベル コントロールを選択し、Ctrl-C キーを押してコピーしてから、Ctrl-V キーを押して貼り付けます。

    タイトル バーをコピーして貼り付ける

  2. コピーをサイズ変更して移動し、概要フォームのすぐ下に表示されるようにします。

  3. 次のいずれかの方法でコピーからテキストを削除します:

    • テキストをダブルクリックして選択し、削除キーを押します。
    • ラベルの Text プロパティを空の文字列 ("") に設定します。

    タイトル バー コピーからのテキストを削除する

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

    空の縦方向のギャラリーを追加する

    注文詳細を表示する新しいギャラリーが左上隅に表示されます。

  2. フライアウト データ ソース ダイアログを閉じてから、詳細ギャラリーをサイズ変更して、右下隅の新しいタイトル バーの下に移動します。

    受注明細ギャラリーの変更後の場所

  3. 詳細ギャラリーの Items プロパティを次の数式に設定します:

    Gallery1.Selected.'Order Details'
    

    詳細ギャラリーのアイテム プロパティを設定する

    エラーが表示された場合は、受注ギャラリーに Gallery1 (左端のツリー ビュー ウィンドウにある) という名前が付けられていることを確認します。 そのギャラリーに別の名前がある場合は、Gallery1 に名前変更します。

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

    注文テーブルと注文詳細テーブル間の一対多の関連付け。

製品名を表示する

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

    詳細ギャラリーのテンプレートを選択する

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

  2. 挿入タブで、詳細ギャラリーにラベルを挿入します。

    ラベルはギャラリー内に表示される必要があります。表示されない場合は、やり直してください。ただしラベルを挿入する前に、ギャラリーのテンプレートを選択していることを確認してください。

    詳細ギャラリーにラベルを追加する

  3. 新しいラベルの Text プロパティを次の式に設定します:

    ThisItem.Product.'Product Name'
    

    テキストが表示されない場合は、受注ギャラリーの下部にある受注 0901 の矢印を選択します。

  4. フルテキストが表示されるようにラベルをサイズ変更します:

    受注明細の製品名を表示する

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

    注文詳細と注文製品テーブル間の多対一の関連付け。

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

    注文製品テーブルの列。

製品画像を表示する

  1. 挿入タブで、画像 コントロールを詳細ギャラリーに挿入します:

    キャンバスに画像コントロールを挿入する

  2. 画像とラベルをサイズ変更し、並ぶように移動します。

    ヒント

    コントロールのサイズと位置をより細かく制御するには、Alt キーを押さずにサイズ変更または移動を開始し、Alt キーを押しながらコントロールのサイズ変更または移動を続けます:

    画像コントロールの移動

  3. 画像の Image プロパティを次の式に設定します:

    ThisItem.Product.Picture
    

    この場合も、式はこの受注明細に関連付けられている製品を参照し、表示する画像フィールドを抽出します。

    製品画像を表示する

  4. 複数の受注明細レコードが一度に表示されるよう、ギャラリーのテンプレートの高さを縮めます:

    ギャラリーのテンプレートを短くする

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

  1. 挿入タブで、別のラベルを詳細ギャラリーに挿入してから、新しいラベルをサイズ変更して製品情報の右側に移動します。

  2. 新しいラベルの Text プロパティを次の式に設定します:

    ThisItem.Quantity
    

    この式は、注文詳細 テーブルから直接情報を引き出します (関連付けは必要ありません)。

    製品数量を表示する

  3. ホーム タブで、このコントロールの配置をに変更します:

    配置を右に変更する

  4. 挿入タブで、別のラベルを詳細ギャラリーに挿入してから、ラベルをサイズ変更して数量ラベルの右側に移動します。

  5. 新しいラベルの Text プロパティを次の式に設定します:

    Text( ThisItem.'Unit Price', "[$-en-US]$ #,###.00" )
    

    言語タグ ([$-en-US]) が含まれない場合は、言語と地域に基づいて追加されます。 別の言語タグを使用する場合は、右角かっこ (]) 直後の $ を削除してから、その位置に独自の通貨記号を追加します。

    単価を表示する

  6. ホーム タブで、このコントロールの配置をに変更します:

    配置を右方向に変更する

  7. 挿入タブで、別のラベル コントロールを詳細ギャラリーに挿入してから、新しいラベルをサイズ変更して単価の右側に移動します。

  8. 新しいラベルの Text プロパティを次の式に設定します:

    Text( ThisItem.Quantity * ThisItem.'Unit Price', "[$-en-US]$ #,###.00" )
    

    この場合も、言語タグ ([$-en-US]) が含まれない場合は、言語と地域に基づいて追加されます。 タグが異なる場合は、右角かっこ (]) 直後の $ の代わりに独自の通貨記号を使用します。

    拡張価格を表示する

  9. ホーム タブで、このコントロールの配置をに変更します:

    右の配置を変更する

    これで、コントロールを詳細ギャラリーに追加できました。

  10. ツリー ビュー ウィンドウで、Screen1 を選択して詳細ギャラリーが選択されていないことを確認します。

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

  1. 挿入タブで、画面に別のラベルを挿入します:

    挿入ラベルのスクリーンショット

  2. 2 番目のタイトル バーの製品の画像の上にある新しいラベルをサイズ変更し移動してから、ホーム タブでテキストの色を白に変更します。

  3. ラベルのテキストをダブルクリックしてから、製品と入力します:

    ラベル テキストを製品に変更する

  4. 製品ラベルをコピーし貼り付けてから、コピーをサイズ変更して数量列の上に移動します。

  5. 新しいラベルのテキストをダブルクリックしてから、数量と入力します:

    ラベル テキストを数量に変更する

  6. 数量ラベルをコピーし貼り付けてから、コピーをサイズ変更して単価列の上に移動します。

  7. 新しいラベルのテキストをダブルクリックしてから、単価と入力します:

    ラベル テキストを単価に変更する

  8. 単価ラベルをコピーし貼り付けてから、コピーをサイズ変更して拡張価格列の上に移動します。

  9. 新しいラベルのテキストをダブルクリックしてから、拡張済と入力します:

    ラベル テキストを拡張済に変更する

受注合計を表示する

  1. 詳細ギャラリーの高さを縮めて、画面の下部に受注合計のスペースを確保します:

    受注明細ギャラリーを短くする

  2. 画面中央のタイトル バーをコピーし貼り付けてから、コピーを画面の下部に移動します:

    タイトル バーをコピーし、コピーを下端に移動する

  3. 中央のタイトル バーから製品ラベルをコピーし貼り付けてから、コピーをタイトル バーの下部、数量列の左側に移動します。

  4. 新しいラベルのテキストをダブルクリックしてから、次のテキストを入力します:
    受注合計:

    受注合計のラベルを追加する

  5. 受注合計ラベルをコピーし貼り付けてから、コピーをサイズ変更して受注合計ラベルの右側に移動します。

  6. 新しいラベルの Text プロパティを次の式に設定します:

    Sum( Gallery1.Selected.'Order Details', Quantity )
    

    この式は委任警告を表示しますが、500 以上の製品が含まれる単一の受注がないため、これは無視できます。

  7. ホーム タブで、新しいラベルのテキスト配置をに設定します:

    配置を変更する

  8. このラベル コントロールをコピーし貼り付けてから、コピーをサイズ変更して拡張済列の下に移動します。

  9. コピーの Text プロパティを次の式に設定します:

    Text( Sum( Gallery1.Selected.'Order Details', Quantity * 'Unit Price' ), "[$-en-US]$ #,###.00" )
    

    この式は委任警告を表示しますが、500 以上の製品が含まれる単一の受注がないため、これは無視できます。

    受注合計金額を表示する

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

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

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

    このスペースで、ユーザーが受注明細を追加できるようにコントロールを追加します。

    詳細ギャラリーを短くする

  2. 挿入タブで、ラベルを挿入してから、サイズを変更して詳細ギャラリーの下に移動します。

    ラベルを挿入する

  3. 新しいラベルのテキストをダブルクリックしてから、削除キーを押します。

  4. ホーム タブで、新しいラベルの塗りつぶしの色を LightBlue に設定します:

    ラベルの塗りつぶしを淡い青色に変更する

製品を選択する

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

    コンボ ボックスを挿入する

    コンボ ボックス コントロールは左上隅に表示されます。

  2. フライアウト ダイアログで、注文製品 データ ソースを選択します。

  3. コンボ ボックスのプロパティ タブで、編集 (フィールドの横にある) を選択してデータ ウィンドウを開きます。 主要テキストおよび SearchFieldnwind_productname に設定されていることを確認します。

    この場合データ ウィンドウがまだ表示名をサポートしていないため、論理名を指定します。

    コンボ ボックスの主要テキストを設定する

  4. データ ウィンドウを閉じます。

  5. 右端にあるプロパティ タブで、下にスクロールし、複数の選択を許可をオフにし、検索を許可がオンになっていることを確認します:

    複数選択を無効にして検索を有効にする

  6. コンボ ボックスをサイズ変更し、詳細ギャラリーの製品名列のすぐ下の淡い青色の領域に移動します:

    コンボ ボックスを移動する

    このコンボ ボックスでは、ユーザーは、アプリが作成する 注文詳細 レコードの製品 テーブルで、レコードを指定します。

  7. Alt キーを押しながら、コンボ ボックスの下矢印を選択します。

    ヒント

    Alt キーを押したままにして、プレビュー モードを開かずに Power Apps Studio でコントロールを操作できます。

  8. 表示される製品の一覧で、製品を選択します:

    コンボ ボックスで製品を選択する

製品画像を追加する

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

    画像コントロールの挿入

    画像 コントロールは左上隅に表示されます:

    画像コントロールの既定の場所

  2. 画像をサイズ変更して、他の製品画像の下の淡い青色の領域およびコンボ ボックスの横に移動します。

  3. 画像の Image プロパティを以下に設定します:

    ComboBox1.Selected.Picture
    

    画像の Image プロパティを設定する

    概要フォームで従業員の写真を表示するのに使用したのと同じ方法を使用しています。 コンボ ボックスの Selected プロパティは、画像フィールドを含む、ユーザーが選択する製品のレコード全体を返します。

数量ボックスを追加する

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

    テキスト入力ボックスを追加する

    テキスト入力 コントロールは左上隅に表示されます:

    テキスト入力ボックスの既定の場所

  2. テキスト入力ボックスをサイズ変更し、コンボ ボックスの右側、詳細ギャラリーの数量列の下に移動します:

    テキスト入力ボックスをサイズ変更し移動する

    このテキスト入力ボックスを使用して、ユーザーは受注明細レコードの数量フィールドを指定します。

  3. このコントロールの Default プロパティを "" に設定します:

    テキスト入力ボックスのデフォルト プロパティを設定します。

  4. ホーム タブで、このコントロールのテキスト配置をに設定します:

    コントロールの配置を右に変更する

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

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

    ラベルは画面の左上隅に表示されます:

    ラベルを挿入する

  2. ラベルをサイズ変更してテキスト入力コントロールの右側に移動し、ラベルの Text プロパティをこの式に設定します:

    Text( ComboBox1.Selected.'List Price', "[$-en-US]$ #,###.00" )
    

    ラベルの Text プロパティを設定する

    このコントロールは、製品の注文 テーブルから 定価 を表示します。 この値により、受注明細レコードの単価フィールドが決定されます。

    注意

    このシナリオでは、値は読み取り専用ですが、他のシナリオでは、アプリ ユーザーが値を変更する必要があります。 その場合は、テキスト入力 コントロールを使用し、そのDefault プロパティを定価に設定します。

  3. ホーム タブで、定価ラベルのテキスト配置をに設定します:

    コントロールの配置を右側に変更する

  4. 定価ラベルをコピーし貼り付けてから、コピーをサイズ変更して定価ラベルの右側に移動します。

  5. 新しいラベルの Text プロパティを次の式に設定します:

    Text( Value(TextInput1.Text) * ComboBox1.Selected.'List Price', "[$-en-US]$ #,###.00" )
    

    新しいラベルの Text プロパティを設定する

    このコントロールでは、アプリ ユーザーが指定した数量およびアプリ ユーザーが選択した製品の定価に基づいて、拡張価格が表示されます。 これは、アプリユーザー向けの情報です。

  6. 数量のテキスト入力コントロールをダブルクリックしてから、数値を入力します。

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

    数量を指定して、拡張価格を表示する

追加アイコンを追加する

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

    追加アイコンを挿入する

    アイコンは画面の左上隅に表示されます。

    既定の場所にある追加アイコン

  2. このアイコンをサイズ変更して淡い青色の領域の右端に移動してから、アイコンの 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 )
    

    アイコンの OnSelect プロパティを設定する

    一般に、Patch 関数はレコードを更新して作成します。この数式の特定の引数により、関数が実行する正確な変更が決まります。

    • 最初の引数は、関数がレコードを更新または作成するデータ ソース (この場合は 注文詳細 テーブル) を指定します。

    • 2 番目の引数は、3 番目の引数で特に指定されていない限り、関数が 注文詳細 テーブルの既定値でレコードを作成することを指定します。

    • 3 番目の引数は、新しいレコードの 4 つの列にユーザーからの値が含まれることを指定します。

      • 受注列には、ユーザーが受注ギャラリーで選択した受注の番号が含まれます。
      • 製品列には、製品を表示するコンボ ボックスでユーザーが選択した製品の名前が含まれます。
      • 数量列には、ユーザーがテキスト入力ボックスで指定した値が含まれます。
      • 単価列には、ユーザーがこの受注明細に対して選択した製品の定価が含まれます。

    注意

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

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

  3. F5 キーを押してから、追加アイコンを選択します。

    受注には、指定した情報が反映されます:

    受注明細を追加するアニメーション

  4. (オプション) 受注に別の項目を追加します。

  5. Esc キーを押してプレビュー モードを閉じます。

受注明細を削除する

  1. 画面の中央で、詳細ギャラリーのテンプレートを選択します:

    ギャラリー テンプレートを選択する

  2. 挿入タブで、アイコン > ごみ箱を選択します:

    ごみ箱アイコンを挿入する

    ゴミ箱アイコンはギャラリー テンプレートの左上隅に表示されます。

    アイコンの既定の場所

  3. ゴミ箱アイコンをサイズ変更して詳細ギャラリー テンプレートの右側に移動してから、アイコンの OnSelect プロパティをこの式に設定します:

    Remove( 'Order Details', ThisItem ); Refresh( Orders )
    

    アイコンの OnSelect プロパティを設定する

    現時点では、関連付けから直接レコードを削除することはできないため、削除 関数は、関連するテーブルからレコードを直接削除します。 ThisItem では、ゴミ箱アイコンが表示される詳細ギャラリーの同じレコードから取得した、削除するレコードを指定します。

    この場合も、操作はキャッシュされたデータを使用するため、更新 関数は 注文 テーブルに、アプリが関連テーブルの 1 つを変更したことを伝えます。

  4. F5 キーを押してプレビュー モードを開いてから、受注から削除する各受注明細レコードの横にあるゴミ箱アイコンを選択します。

  5. 受注からのさまざまな受注明細を追加および削除してみてください:

    受注明細を追加および削除するアニメーション

まとめ

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

  • 一対多の関連付けを介して受注ギャラリーにリンクされた 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 分かかります。 個人データは収集されません (プライバシー ステートメント)。