記事公開日 2022/03/10

最終更新日2025/04/11

Power Apps Portal チュートリアル④　Dataverseにアクセス

Power Apps ポータル

こんにちは。システムソリューション営業本部の吾妻です。

ソースコードを書くことなくアプリ開発できるローコードツール「 Power Apps 」に含まれる、ポータルサイトを構築するための「Power Apps ポータル」という機能について、連載でご紹介しています。

4回目となる今回は、前回用意したDataverseテーブルにあるデータを、ポータル上に表示できるように設定を行っていきます。
今回も「アプリカタログ」を題材に、ポータルをカスタマイズしていくことにします。

Power Appsのサポートサービスについて｜QESブログ
いつも大変お世話になっております。システムソリューション営業本部の原田と申します。この度、Power...

事前準備

Power Appsポータルの初期構築から基本的なテーブル構成については、前回までの記事をご確認ください。

Power Apps Portal チュートリアル①　ユーザー認証＋問い合わせ画面の構築｜QESブログ
こんにちは。システムソリューション営業本部の吾妻です。ソースコードを書くことなくアプリ開発できるロ...

ポータルアプリの編集（一覧画面）

Dataverseテーブルへのアクセスのうち、まずはCRUDのR（参照）から実装していくことにします。
画面としては、テーブル内のレコードを一覧表示する画面と、そこからリンクで遷移してレコードの詳細情報を表示する画面の2つになります。

①ポータルアプリの編集画面を開きます。

②「新しいページ」から、一覧画面用にページを1つ追加します。

③右側のパネルで、名前や部分URLを設定します。

④リストを追加する先の領域として、「1列のセクション」を挿入します。

⑤1列のセクションが選択された状態で、「一覧取得」を挿入します。

⑥「一覧取得」で、「新規作成」が選択されていることを確認し、名前、テーブル、ビューを指定します。今回は、Articleテーブルにアプリカタログの個々のページのデータを格納しているので、テーブルには「Article」、ビューには「アクティブなArticle」を指定しました。

⑦「アクティブなArticle」ビューは、デフォルトだとID列と作成日列程度しか表示しないので、Dataverseテーブルのビューのページから編集して、カスタム列の値も表示するようにしておきます。

⑧続いて、テーブルに対するアクセス許可を設定しておく必要があります。アクセスの種類は「グローバルアクセス」、特権は「読み取り」（CRUDの C / U / D を追加する場合はここも一致するように設定することになります）、ロールは「匿名ユーザー」（サインインしていないと見られないようにする場合は外します）「管理者」「認証されたユーザー」を設定して、保存します。

⑨「同期の構成」をクリックしてから「Webサイトの参照」をクリックして、Dataverseテーブル内のデータが一覧表示されていることを確認します。

ポータルアプリの編集（詳細画面）

引き続き、一覧画面から遷移してレコードを表示するための、詳細画面を用意していきます。

⑩「新しいページ」から、詳細画面用にページを1つ追加します。

⑪ページの名前と部分URLを設定したら、一覧画面の時と同様に1列のセクションを挿入して、その中に「フォーム」を配置します。

⑫フォームの名前、テーブルを設定したら、「モード」を「読み取り専用」に変更します。

⑬「記事一覧」ページに戻り、「一覧取得」の「詳細の表示」を有効にして、⑫で設定したフォームの名前を指定します。

⑭「同期の構成」をクリックしてから「Webサイトの参照」をクリックして、一覧画面から遷移した先の詳細画面で、Dataverseテーブル内のデータが表示されていることを確認します。

おまけ

「フォーム」の代わりに「ページ」として詳細画面を用意すると、Liquidテンプレートを利用してデータを表示することができるため、表現力が高くなります。

Dataverseテーブルのイメージ列／ファイル列に格納されたデータの読み出しは、Liquidのみでは対応できないため、今回はDataverse Web APIを利用しています。
イメージ列の3列については、「必須」項目にはしていないため、データが格納されていない場合でもエラーアイコン（

）が表示されないようにonerror属性でエラーを握りつぶすように指定しています。

{% assign id = request.params['id'] | escape %}
{% assign item = entities['cr9aa_catalogitem'][id] %}
<div class="row sectionBlockLayout" style="text-align: left; min-height: 100px; padding: 8px; margin: 0px;">
 <div class="container" style="display: flex; flex-wrap: wrap;">
 <div class="col-md-12 columnBlockLayout">
 <p>
 {% if item %}
 <h2>{{ item.cr9aa_name | escape }}</h2>
 <br><br>
 {{ item.cr9aa_body }}<br><br><br>
 <h3>リソース</h3>

 <a href="https://org8ce3606d.crm7.dynamics.com/api/data/v9.1/cr9aa_catalogitems({{ item.cr9aa_catalogitemid }})
/cr9aa_package/$value" target="_blank" download="package.zip">パッケージファイルをダウンロード</a>
 <br><br><br>
 <h3>ギャラリー</h3>
 <div class="container" style="width: 90%;">
 <div class="col-md-4 columnBlockLayout">

 <img src="https://org8ce3606d.crm7.dynamics.com/api/data/v9.1/cr9aa_catalogitems({{ item.cr9aa_catalogitemid }})
/cr9aa_image1/$value?size=full" style="max-width: 90%;" alt="" onerror="this.onerror = null; this.src='';" />
 </div>
 <div class="col-md-4 columnBlockLayout">

 <img src="https://org8ce3606d.crm7.dynamics.com/api/data/v9.1/cr9aa_catalogitems({{ item.cr9aa_catalogitemid }})
/cr9aa_image2/$value?size=full" style="max-width: 90%;" alt="" onerror="this.onerror = null; this.src='';" />
 </div>
 <div class="col-md-4 columnBlockLayout">

 <img src="https://org8ce3606d.crm7.dynamics.com/api/data/v9.1/cr9aa_catalogitems({{ item.cr9aa_catalogitemid }})
/cr9aa_image3/$value?size=full" style="max-width: 90%;" alt="" onerror="this.onerror = null; this.src='';" />
 </div>
 </div>
 {% else %}
 アイテムが存在しません。<br>
 {% endif %}
 </p>
 </div>
 </div>
</div>

まとめ

「Power Apps Portal チュートリアル」の第4回目として、Power Apps ポータルからDataverse内のデータにアクセスするための手順についてご紹介しました。次回の記事では、Power Apps ポータルのPWA対応についてご紹介する予定です。

他にも、Power Platform関連の記事があります。