Power Apps ポータルの概要をまとめ

6月11日に行われたモデル駆動型勉強会で、お話したPower Apps ポータルの概要をブログにまとめておきます。


##Power Apps ポータルとは？
まずは、Power Appsポータルとは？ですが、Power Apps ポータルは、外部向けに公開できるウェブサイトを管理・構築できるサービスとなっています。
https://〇〇✕✕.powerappsportals.com/
という、ホスト名を自由な名前で作成して、URLでアクセスすることが出来るようになります。
入力フォームやビューをつかって、Dataverseへアクセスしたり、ログイン機能をつかって会員サイトなども構築することができます。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/140547/56f7a0c5-0f67-0dc8-1ea2-bd1c2f970d23.png)

■サンプルサイト「カエル区役所」
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/140547/ccc5dd88-ac46-40b5-1657-5a90875020cd.png)


##ポータルのアーキテクチャー
###モデル駆動型と、ウェブサイトの関係
Power Apps ポータルは自体はウェブサイトを構築する機能を提供しています。
その中で、入力フォームやデータの一覧表示機能などは、Microsoft Dataverseの「フォーム」や「ビュー」をHTMLページ内に埋め込むことができ、保存先のデータベースとして、Microsoft Dataverseのテーブルを利用します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/140547/e0a125e5-2655-1023-4428-8b0a2cc8e870.png)

###ウェブサイト（ページ）を構成する技術としては
・Liquid
・HTML5
・Javascript
・CSS
などが利用されています。

###Power Apps ポータルにおける認証
ログインには、ローカルアカウントを作成したり、外部アカウントを使用してログインも可能です。
ログインユーザは、Microsoft Dataverse の「取引先担当者」テーブルに関連付けられます。
https://docs.microsoft.com/ja-jp/powerapps/maker/portals/configure/configure-portal-authentication
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/140547/8ce358a9-f743-4a59-f87b-9d3560444127.png)

####■外部アカウントサービス一覧。
・Azure Active Directory
・Azure Active Directory B2C
・Facebook
・LinkedIn
・Google
・Twitter
・Microsoft
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/140547/f97d48ca-2116-2826-0428-a3c7b7f94a40.png)

####■ファイル添付機能について
ファイル添付を行いたい場合には、Dataverseの既存デーブルのメモ添付や、Azure Blob Storage、Share Pointを利用できます。
https://docs.microsoft.com/ja-jp/powerapps/maker/portals/configure-notes

####■ビジュアルデータの埋め込み
Power BIを利用してグラフや地図などを表示することも可能です。
https://docs.microsoft.com/ja-jp/powerapps/maker/portals/admin/set-up-power-bi-integration
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/140547/f903c097-4cb9-9f0e-7fac-f667a334da87.png)

##ポータルで利用する画面について
ポータルアプリを構成する画面は3つあります。
・ポータルStudio
・ポータル管理
・Power Apps portal admin center
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/140547/14a24622-1a4b-f741-8fcc-4e33da4583da.png)

###ポータル Studio
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/140547/10d0eb6d-c486-75ea-07ee-4f5319e3cef8.png)
ポータルアプリを作成すると、「ポータルStudio」の画面が表示されます。
こちらの画面では、Webページの作成・編集を、主にを行うことができます。HTMLのソースコードの表示も可能ですので、画面右のプロパティに表示されないスタイルシートやHTMLの変更もおこなうことができます。

####■フォーム
画面内に入力フォームを設置する場合には、Dataverseで作成した「フォーム」コンポーネントを指定してあげることで、設置することができます。

・ポータル Studioでの編集画面
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/140547/2747bb02-c21b-441a-936f-f954f7fdbe8c.png)
・ブラウザで表示すると
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/140547/68c8471f-888f-000e-e668-6f3f3bd38646.png)

■ビュー（一覧取得）
同様にDataverseのデータを表示したい場合には、ビュー（一覧取得）コンポーネントを指定してあげることで一覧表示が行えます。
一覧表示には、新規登録や詳細・編集・削除機能があります。フォームを作成して設定することで利用することが出来ます。

・ポータル Studioでの編集画面
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/140547/95f26f95-bb01-c3e2-3ada-c6f5334042ee.png)

・ブラウザで表示すると
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/140547/bb8edd90-6d4a-9981-ff94-516617f36ab1.png)

###ポータル管理
ポータルアプリを作成すると、自動的に作成されるモデル駆動型アプリです。
ウェブサイトに利用するサイトコンテンツや利用するフォーム類などの管理機能を設定編集できる画面です。Dataverseで作成したフォームやリストを、ポータルのページ内での使用するために、「基本フォーム」や「リスト」で設定をおこないます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/140547/d62ba307-9f11-0649-f7f9-aa4d3d3d1ab2.png)

###Power Apps portal admin center
Power Apps portal admin centerは、ウェブサービスの管理機能になります。基本URLの変更や、SSLの設定、サービスの再起動、SharePoint統合、Power BI統合の設定などが、こちらの画面から変更が行えるようになっています。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/140547/3d62f9fc-146e-4e8f-c20b-b6618c562d1e.png)


##最後に注意事項
・環境に１つだけしかポータルサイトは作れません。
・作成したポータルのトライアル環境の保存期限は30日。公開環境へ変換しないと削除されてしまいます。
・通常有償ライセンスが必要ですが、お勉強であればPower Apps Community Planで作成できます。