0
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

Power Appsの編集フォームを自由にデザインする

Posted at

はじめに

Power Appsの3画面テンプレート(参照、詳細、編集/作成)をほとんどそのまま流用している手製アプリが社内で増えてきたのでデザイン方法について考えてみた。
こんな参考になるサイトがあったと上司がQiitaの記事を紹介してくれたのもデザインを気にするようになった理由のひとつだ。

編集フォームの仕組み

前提 :この記事ではデータソースとしてSharePointのリスト(Microsoft Lists)を接続しています。

Power Appsの編集フォームはグリッドレイアウトになっており、ある程度カスタマイズできるとはいえ表現力は貧弱だ。
こんな編集フォームには入力したくない。

grid.png

個々のフィールドはDataCardというカードで構成されており、カードの下にはStarVisible、ErrorMessage、DataCardValue、DataCardKeyが用意されている。
DataCardValueはフィールドの種類によって異なり、テキストならばテキストインプット、選択肢ならばコンボボックス、ブール値ならばトグル、日付ならばデートピッカーになる。

datacard.png

これらの中で、DataCardの Update プロパティの値がデータソースに送られる。
DataCardの Update は初期状態ではDataCardValueの値と紐づいている。テキストならDataCardValue.Text、選択肢ならばDataCardValue.Selectedと言った具合。
これによって入力されたテキストなどがSubmitFormでデータソースに送られるわけだ。

編集フォームと他コントロールを連動させる

ということは。
DataCardの Update に他のコントロールや変数を結びつけてやれば、入力欄を自由にデザインでき、かつ既存の編集フォームに値を与えてデータソースにデータを送ることができるのではないか。
最終的に編集フォームは非表示にしたり他のスクリーンに追いやったりしてしまえばいい。

目指す姿

ボタンを押すことでテキストインプットに定型文が入力されるシステムを作ってみる。
複数のボタンで OnSelect プロパティをSet(type,Self.Text) とし、変数type に文字列が格納されるようにする。この動的な文字列が編集フォームに自動入力されデータソースに送られることを目指す。

toggle.gif

案1 失敗

  • DataCardの Update を 変数type とする

でやってみよう。

toggle_ng.gif

おや、編集フォームに変数の値が記載されないぞ。
その一方でこの状態でもSubmitFormすると変数の値はデータソースに書き込まれている。

DataCardの Update はDataCardValueと紐づいていたが、それを変数に変えた。だからDataCardとDataCardValueのつながりが切れてしまったのだ。

編集フォームは見えない状態で運用するしデータは書き込めているのだからこれでいいじゃん、とは言えない。少なくとも開発中は書き込むべきデータがどうなっているのかを把握できるようにしておかなくては。

案2 成功

DataCardの Update が変数とつながっているのならば、逆にDataCardValueにDataCardの値を紐づけてやればよい。

  • DataCardの Update を 変数type とする
  • DataCardValueの DefaultParent.Update とする

としてみれば。

toggle_ok.gif

よし、編集フォームに値が記載されたぞ。
もちろんこれをSubmitFormすると変数の値は正しくデータソースに書き込まれている。

案3 よりシンプルに成功

あらためて考えると

  • DataCardValueの Default を 変数type とする

とするだけで良かった。
テキストフィールドのDataCardValueはテキストインプットだと書いたが、このコントロールには Text プロパティは存在せず Default プロパティに内容が格納されることに注意が必要だ。

終わりに

これを使えば、グリッドレイアウトに縛られることなく自由に入力欄をデザインすることができるであろう。

幸いエラーにはならなかったが、type という変数名は予約語にありそうな感じで適切ではなかったな。

0
0
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
0
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?