Kilroy 365

Microsoft365 主にPowerPlatformについての備忘録

COVID-19 ワクチン接種記録アプリとギャラリーの時系列ビュー

f:id:KilroyWaaasHere:20210923014721p:plain

COVID-19ワクチン接種記録アプリ

Power Apps触ってると、やっぱりみんな作りますよね、ワクチン接種記録アプリ。
僕も半分遊びで作りましたが、なんやかんや自分で作ると記録するし、記録できてると色々気づくことが多いです。記録することって大事ですね！
ワクチンの接種記録アプリは用途がはっきりしてますし、記録をスマホで行うことになるので、Power Apps の自動作成アプリっぽいものが基本で、だいたいはそれに+αな感じのアプリになるのじゃないかな？と思いますが、ほかの人はどんなものを作った(作る)のか気になるところです。僕がつくったものも同様に特殊なものでなく、下記のような画面構成で、

  • TOP画面（なくても良いけど、雰囲気だけ）
  • 体調記録のギャラリー画面
  • 体調記録のフォーム画面
  • 接種データ記録のフォーム画面
  • グラフ表示画面（体温推移）
  • 体調記録の時系列ギャラリー画面

TOP画面のメニューもしくは、プルダウンメニューから各画面に行って記録および閲覧を行うシンプルなもの。
特に目新しい機能もないので、大半の解説は省略しますが、+αに当たる、ギャラリーの時系列ビューの作り方について書こうかなと思います。

時系列ビュー

ギャラリーは同じ構成を繰り返すという、特性がありますが、これがとても汎用性高いですよね。
一連の情報を表示するだけではなく、例えばメニュータブであるとか、同じ図形を連続で配置するようなものを作るときは図形をコピペしていくつも配置するより、ギャラリーに図形を埋め込んで連続表示させてやる方が手軽かつメンテ性もよいです。
この辺りは色々とユースケースあるので、知らなかった！という方は調べてみると見るといいかと思います。
今回作った時系列ビューもこの特性を活かし、ギャラリー内に配置した図形がレコード追加とともに積み重なり、タイムラインのように見えるようにしたもので、いたって簡単な作りですが、時系列をわかりやすく表示するにはとても効果的で気に入っています。
構造は以下の図のようになります。
f:id:KilroyWaaasHere:20210925014130p:plain
簡単ですね。四角形2つと円またはボタンコントロール2つの合計4つの図形をギャラリー内に配置してやるだけです。
上の図は縦方向のに時系列を表示する感じで、垂直ギャラリーに配置する例ですが、横方向に配置したい場合は水平ギャラリーに、90度回転したような感じに横向きに配置してください。
いずれの場合も、縦方向の場合は上の四角形の上端および下の四角形の下端、横方向の場合は左の四角形の左端、右の四角形の右端がそれぞれギャラリーのTemplateにピッタリくっつくように配置します。
また、テンプレートのパッディングが0より大きいと隙間ができ、連続したように見えませんので、０に設定します。

始点・終点の処理

上記のように図形を配置すると、図中赤で示した図形が連続することになりますが、時系列のポイントを円で表現していますので、始点及び終点は円から始まる形にすると、ここから始まった、ここで終わった、というのがわかりやすくなります。
そのために、図中に示したように、ギャラリーの最初・最後に表示されるアイテムを特定し、そのアイテムの場合、上または下の四角形が表示されないように処理してやることが重要です。

これはデータの構造やデータの絞り込み方(フィルターや並べ替えの条件)次第で条件を変えてやる必要があります。時系列表示なので、時間を条件にする場合が多いのかなと思いますが、時系列が登録順そのままのようなものは図中に示したようにIDの値で判断してもよいかと思います。(SharePointListなど登録順にIDが附番される場合)

気を付けるべきは絞り込みや並べ替えを行っている場合で、絞り込みや並べ替えを行い、出てきた結果に対して最初・最後の特定を行わなければいけないので、Min,Max関数はギャラリーにつけたのと同じ絞り込み・並べ替え条件を付けたデータソースに対して適用してやる必要があります。

最初・最後のレコードが明確に特定できれば良いので、例えば、従業員の異動履歴を表示するような場合、絞り込み・並べ替えを行ったレコードの最初のレコードにはおそらく入社、最後のレコードには退職を示すデータが入っていると思われますので、その場合はその情報を基に最初、最後を特定してやればよいので、必ずしもMin,Max関数を使用する必要はなく、条件に合わせてシンプルな特定方法を考えてやればよいと思います。

実装例➀

まずは今回のアプリの時系列ギャラリー。

最初・最後はシンプルに、IDで判別しています。
上の四角形のVisibleのコードは以下のようにしています。

If(ThisItem.ID=Min(Filter('COVID-19 ワクチン接種後体調記録',NumberOfShot=drpSC4.Selected.Value),ID), false , true )

『COVID-19 ワクチン接種後体調記録』というデータソースが元ですが、ギャラリー自体に接種回数で絞込をかけているので、その条件も同様に記述しています。　　

実装例②

次に、従業員の異動の履歴を時系列表示したものです。

こちらは、 上の四角形のVisibleを

If(ThisItem.Category.Value="入社",false,true)

のように記述しています。下の四角形では『入社』を『退職』としています。 絞り込みや並べ替えをした後にも、最初・最後が明確にわかる条件がある場合はそれを書いてやればシンプルになりますね。 なお、こちらはギャラリーの末尾でも退職していなければ四角形が消えないので、雇用関係の継続も見た目でわかる様になっています。

時系列ビューの作り方でした。