コルネの進捗や備忘録が記されたなにか

進捗や成果物や備忘録てきななにかを雑に更新していきます。

特定のデータの詳細画面を表示する

Power Apps

スポンサードリンク

はじめに

Power Apps でSharePoint リストやDataverse などからアプリを作成できることは皆さんご存じでしょうか？

上記のデータソースをもとにアプリを生成することで以下のような3画面を生成することができます。

一覧画面
f:id:koruneko:20210614221539p:plain

詳細画面
f:id:koruneko:20210614221804p:plain

編集画面
f:id:koruneko:20210614221852p:plain

今回は通常のリンクを開いたときは、"一覧画面"を表示させ、特定の方法から開いたときは、"特定レコードの詳細画面"を表示させるようにしたいと思います。

アプリの作成

SharePoint リストをもとにアプリを作成する

今回は簡単にSharePointリストをもとにしてアプリを作成したいと思います。
作成方法がわからない方向けに、簡単に作成方法を纏めます。
作成方法がわかっている方はこの章を飛ばしてください。

作成方法は大きく分けて2パターンあります。
まずは、SharePoint 側から作成する方法。

  1. もとにしたいSharePoint リストを選択して、 統合 > PowerApps > アプリの作成 を選択します。
    f:id:koruneko:20210614222946p:plain

  2. 適当なアプリ名を入力して作成を押します。 f:id:koruneko:20210614223444p:plain

これだけで、アプリが作成できます！簡単ですね！！

続いてPowe Apps から作成する方法です。

  1. 新しいアプリ > キャンバス を選択します。

  2. SharePointを選択して、もとにしたいSharePointリストを選択します。
    f:id:koruneko:20210614223653p:plain

こちらもたったこれだけでアプリが作成できます！

両者の(個人的な)欠点としては、レイアウトが"携帯電話レイアウト"しか選べない点ですかね。
個人的には"タブレットレイアウト"も選べるようになるといいんですがね。。。
設定から"タブレットレイアウト"に変更も可能ですが、ここから変更すると X や Width に設定してある式が解除されて固定値になっちゃうんですよね。。。面倒くさい。

アプリの開き方によって表示する画面を変更する

アプリの開き方によって表示する画面を変更する。ということを実現するために、アプリを開いたときに渡すパラメータを変えれば条件分岐を行うことができます。

Power Apps でアプリを開くときにパラメータを渡すには、Param 関数を利用すればよいです。

Param 関数とは

Param 関数は、アプリに渡されたパラメーターをアプリの起動時に取得します。 名前付きパラメーターが渡されていなかった場合、Param は 空白 を返します。

です。

Param 関数の使い方は、Yellow さんが纏められているParam関数で外部から値を受け取り、アプリを制御するを参考にしてください。

今回は画面遷移するだけでなく、特定のレコードの詳細画面を表示した画面を表示させたいと考えています。

詳細画面("DetailScreen1")は、どうやって特定レコードの詳細画面を表示しているのか実際の画面をみて確認してみます。

詳細画面でレコードの情報を表示しているのは、"DetailForm1"というフォームです。
こいつの Item をみてみると、 BrowseGallery1.Selected となっていますので、どうやら "BrowseScreen1" のギャラリーで選択されたレコードをここでは表示しているようです。

今回ここの処理は変えずに、また干渉せずに、追加の処理を記載するだけでやりたいことを実現させようと思います。

処理を変えずに。ということなので、素直に表示させたいレコードのあるギャラリーを選択することにしたいと思います。
ギャラリーの特定レコードを選択するために、Select 関数を用いたいと思います。

Select( Control, Row or column) とすることで、"Row or colum"番目のレコードを選択することができます。

この番号は今回、SharePoint リストにて連番がつけられる ID を用いて判断したいと思います。

ちなみに ID とはSharePointリスト作成時に設定される項目で、列の種類は"カウンター"になっています。

f:id:koruneko:20210615000731p:plain

ただ、そのまま ID を利用すると、レコードが途中で削除されたときに困ってしまうので

CountRows(Filter(BrowseGallery1.AllItems, ID <= Value(Param("_ListID"))))

として、対象レコードが何番目のレコードなのかを判断するようにします。

さて、ギャラリーを選択するためにSelect 関数を用いるわけですが、このSelect 関数は対象コントロールが同一画面に存在しないと実行することができません。
つまり"BrowsScreen1"内に設定しなくてはいけないので、 App.OnStart には設定できません。

また、ギャラリーを選択するわけですので、ギャラリー内にアイテムがセットされている必要があります。

これらの条件を満たせるように設定を行っていきます。

まず画面遷移を行う条件を再度確認すると、

  • Param が設定されている場合
  • ギャラリーにアイテムが設定されている場合

です。

これらの条件を満たすときに画面遷移。としたいので、トグル(切り替え)コントロールを利用します。

トグルの Default に以下を設定して、上記の条件を式で表します。

Toggle1.Default

!IsBlank(Param("_ListID")) && !IsEmpty(BrowseGallery1.AllItems)

このトグルが true になったとき。つまりチェックされたときギャラリーを選択して画面遷移を行いたいので、 OnCheck に以下を設定します。

Toggle1.OnCheck

Select(BrowseGallery1, CountRows(Filter(BrowseGallery1.AllItems, ID <= Value(Param("_ListID")))));

これでギャラリーのN 番目の項目を選択したことになりますので、ギャラリー内の OnSelect が動作し、"DetailScreen1"へ画面遷移を行います。

動作確認

アプリ保存 / 公開後、アプリの詳細を開き、Web リンクをコピーします。

https://apps.powerapps.com/play/アプリID?tenantId=テナントID

となっているやつです。

まずはこれに直接アクセスしてみたください。

"一覧画面"が表示されたかと思います。

続いて先ほどのリンクにパラメータ値を設定して、開いてみます。

https://apps.powerapps.com/play/アプリID?tenantId=テナントID&パラメータ名=値

先ほど作成したアプリですと、

https://apps.powerapps.com/play/アプリID?tenantId=テナントID&_ListID=2

となりますね。

こちらのリンクからアプリ開いてみると2番目のレコードが表示されたかと思います。(ID = 1を削除していなければ。)

おわりに

この処理を活用することで、承認フローなどで、申請内容の詳細をPower Apps で表示するためのリンクを作成したりすることが可能です。

ただし今回のやり方には1つ欠点があります。
それは、一瞬"一覧画面"が表示されてしまうという点です。

そのぐらいであれば、別に気にしない。と割り切れるのであればよいですが、そうでない場合何らかの工夫が必要になってきます。


スポンサードリンク