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

  • 20 分

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

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

学習目標

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

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

前提条件

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

  • プロビジョニングされた Power Pages Web サイト。 使用できる Power Pages Web サイトがない場合は、Power Pages でサイトを作成するの指示に従って Web サイトを作成します。
  • Power Pages Management アプリにアクセスします。

大まかな手順

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

  • レイアウト ブロックとして使用する Dataverse データにアクセスして、部分的なテンプレートを作成します。

  • 2 列のレイアウトの Web テンプレートを拡張して、新しいテンプレートを作成します。

  • 部分的なテンプレートが含まれるようにサイド パネルを上書きします。

  • 既存の Web ページのテンプレートを変更します。

  • テーブルのアクセス許可を設定して、匿名ユーザーのデータを表示します。

詳しい手順

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

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

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

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

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

  3. Web サイトを見つけて、拡張機能メニュー (省略記号) を展開し、ポータル管理を選択して Power Pages Management アプリを開きます。

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

  5. 新規を選択します。

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

    • 名前 - ディレクトリ

    • Web サイト - 現在の Web サイトを選択します

    • ソース - 次のコンテンツを入力します。

    {% fetchxml accounts %}
<fetch>
  <entity name="account">
    <attribute name="name" />
  </entity>
</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 %}

  7. 保存して閉じるを選択します。

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

次に、既存の 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. オプション: ページのコンテンツにテキスト要素を追加し、任意のテキストを入力します。

  5. 保存して閉じるを選択します。

初期テンプレートをテストする

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

  1. Power Pages ホーム タブに戻るか、新しいタブを開きます。

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

  3. 同期を選択して変更を同期します。

  4. ページ ワークスペースを選択します。

  5. + ページを選択します。 ページの追加ダイアログで、次の手順を実行します。

    1. ページ名としてディレクトリと入力します。

    2. カスタム レイアウトを選択し、ディレクトリ ページ テンプレートを選択します。

    3. 追加を選択します。

空のページの右パネルに "ディレクトリにアクセスするためのアクセス許可がありません" というメッセージが表示されます。

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

警告

匿名ユーザーにグローバルな読み取りアクセス許可を付与するのは、あくまでも説明のためです。 ビューや FetchXML 式に適切なフィルターを含めずに過剰なアクセス許可を付与して、意図せず機密情報を公開することのないように注意してください。

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

  1. 設定ワークスペースを選択し、テーブルのアクセス許可を選択します。

  2. + 新規を選択します。

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

    • 名前 - 取引先企業のディレクトリ

    • テーブル - アカウント (account) テーブルを選択します

    • アクセスの種類 - Global accessを選択します。

    • アクセス許可 - 読み取りを選択します

  4. ロールの追加を選択します。

  5. 匿名ユーザーと認証されたユーザーを選択します。

  6. 保存を選択します。

テンプレートをテストする

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

  1. ページ ワークスペースを選択し、ディレクトリ ページを選択します。

  2. プレビュー > デスクトップを選択します。

    注

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

これで、右パネルにアカウントのリストが含まれているページが表示されます。

アカウントのリストが含まれているページのスクリーンショット。