前置き
職場で下図左のような勤務連絡アプリを作成しました。（勤務開始時間と勤務場所を選択してTeamsに投稿するシンプルなアプリ）
これを展開したところ別々の人から次のような要望が上がってきました。
- Aさん：勤務終了予定時刻も選択できるようにしたい。
- Bさん：勤務開始時に体温を連絡できるようにしたい。
- Cさん：Teamsじゃなくてメールで連絡できるようにしたい。
下図右のようにすれば全員が望む機能を実現できますが、勤務開始時間と場所だけ連絡できれば良い自分にとっては不要なボタンが多くなって使いづらくなくなってしまいます。何より美しくありません。
そこで、使う人にとって必要な機能（コントロール）だけを表示できるようにしたいと思います。
表示切替の実現方法を考えてみる
1.全パターンの画面を用意して切り替える
もっとも単純な方法ですが、パターンの組み合わせの数（今回の場合は8）だけ画面を作成する必要があります。また画面内のコントロールの内容を変更する際には同じコントロールをコピペした他の画面のコントロールも変更する必要がありメンテナンス性に欠けます。
パターンは今後も増えていく可能性があるのでこの方法は却下します。
2.設定に応じて各コントロールのVisibleを切り替える
PowerAppsのコントロールにはVisibleというプロパティがあり、デフォルトではtrueになっていますが、これをfalseにすることで非表示にすることができます。
①まずトグルボタンを作成し、Toggle_Vitalという名前にします。
②Toggle_VitalがONなら表示、OFFなら非表示としたいコントロールのVisibleプロパティを下記のように記述します。
If(Toggle_Vital.Value,true,false)
同様にもう1つトグルボタンを作成し、そのON/OFFに応じてVisibleを切り替えるようにすることで、下図のように設定に応じて必要なボタンだけを表示させることができるようになります。
一応これで出来たと言えなくもないですが、非表示にした部分が空白になっていて見た目的に少し不格好です。できれば空白部分は詰めて表示したいので、もうちょっと良い方法を考えてみます。
3.設定に応じてDataCardのVisibleを切り替える。
PowerAppsで、挿入⇒新しい画面⇒スクロール可能を選択して画面を作成すると、デフォルトでCanvasという部品が用意されており、その中にDataCardという部品が入っています。このDataCardは編集画面上のセクションの追加を押すことでいくつでも増やすことができます
DataCard内には下図の通り複数のコントロールを格納することができます。また他のコントロール同様、DataCardもVisibleプロパティがあり表示非表示を切り替えることができ、さらに以下の特徴があります。
- Disableの場合、DataCard内に格納したコントロール全て一括で非表示になる
- Disableの場合、
高さが0になる
つまり設定によって表示非表示を切り替えたいコントロールをDataCard単位でまとめ、DataCardのVisibleプロパティを設定に応じて切り替えることで、非表示部分の空白のない表示切替えを実現できます。
各コントロールのVisibleを切り替えた場合と比較すると、非表示プロパティ部分の不自然な空白がなくなりすっきりしました。また設定に対応して表示/非表示を切り替える部品がDataCard単位でまとめられているのでメンテナンスしやすいというメリットもあります。