演習 - アカウントのリストの表示

  • 20 分

このハンズオン ラボの目的は、Liquid を使用して Microsoft Dataverse のデータへアクセスすることです。

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

学習目標

これらの演習の目標は、以下の方法を習得することです。

  • ページ コンテンツの一部として Liquid コードを入力します。

  • Liquid を使用して、Dataverse データにアクセスします。

  • 利用可能なデータだけを表示する条件付きステートメントを追加します。

前提条件

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

  • プロビジョニングされた Power Pages Web サイト。 使用できる Web サイトがない場合は、「Power Pages でサイトを作成する」の指示に従います。

  • Power Pages デザイン スタジオにアクセスします。

大まかな手順

この演習では、Power Pages デザイン スタジオ コード エディターを使用した Web ページ コピー セクションへの一部の HTML と Liquid コードの追加によって、選択した Dataverse レコードを表示します。

  1. Web サイトを Power Pages デザイン スタジオで開きます。

  2. 仕入先 Web ページを追加します。

  3. HTML と Liquid コードを追加して、すべてのアクティブな取引先担当者の一覧を表示します。

  4. 結果をデザイン スタジオとブラウザーでプレビューします。

  5. 取引先担当者テーブルの読み取りテーブル アクセス許可を追加し、結果をブラウザーで確認します。

詳しい手順

次のセクションの詳細な手順に従って、この演習を完了します。

Power Pages デザイン スタジオの起動

Power Pages デザイン スタジオを起動するには、次の手順に従います。

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

  2. 右上隅で適切な環境を選択します。

  3. Web サイトを選択してから、編集を選択します。

仕入先 Web ページの作成

仕入先 Web ページを作成するには、次の手順を実行します。

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

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

    • ページ名として仕入れ先と入力します。

    • 空白から開始テンプレートを選択します。

    • 追加を選択します。

ソース コードの編集

ソース コードを編集して、すべてのアクティブな取引先担当者の一覧を表示するには、次の手順に従います。

  1. ページ キャンバスでコンテンツを選択し、テキスト コンポーネントを追加します。

  2. コンポーネントのプレースホルダーを次のテキストに置き換えます。

    <h2>List of accounts</h2>
{% entityview logical_name:'account', name:'Active Accounts' %}
<p>We have {{ entityview.total_records }} accounts.</p>
<ul>
  {% for account in entityview.records -%}
  <li>{{ account.name }}
    {% if account.telephone1 %}
    (<a href="tel:{{ account.telephone1 }}">{{ account.telephone1 }}</a>)
    {% endif %}
  </li>
  {% endfor %}
</ul>
{% endentityview %}

  3. 同期を選択します。

  4. 現在の取引先担当者の一覧がページ キャンバス上に表示されるはずです。ハイパーリンク付きの電話番号が含まれます。

    デザイン スタジオのページにある取引先担当者の一覧のスクリーンショット。

    重要

    デザイン スタジオでは、標準テキスト コンポーネントを使用して Liquid に入力できます。 ページを保存して同期した後、Power Pages でテキスト コンポーネントが詳細なコンポーネントに変換されます。ここでは、その変更をインライン編集できないことを示しています。 コードの編集ボタンを選択すると起動できる Visual Studio Code エディターの Liquid コードに引き続きアクセスできます。

  5. プレビュー > デスクトップを選択します。 表示される Web ページには、「0 個のアカウントがあります」というテキストのみを含める必要があります。

    メモ

    この結果は、実行時に、データへのアクセスを許可するテーブルのアクセス許可レコードが存在しない限り、Power Pages がテーブル行へのアクセスを拒否するため、想定されたものです。

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

ページを参照している際に取引先担当者レコードの一覧を表示するには、テーブルのアクセス許可を追加する必要があります。

警告

この演習では、[取引先担当者] テーブルに対するグローバル読み取りアクセス許可をすべての訪問者に追加します。 セキュリティ構成をこのように設定することは一般的ではなく、デモ目的でのみ使用されます。

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

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

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

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

    • 名前 - 仕入先

    • テーブル - 取引先担当者テーブルを選択

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

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

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

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

  6. 保存を選択します。

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

    取引先担当者の一覧が表示されます。

    匿名参照セッション内の取引先担当者の一覧を表示する Web ページのスクリーンショット。