演習 - 拡張可能な Web テンプレートの作成

完了

このハンドオン ラボの目的は、Liquid テンプレートの作成と拡張の概念を紹介することです。

この演習は、使用できるサンプル データがあると効果的です。 作業環境によっては、演習のために一部のサンプル データのインストールが必要になる場合があります。 Microsoft Dataverse には、必要に応じてサンプル データを追加する機能があります。 作業環境にサンプル データがインストールされていない場合は、サンプル データの追加または削除 のステップに従ってサンプル データを環境にインストールしてください。

学習目標

この演習を終了すると、次のことができるようになります。

  • extends および block のタグを使用して Liquid テンプレートを拡張します。
  • include タグを使用して Liquid テンプレートを再利用します。
  • 新しいテンプレートの結果へテーブルのアクセス許可を適用します。

前提条件

この演習では、環境で次のパラメーターを設定する必要があります。

  • プロビジョニングされた Power Apps ポータル。 Power Apps ポータルを使用できない場合は、ポータルの作成 に関する指示に従ってポータルを作成します。
  • Power Apps メーカー ポータルへのアクセス。

大まかな手順

この演習を完了するには、次の大まかなタスクを完了する必要があります。

  • レイアウト ブロックとして使用するために、Dataverse データにアクセスすることで部分的なテンプレートを作成します。
  • 2 列のレイアウトの Web テンプレートを拡張して、新しいテンプレートを作成します。
  • 部分的なテンプレートが含まれるようにサイド パネルを上書きします。
  • 既存の Web ページのテンプレートを変更します。
  • テーブルのアクセス許可を構成して、匿名ユーザーのデータを表示します。

詳細な手順

この手順を完了するには、Dataverse のすべてのアカウントを一覧表示するサイド パネルを含む新しいページ テンプレートを作成します。

部分的なテンプレートの作成

最初のタスクでは、ページのレンダリングには使用されない、別のテンプレートに挿入される部分的なテンプレートを作成します。

  1. https://home.dynamics.com を開きます。

  2. ポータル管理アプリを選択します。

  3. Web テンプレート を選択します。

  4. 新規 を選択します。

  5. 次の値を入力します。

    • 名前 - ディレクトリ
    • Web サイト - 現在の Web サイトを選択します
    • ソース - 次のコンテンツを入力します。
    {% fetchxml accounts %}
    <fetch>
      <table name="account">
        <attribute name="name" />
      </table>
    </fetch>
    {% endfetchxml %}
    
    {% if accounts.global_permission_granted %}
      <ul>
        {% for account in accounts.results.entities %} 
        <li>{{ account.name }}</li>
        {%- endfor -%}
      </ul>
    {% else %}
      <div class="alert alert-warning">You do not have permissions to access the directory.</div>
    {% endif %}
    
  6. 保存して閉じる を選択します。

既存のテンプレートの拡張

次に、既存の Liquid テンプレートを拡張する新しいテンプレートを作成し、以前に作成したテンプレートを挿入します。

  1. Web テンプレート を選択します。

  2. 新規 を選択します。

  3. 次の値を入力します。

    • 名前 - ディレクトリ テンプレート
    • Web サイト - 現在の Web サイトを選択します
    • ソース - 次のコンテンツを入力します。
    {% extends "Layout 2 Column Wide Left" %}
    
    {% block aside %}
      <h2>Directory</h2>
      {% include 'Directory' %}
    {% endblock %}
    
  4. 保存して閉じる を選択します。

ページ テンプレートの作成およびページとの関連付け

この演習では、新しい Web テンプレートを使用するページ テンプレートを作成し、そのテンプレートをディレクトリ出力に含める必要があります。

  1. ページ テンプレート を選択します。
  2. 新規 を選択します。
  3. 次の値を入力します。
    • 名前 - ディレクトリ ページ テンプレート
    • Web サイト - 現在の Web サイトを選択
    • タイプ - Web テンプレート を選択します。
    • Web テンプレート - ディレクトリ テンプレート を選択します。
    • テーブル名 - Web ページ を選択します。
  4. 保存して閉じる を選択します。

テスト

次のステップは、新しいテンプレートが機能するかどうかのテストです。

  1. ブラウザーの新しいタブで Power Apps ポータル スタジオを開きます。そして、次の手順に従います。
    1. https://make.powerapps.com の Power Apps メーカー ポータルに移動します。
    2. 右上隅の環境セレクターを使用して、ターゲット環境を選択します。
    3. アプリ リストから、ポータル タイプのアプリケーションを選択します。
    4. 編集 メニューを選択します。
  2. ツールベルトから、ページ アイコンを選択します。
  3. サービス の下の 製品 A などの既存のページを選択します。 注意: これは、お使いのポータルのページの名前や階層とは異なる場合があります。
  4. 右側の コンポーネント パネルで テンプレート プロパティを検索します。
  5. 新しいテンプレートとして、ディレクトリ ページ テンプレート を選択します。 データをフィルター処理するテーブルのアクセス許可の代わりに、ポータル スタジオが作成者のアカウントで実行され、Dataverse セキュリティを使用するため、アカウントのリストを表示する必要があります。
  6. Web サイトの参照 を選択します。 メッセージ「ディレクトリにアクセスするためのアクセス許可がありません。」が表示されるはずです。

テーブルのアクセス許可の追加

テーブルのアクセス許可を追加するには、次の手順を実行します。

  1. ポータル管理アプリに戻ります。
  2. テーブルのアクセス許可 を選択します。
  3. + 新規 を選択します。
  4. 次の値を入力します。
    • 名前 - 取引先企業のディレクトリ
    • テーブル名 - 取引先企業テーブルを選択します
    • Web サイト - 現在の Web サイトを選択します
    • スコープ - グローバル を選択します
    • 権限 - 読み取り を選択します
  5. 保存 を選択します。
  6. Web ロール サブグリッドまでスクロールします。
  7. 既存の Web ロールの追加 を選択します。
  8. 匿名ユーザー認証されたユーザー を見つけて選択します。
  9. 追加 を選択します。

テスト

最後のタスクは、新しいテンプレートをテストすることです。

  1. ポータル スタジオに切り替えます。
  2. Web サイトの参照 を選択します。

このコマンドを実行すると、サイト キャッシュが再構築されます。 単純なブラウザー ページの更新では、データを更新するには不十分です。

これで、アカウントの一覧を含むページが表示されます。

アカウントの一覧を含むページが表示され、キャッシュが再構築されました。