はじめに
Power Appsの3画面テンプレート(参照、詳細、編集/作成)をほとんどそのまま流用している手製アプリが社内で増えてきたのでデザイン方法について考えてみた。
こんな参考になるサイトがあったと上司がQiitaの記事を紹介してくれたのもデザインを気にするようになった理由のひとつだ。
編集フォームの仕組み
前提 :この記事ではデータソースとしてSharePointのリスト(Microsoft Lists)を接続しています。
Power Appsの編集フォームはグリッドレイアウトになっており、ある程度カスタマイズできるとはいえ表現力は貧弱だ。
こんな編集フォームには入力したくない。
個々のフィールドはDataCardというカードで構成されており、カードの下にはStarVisible、ErrorMessage、DataCardValue、DataCardKeyが用意されている。
DataCardValueはフィールドの種類によって異なり、テキストならばテキストインプット、選択肢ならばコンボボックス、ブール値ならばトグル、日付ならばデートピッカーになる。
これらの中で、DataCardの Update プロパティの値がデータソースに送られる。
DataCardの Update は初期状態ではDataCardValueの値と紐づいている。テキストならDataCardValue.Text
、選択肢ならばDataCardValue.Selected
と言った具合。
これによって入力されたテキストなどがSubmitFormでデータソースに送られるわけだ。
編集フォームと他コントロールを連動させる
ということは。
DataCardの Update に他のコントロールや変数を結びつけてやれば、入力欄を自由にデザインでき、かつ既存の編集フォームに値を与えてデータソースにデータを送ることができるのではないか。
最終的に編集フォームは非表示にしたり他のスクリーンに追いやったりしてしまえばいい。
目指す姿
ボタンを押すことでテキストインプットに定型文が入力されるシステムを作ってみる。
複数のボタンで OnSelect プロパティをSet(type,Self.Text)
とし、変数type
に文字列が格納されるようにする。この動的な文字列が編集フォームに自動入力されデータソースに送られることを目指す。
案1 失敗
- DataCardの Update を 変数
type
とする
でやってみよう。
おや、編集フォームに変数の値が記載されないぞ。
その一方でこの状態でもSubmitFormすると変数の値はデータソースに書き込まれている。
DataCardの Update はDataCardValueと紐づいていたが、それを変数に変えた。だからDataCardとDataCardValueのつながりが切れてしまったのだ。
編集フォームは見えない状態で運用するしデータは書き込めているのだからこれでいいじゃん、とは言えない。少なくとも開発中は書き込むべきデータがどうなっているのかを把握できるようにしておかなくては。
案2 成功
DataCardの Update が変数とつながっているのならば、逆にDataCardValueにDataCardの値を紐づけてやればよい。
- DataCardの Update を 変数
type
とする - DataCardValueの Default を
Parent.Update
とする
としてみれば。
よし、編集フォームに値が記載されたぞ。
もちろんこれをSubmitFormすると変数の値は正しくデータソースに書き込まれている。
案3 よりシンプルに成功
あらためて考えると
- DataCardValueの Default を 変数
type
とする
とするだけで良かった。
テキストフィールドのDataCardValueはテキストインプットだと書いたが、このコントロールには Text プロパティは存在せず Default プロパティに内容が格納されることに注意が必要だ。
終わりに
これを使えば、グリッドレイアウトに縛られることなく自由に入力欄をデザインすることができるであろう。
幸いエラーにはならなかったが、type
という変数名は予約語にありそうな感じで適切ではなかったな。