Morning Girl

Web API, Windows, C#, .NET, Dynamics 365/CRM etc..

PowerApps Portals で問い合わせページを作る ② 問い合わせ履歴一覧の構成

前回に引き続き、PowerApps Portals でお問い合わせページを作ります。

今回作るもの

前回は問い合わせフォームを作りましたが、今回はその問い合わせの履歴を表示する一覧画面を作りたいと思います。

こんな感じで過去に投稿した問い合わせが表示されます。また、件名をクリックすることで、詳細画面に移動するようにもしました。

f:id:sugimomoto:20190801232516p:plain

リストアーキテクチャを知る

問い合わせフォームを作成した記事のアーキテクチャ解説でも行っていましたが、リストも同じように実体はモデル駆動アプロ(CDS)のビューがベースになっています。

そのままビューで表示するように設定した項目や昇順・降順、項目の並びがそのままポータルの一覧(エンティティリスト)として反映されます。

f:id:sugimomoto:20190801232530p:plain

エンティティフォームと同様に、エンティティリストと関連付けられてWebページに表示することになりますが、一点大きな違いをあげるとすると一覧から移動できる詳細画面や編集画面のエンティティフォームも紐付けることができる点です。

このあたりを意識することで、エンティティフォームをいくつ作らなければいけないか? といった点が決まってきます。(すべてのCRUD操作を実現するのであれば、作成・更新・参照の3種類をエンティティフォームとして定義する必要があるということですね)

それ以外にも検索設定やカレンダービューなど、細かな機能はありますが、今回はとりあえずはシンプルな一覧画面を作りたいと思います。

事前準備

エンティティは前回作成した「お問い合わせ」エンティティをそのまま利用します

ビューは以下の「アクティブなお問い合わせ」をベースとしました。

f:id:sugimomoto:20190801232604p:plain

詳細画面も今回表示するようにしますが、使用するフォームは入力フォームとして使ったものと同様のフォームを再利用します。ただし、エンティティフォームとしてのレコードは別になるので注意しましょう。

f:id:sugimomoto:20190801232616p:plain

一覧画面の作り方

それでは、PowerApps Portalsデザイン画面で問い合わせ履歴ページを作成していきます。

ただ、一覧画面を作る前に、一覧画面から移動できる詳細ページを作成しておく必要がありますので、まずそれを最初に済ませます。

作り方は基本的に問い合わせフォームと同じです。前回と同様に新しいページから「空白のページ」を追加し

f:id:sugimomoto:20190801232625p:plain

任意の名称や部分URLをつけたあと、コンポーネントとしてフォームを配置

f:id:sugimomoto:20190801232636p:plain

エンティティやフォームレイアウトは問い合わせフォームと同様ですが、「モード」の項目では「読み取り専用」を選ぶことに注意しましょう。

f:id:sugimomoto:20190801232643p:plain

これで詳細画面の準備はOKです。

それでは次に一覧画面です。同様に新しいページから「空白のページ」を追加し

f:id:sugimomoto:20190801232650p:plain

任意のページ名、部分URLを設定します。

f:id:sugimomoto:20190801232658p:plain

今度は「コンポーネント」から「一覧取得」を配置します。

f:id:sugimomoto:20190801232705p:plain

一覧取得の設定は「新規作成」を選択した状態で、任意の名称を入力の上、お問い合わせエンティティとアクティブなビューを選択します。フォームの時と同様に、裏側ではこの入力でエンティティビューが自動的に作成され、次からは「既存のものを使用」で選択できるようになります。

併せて詳細画面用としてWebページから先程作成した詳細ページを指定します。

f:id:sugimomoto:20190801232710p:plain

これで一覧画面が作成できました。

Webページにアクセスすると、以下のように表示されることが確認できます。また、件名をクリックすることで詳細画面に移動できます。

f:id:sugimomoto:20190801232719p:plain

終わりに

基本的な作り方はお問い合わせフォームと変わりませんが、リストの場合は詳細画面用などとして別途ページが必要になる点に注意する必要があります。

今回は加えませんでしたが、更新用のページを作れば、それをリストを紐付けて、更新画面に仕上げることも可能です。

さて、次回は権限周りを見ていきます。今のままでは問い合わせをした人たちが全部共有できる状態となっているので、セキュリティ上怖いですよね。このあたりの制限の仕方を確認していきます。

Tips① ダイアログ表示

以下のように「対象の種類をWebページではなくフォームにした場合」

f:id:sugimomoto:20190801232731p:plain

こんな感じでダイアログ表示になります。この場合、Webページは不要で、エンティティフォームを直接指定することになります。

f:id:sugimomoto:20190801232738p:plain

Tips② 検索ボックスを追加したい

検索ボックスは2種類存在します。

一つは表示項目全体を検索する検索ボックス。以下のような感じですね。

f:id:sugimomoto:20190801232749p:plain

これはエンティティリストの詳細設定にある「エンティティ リストでの検索を有効にする」で設定可能です。

f:id:sugimomoto:20190801232756p:plain

もう一つは、各項目に対して個別に検索ボックスを設けるタイプ。

f:id:sugimomoto:20190801232806p:plain

これはポータル管理からエンティティリストのメタデータフィルターから追加できます。

f:id:sugimomoto:20190801232816p:plain