Power Apps キャンバスアプリ内の閲覧画面へのディープリンク実装方法
Power Appsのキャンバスアプリで作成した申請アプリなどにおいて、
送付されるメールに記載されているアプリのURLをクリックした際に、一覧画面でなく特定のレコードの情報が表示された閲覧画面に遷移させたい場合があると思います。
こういった遷移は、"ディープリンク"というリンクを使用することで実現できます。
今回は、閲覧画面へのディープリンクの実装方法についてご紹介します。
実装イメージ
本記事で作成するアプリのイメージは以下の通りとなります。
なお、アプリに紐づくデータベースはSharePointリストを使用しています。
◆メールの例
◆メール本文に記載の"リンク"(ディープリンク)押下後に表示されるアプリ画面
実装方法
アプリの準備
今回使用するサンプルアプリは、Power Appsのキャンバスアプリを使用し、3つの画面で構成されています。
まずは、各画面が実装されたアプリを作成してください。
※ 画面の作成方法については割愛します。
Home Screen(一覧画面)
SharePoint Onlineリストの情報がデータテーブル形式で閲覧できる画面です。
画面右上の[新規作成]ボタンを押下すると新規作成画面に遷移し、データテーブル内の各アイテムを押下すると閲覧画面に遷移します。
New Screen(新規作成画面)
SharePoint Onlineリストに対して新たなアイテムを作成することができる画面です。
View Screen(閲覧画面)
Home Screenのデータテーブルで選択したアイテムの詳細を表示する画面です。
アプリURLの確認
後の作業で利用するため、作成したサンプルアプリのURLを確認して控えておきます。
Power Appsのホームページを開き、左メニュー内の[アプリ]をクリックします。画面中央にログインアカウントが作成したアプリの一覧が表示されます。
対象のアプリの「︙」をクリックし、[詳細]をクリックします。
アプリの詳細画面が表示されるので、[Webリンク]をコピーします。
フローの準備
今回実装するディープリンクは、申請時に通知されるメールに記載する形にします。
そのためのフロー(Power Automate クラウドフロー)を作成します。
以下は使用するフローの中身です。
まずは、PowerApps(V2)トリガーを設定し、申請したアイテムのIDを受け取るための設定をします。
※Number型を設定します。
次に、「変数を初期化する」アクションを2つ追加します。
※変数名は適宜変更してください。
1つ目の「変数を初期化する」アクションには、[アプリURLの確認]で控えたアプリのURLを設定してください。
2つ目の「変数を初期化する」アクションには、以下の値を設定してください。
※ 値の中にあるパラメーター(itemId)の部分は、別の文言でも問題ないですが、以降の手順にある"itemId"の部分もここで設定したパラメーターに直すことに注意してください。
@{variables('アプリのURL')}?itemId=@{triggerBody()?['text']}
最後の「メールの送信(V2)」アクションには、ディープリンクを挿入した本文を設定します。
本文入力欄の右上にある[<>]をクリックし、Html形式にしてから<a>タグを使い、ディープリンクを挿入していきます。
<p>申請者からxxについて申請を受理しました。<br>
お手すきの際に、承認処理をお願いいたします。<br>
<br>
▼アプリへのリンク<br>
<a href="@{variables('ディープリンク')}">リンク</a></p>
アプリの修正
準備したアプリの以下の部分を修正していきます。
1.App > StartScreenプロパティ
2.Home Screen(一覧画面)内のデータテーブルのOnSelectプロパティ
3.View Screen(閲覧画面)のOnVisibleプロパティ
4.View Screen(閲覧画面)内のフォームのItemプロパティ
5.New Screen(新規作成画面)内のフォームのOnSuccessプロパティ
まずは、アプリ内のApp > StartScreenプロパティに以下の関数を記載します。
この関数を記載することで、通常のアプリリンクを踏んで起動した場合は、Home Screen(一覧画面)に遷移します。
しかし、「アプリリンク?ItemId=1」のように、パラメーターを付けたリンクをクリックしアプリを起動した場合は、View Screen(閲覧画面)に遷移されるようになります。
If(IsBlank(Param("itemId")),'Home Screen','View Screen')
次に、Home Screen(一覧画面)内のデータテーブルにある各列のOnSelectプロパティに以下の関数を記載します。
この関数を入力することで、各レコードをクリックすると閲覧画面に遷移します。また、遷移先にitemコンテキストとして選択したレコード情報を渡します。
※ツリービュー内の列をCtrlを押したまま選択し、OnSelectプロパティに記入することで、選択したすべての列に関数が記入されます。
Navigate('View Screen',ScreenTransition.None,{item:DataTable1.Selected})
次に、View Screen(閲覧画面)のOnVisibleプロパティに以下の関数を記載します。
この関数を入力することで、ディープリンクから閲覧画面に遷移した場合は、リンク内のパラメーター(アイテムのID)を基にレコード情報をitemコンテキストに格納します。
If(IsBlank(item) && !IsBlank(Param("itemId")),
UpdateContext({item:LookUp(申請リスト,ID = Value(Param("itemId")))})
)
次に、アプリ内のView Screen(閲覧画面)にあるフォームのItemプロパティに以下の関数を記載します。
この関数を入力することで、ディープリンク経由で初回閲覧画面が表示された場合は、リンク内のパラメーターに設定したアイテムIDのレコードがフォームに表示されます。
Home Screen(一覧画面)から閲覧画面に遷移した場合は、データテーブルで選択したレコード情報がフォームに表示されます。
item
最後に、アプリから申請した際にフローを実行するための関数を追加します。
※前提として、アプリ内に本記事で作成したフローを接続してください。
New Screen(新規作成画面)のフォームのOnSuccessプロパティに以下の関数を記載します。
サンプル申請フロー.Run(Form1.LastSubmit.ID);
Navigate('Home Screen');
動作確認
アプリの編集画面を開いている状態で、F5キーを押下し再生モードに切り替えてください。
※アプリを保存+公開し、再生しても問題ありません。
まず、アプリ内の新規作成画面を開き、各項目を入力します。
次に、[申請]ボタンをクリックします。
ボタンを押下すると、一覧画面に遷移され、データテーブルにレコードが追加されたことがわかります。
正常にフローが動作していれば、フロー内の宛先に設定したアカウントにメールが届いているので、確認します。
最後に、メールの中にあるリンクをクリックします。
アプリの閲覧画面が表示され、フォームには対象のレコード情報が表示されていればOKです。
おわりに
今回は、Power Apps キャンバスアプリ内にある閲覧画面へのディープリンクの実装方法について紹介しました。
このディープリンクを実装することで、ユーザーの操作手順を削減することができます。
申請アプリなどを作成されている方は、ぜひ実装してみてください!
参考リンク
Discussion