1. システムとオフィスの融合|株式会社QES
  2. media
  3. マイクロソフトソリューション Power Apps Power Platform Power Automate
  4. Power Apps Portal チュートリアル① ユーザー認証+問い合わせ画面の構築

QESブログ

Power Apps Portal チュートリアル① ユーザー認証+問い合わせ画面の構築

  • LINEで送る
  • このエントリーをはてなブックマークに追加



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

ソースコードを書くことなくアプリ開発できるローコードツール「 Power Apps 」には、社内外に向けて情報発信するためのポータルサイトを構築できる「Power Apps ポータル」という機能が含まれています。
(「Power Apps メーカーポータル」のことではなく、「Power Apps (で)ポータル(サイトを作る機能)」です)

この記事では、Power Apps ポータルで用意されている「スターターポータル」を利用して、ユーザー認証機能(画面)とお問い合わせ機能(画面)を持つポータルサイトを作る手順について、公式ドキュメントの内容+αをご紹介します。


Power Apps ポータルの特徴

「Power Apps ポータルとは」のような記事はWeb上に既にいくつも存在しているので、ここでは、 特に重要なもの または 最近更新されたもの をピックアップしてご紹介します。

  • Dataverseへのアクセス …社内外のユーザーが、Dataverseのテーブルに対してCRUD処理を実行できる
  • ユーザー認証 …組織内のユーザー/組織外のユーザー/匿名(未認証の)ユーザーに分けて、ページへのアクセスを制御したり、データ(Dataverseのテーブル)へのアクセスを制御したりできる
  • レスポンシブデザイン …Bootstrap 3.3(けっこう古い)を利用しており、PCでもモバイルでも最適なUIでコンテンツを表示できる
  • データの埋め込み …キャンバスアプリやモデル駆動型アプリのフォーム、Power BIのレポートといったアプリを埋め込むことで、データを表示できる
  • PWA(プレビュー) …Power Apps ポータルをプログレッシブ Web アプリとしてネイティブアプリと同じように「インストール」したり、オフライン環境で実行したりできる
     (PWAといえば PWA Builder (こちらもMicrosoft提供)なので連想しながらPower Apps ポータルのドキュメントを読んでいたら、やっぱりPWA Builderの記載がありました。アプリパッケージの作成等で連係して動くようです。)


事前準備?

Power Appsの試用環境(テナント)をお持ちでない方は、以下の記事の手順でご用意ください。



スターターポータルの構築

①まずは、Power Platform 管理センターから、環境(普段メーカーポータルの右上に表示されている『環境』)を新規作成します。言語や通貨の設定はデフォルトのままにします。

ppp-01.png



②環境が作成されたら、その環境に切り替えてから、「+作成」画面に移動します。「ポータルを一から作成」を開いて、名前やアドレスを入力したら「作成」ボタンをクリックします。 

ppp-02.png



③しばらく待っていると、メーカーポータルの通知欄に完了通知が表示されるので、メーカーポータルのアプリ一覧に移動します。

ppp-03.png


④種類が「ポータル」のアプリが作成されているので、「編集」メニューを開きます。

ppp-04.png


⑤ポータルの編集画面が開きます。

ppp-05.png


⑥右上にある「Webサイトの参照」をクリックすると、作成されたポータルサイトにアクセスできます。サンプルのコンテンツが表示されていれば完成です。

ppp-06.png


認証手順の確認


⑦続いて、ユーザー認証の手順とユーザーデータの格納先を確認します。ポータルの右上にある「サインイン」をクリックします。

ppp-06.png


⑧既定では、ローカルサインイン(ポータル専用のID/PW)または、Azure ADを利用した外部サインインのいずれかでサインインできるようになっています。今回は、Azure ADの方をクリックします。ポータルアプリの認証設定において、既定で「オープン登録」が有効化されているので、社内外問わず誰でもサインアップできます(無効化して招待制にすることもできます)。

ppp-07.png


⑨「承諾」をクリックします。

ppp-08.png


⑩プロフィールを入力して、「更新」をクリックします。

 ppp-09.png   ppp-10.png 


⑪右上にユーザーの名前が表示されるので、ユーザーとしてサインインしていることが確認できます。

ppp-10.png


⑫ユーザー情報は、Dataverseの「取引先担当者」テーブルに登録されます。先程入力したプロフィールとともにレコードが追加されていることを確認します。

ppp-12.png


問い合わせ機能の設定

⑬次に、問い合わせ機能の設定を行ってみます。お問い合わせ画面そのものはスターターポータルに含まれているのですが、フォームの設定がなされていないため、フォームの項目が何も表示されない状態になっています。

ppp-13.png


⑭ポータルアプリの編集画面から、「お問い合わせ」ページを開き、フォームコンポーネントを選択します。

ppp-14.png


⑮問い合わせされたデータを、Dataverseの既定で存在している「フィードバック」テーブルに格納するために、「フィードバック」テーブルを選択し、フォームレイアウトには、「simple contact us form」を指定します。そして、「テーブルのアクセス許可を管理する」をクリックします。

ppp-15.png


⑯「フィードバック」テーブルに対するアクセス許可を修正して、「書き込み」「作成」「削除」も行えるようにします。

ppp-16.png


⑰設定を済ませたら、ポータルのお問い合わせ画面を開いて、フォームの項目を入力してから「送信」をクリックします。

ppp-17.png


⑱送信完了したことを確認します。

ppp-18.png


⑲Dataverseの「フィードバック」テーブルに、レコードが追加されていることを確認できれば完成です。

ppp-19.png


まとめ

「Power Apps Portal チュートリアル」(連載予定)の第1回目として、Power Apps ポータルを利用して、ユーザー認証機能とお問い合わせ機能を持つポータルサイトを作る手順についてご紹介しました。組織内外でデータのやり取りを行うことができ、業務の効率化やコミュニケーションの活発化に役立てることができる便利なツールだと思います。

QESで提供開始しました Power Apps サポートサービス「サポート&アプリカタログサービス」でも、すでにお客様のPower Apps ポータル構築支援を行い始めています。Power Apps ポータル以外も含めたPower Platform製品を活用するうえで便利なサービスになっていますので、まずはお気軽にお問い合わせください。


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




このブログで参照されている、Microsoft、Windows、その他のマイクロソフト製品およびサービスは、米国およびその他の国におけるマイクロソフトの商標または登録商標です。

  • LINEで送る
  • このエントリーをはてなブックマークに追加

お気軽にお問い合わせください。

ページのトップへ