演習 - リストとフォームのコンポーネントを使用する

完了

この演習の目的は、Power Pages Web サイトにリストとフォームを追加する際の実践的なエクスペリエンスを提供することです。

学習目標

これらの演習の目的は、次の方法を学習することです。

  • リスト コンポーネントを Web ページに追加する。

  • フォーム コンポーネントを Web ページに追加する。

  • ドリルダウンして行の詳細を表示するようにリスト コンポーネントを設定する。

前提条件

これらの演習を完了するための前提条件は次のとおりです。

  • Power Apps Maker Portal へのアクセス。

  • 既定のサンプル Microsoft Dataverse アプリとデータ。これらがあることが理想ですが、データが含まれている他の Dataverse テーブルも使用できます。

  • プロビジョニングされた Power Pages Web サイト。 プロビジョニングされた Web サイトがない場合は、Power Pages でサイトを作成するに移動して Web サイトを作成します。

ヒント

この演習は、使用できるサンプル データがあると効果的です。 Dataverse 環境をプロビジョニングするときに、サンプル アプリとデータを追加できます。 環境の作成 の手順を確認し、サンプルのアプリとデータを使用して、Dataverse 環境をプロビジョニングしてください。

シナリオ

組織は、Power Pages Web サイトをプロビジョニング済みで、利用可能な製品のリストをパブリック Web ページに表示することを希望しています。 訪問者がドリルダウンして他の詳細を表示できることも必要です。

大まかな手順

この演習を完了するには、次のタスクを実行します。

  • Dataverse テーブルへの読み取りアクセスを許可するテーブルのアクセス許可を作成します。

  • Web ページを作成し、Dataverse テーブルにリンクされているリスト コンポーネントを追加します。

  • Dataverse テーブルの詳細を表示するためのフォーム コンポーネントを使用する、子 Web ページを作成します。

  • リスト コンポーネントを変更し、訪問者がフォーム ページでドリルダウンして詳細行を表示できるようにします。

テーブルのアクセス許可行の作成

Dataverse テーブルへのアクセスは、テーブルのアクセス許可によって制御されます。 製品テーブルへの読み取り専用アクセスを許可するには、次の手順に従います。

  1. Power Pages にサインインします。

  2. 右上隅でターゲット環境を選択します。

  3. Web サイトを見つけて編集を選択し、Power Pages デザイン スタジオを開きます。

  4. 設定タブを選択します。

  5. セキュリティ セクションでテーブルのアクセス許可を選択します。

    設定ワークスペースの [テーブルのアクセス許可] リンクのスクリーンショット。

  6. + 新しいアクセス許可を選択し、次の情報を入力します。

    • 名前 - 製品

    • テーブル - 製品 (sample_product)

    • アクセスの種類 - グローバル

    • アクセス許可 - 読み取り

  7. ロールの追加を選択し、匿名ユーザー認証されたユーザーを追加します。

  8. 保存を選択します。

    製品テーブルのグローバル読み取りアクセス許可のスクリーンショット。

  9. サンプル製品フォームには、製品レビューを含むサブグリッドが含まれている場合があります。 製品レビュー サブグリッドで "アクセス拒否" というメッセージが表示されるのを防ぐには、手順 4 から 6 を繰り返して、レビュー テーブルのグローバル読み取りテーブル アクセス許可行を作成します。

リストの Web ページの作成

Power Pages デザイン スタジオでリスト コンポーネントを含む Web ページを作成するには、次の手順に従います。

  1. ページ タブを選択します。

  2. + ページを選択します。

  3. ページ名として製品と入力します。

  4. 空白から開始ページ テンプレートが選択されていることを確認し、追加を選択します。

リスト コンポーネントの追加と設定

リスト コンポーネントを追加および設定するには、次の手順に従います。

  1. ページ キャンバスでリスト コンポーネントを選択します。

  2. コンポーネントのプロパティ ダイアログで、次の値を入力します。

    • テーブルの選択 - 製品 (sample_product)、または自分のアプリから別のテーブルを選択

    • データ ビューの選択 - アクティブな製品

    • リストに名前を付ける - 製品リスト

  3. 完了を選択します。

  4. コマンド バーからプレビュー > デスクトップを選択し、Dataverse にある製品データ行のリストが表示されることを確認します。

    実行時のリストを含むサンプル Web ページのスクリーンショット。

フォームの Web ページの作成

次のタスクでは、フォーム コンポーネントを含む Web ページを作成して、行の詳細を表示します。 この Web ページは、製品ページの子ページです。

  1. ページ タブを選択します。

  2. 先ほど作成した製品ページを見つけます。

  3. 省略記号 (...) を選択し、新しいサブページの追加を選択します。

  4. ページ名として製品と入力します。

  5. 空白から開始ページ テンプレートが選択されていることを確認し、追加を選択します。

フォーム コンポーネントの追加と設定

フォーム コンポーネントを追加および設定するには、次の手順に従います。

  1. ページ キャンバスでフォーム コンポーネントを選択します。

  2. 既存のフォームを選択するように求められた場合は、新しいフォームを選択します。

  3. コンポーネントのプロパティ ダイアログで、次の値を入力します。

    • テーブルの選択 - 製品

    • フォームの選択 - 情報

    • 選択したフォームのコピーに名前を付ける - 製品の詳細

  4. データ タブを選択し、このフォームのデータ ドロップダウンを読み取り専用であるに設定します。

  5. OK を選択します。 フォームのプレビューがページ キャンバスに表示されます。

    デザイン スタジオの製品ページのスクリーンショット。フォーム コンポーネントが追加されて設定されています。

フォーム コンポーネントに移動するようにリストを変更する

最後のタスクでは、行が選択されたときにフォーム コンポーネントに移動するようにリスト ページを変更します。

  1. ページ タブを選択し、リスト コンポーネントを含む製品ページを見つけます。

  2. キャンバスでリスト コンポーネントを選択し、リストの編集を選択します。

  3. リストの設定ダイアログで、アクション タブを選択します。

  4. レコードの表示トグルをオンにして、次の情報を入力します。

    • ターゲットの種類 - フォーム

    • フォーム - 製品の詳細

  5. 完了を選択します。

  6. コマンド バーからプレビュー > デスクトップを選択し、Dataverse にある製品行のリストが表示されることを確認します。 製品名はハイパーリンクになっています。

  7. 製品名を選択して詳細フォームを表示します。

メモ

製品レビュー サブグリッドで "適切なアクセス許可がありません" というメッセージが表示される場合は、テーブルのアクセス許可行の作成タスクの手順を繰り返して、レビュー テーブルのグローバル読み取りテーブル アクセス許可を作成します。

アイデア テーブル行のリストのスクリーンショット。選択した行の詳細を含むフォームがポップアップ ウィンドウに表示されています。