Param関数を使いPower Apps キャンバスアプリの任意のページを表示させる

向井です。

今回は**Param関数を使いPower Apps キャンバスアプリの任意のページを表示させる方法**について書きたいと思います。
Power Appsでパラメーターを渡すには**Param関数**を使用します。
https://docs.microsoft.com/ja-jp/powerapps/maker/canvas-apps/functions/function-param#param

#0. 想定シナリオ
まず今回の想定シナリオを簡単に説明します。
Power Platformで申請・承認アプリを作成するときの大まかな流れとしては、何かしらの申請がPower Apps上から行われ、Power Automateの「承認」によって承認がおこなわれる流れが一般的です。

こちらの記事に簡単にその流れを書いておきました。
https://qiita.com/kumukai/items/94a5c49697f079c3a912

承認のアダプティブカードは承認者のTeamsに送ることができますが、その際にPower Appsのリンクを添付して送ることができます。承認者が添付のリンクをクリックすると通常はPower Appsのトップページが表示されますが、**トップページ以外の任意のページを表示させる方法**をご紹介します。
たとえば、承認者に該当の申請内容が表示されたページへの直リンクを送ることで、承認者は申請の一覧から該当の申請を探すことなく、申請の内容を確認することができます。


#1.事前準備
Power Appsで承認用のアプリを作成します。

Screen1にギャラリーを設置します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1004488/24063b12-c25e-c4b5-3e09-f3f64e6d9b4a.png)

ギャラリー内の＞ボタンを選択して、
OnSelect=Navigate(Screen2)
と書いておきます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1004488/1a70e49e-96cf-e1e4-31a5-ad975dac1caa.png)


Screen2にフォームを設定し、Screen1で選択されたレコードを表示するようにします。
フォームを選択して
Item=Gallery1.Selected
と書くと、Gallery1で選択されたレコードが表示できます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1004488/12e49bc5-5d43-6de9-e94c-c9979bccb7cc.png)



#2.Param関数のテスト
ここで実際の動作をさせる前に簡単にParam関数の動きをテストしてみたいと思います。

ツリービューでAppを選択し、
OnStart=Set(recordId,Param("recordId"))
と入力します。
※AppのOnStartに関数を書くと、アプリを起動したときに式の内容を実行します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1004488/8be5b5c3-da4a-e6a8-15ef-9648d7ad4656.png)

これでrecordIdというパラメーターがアプリ起動時にアプリに渡され、recordIdというグローバル変数に代入されます。

ラベルを適当な位置に追加し、
Text=recordId
と入力してアプリを保存、公開します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1004488/576cf22e-4694-85e8-7e0b-bddda7621231.png)

ここで、アプリのURLをメモ帳などにコピーしておいてください。

保存＞公開＞共有で下の画面が出せます。
Webリンクをコピーしておいてください。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1004488/43143730-75cd-9bd6-4bd3-422eef65f478.png)


新しいタブを開き、アドレスバーにアプリのURLをペーストし、その後ろに
?recordId=1234
と入力し、エンターキーを押します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1004488/a45f0089-b27d-249c-7fda-359ee70c2ed8.png)


下の画像のようにアプリが起動し、ラベルにパラメーターで渡した1234が表示されていることが確認できます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1004488/c2d54743-da4f-a311-1356-cacbf480e36b.png)
このようにParam関数を使うと、URLに記載したパラメーターによってアプリの挙動を変えることができます。

#3. 任意のページを表示する
今回のアプリは起動すると通常はScreen1の申請の一覧(Gallery)が表示されます。
Galleryから任意のレコードを選択するとScreen2の申請の詳細情報(Form)が表示される作りになっています。
ここで、Screen1を経由させずにScreen2の詳細情報を表示させたいとします。
それぞれのレコードにはGUIDというそのレコードを特定できるIDが振られています。
このGUIDをパラメーターとして渡すことで特定のレコードのFormに直接アクセスさせることができます。

###準備：GUIDを調べる
GUIDを調べる方法は複数ありますが、今回は簡単のため、フォームに表示させることにします。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1004488/081f22ff-ee3f-b16d-f7c3-28800f3614ee.png)

追加ができたらアプリを再生して表示したいレコードのGUIDをコピーします。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1004488/ff03dcc1-8b3a-bceb-6008-eac32242bbb1.png)

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1004488/8d56dde8-72ae-1843-d5e5-ad7f04c4253a.png)

###設定
このコピーしたGUIDをパラメーターとして渡されたときは、そのレコードの詳細画面を、パラメーターを渡されなかった場合は通常通りScreen1を表示するように設定していきます。
AppのOnStartに
If(!IsBlank(Param("recordId")),Set(recordId,Param("recordId"));Navigate(Screen2))
と書きます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1004488/4fd600df-b798-3f12-0adc-f80f5a7b0426.png)

アプリを保存、公開し、テストを行います。

###テスト
新しいタブを開き、アドレスバーにアプリのURLを入力します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1004488/81b32fbf-e491-9823-4fbf-6524509bbb42.png)

パラメーターを渡していないので、Screen1の申請一覧が表示されます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1004488/20c84c5d-e191-bf16-ceba-6f1b9daaa49a.png)


次に、新しいタブを開き、アドレスバーにアプリのURLとパラメーターを入力します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1004488/19489d96-596c-256f-623a-df1647306621.png)

対象のレコードを表示することができました。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1004488/65036226-cc0f-f62f-c084-21975ef7910e.png)


今回はParam関数の使い方をご紹介しました。
Power Automateと組み合わせることで冒頭に紹介したようなシナリオも実現可能です。