LoginSignup
23
17

Power Apps のフォームコントロールで躓いてしまわないために

Last updated at Posted at 2023-02-06

はじめに

Power Apps のフォームコントロールを利用すると、データの入力、編集、参照といったフォームを簡単に作成することが出来ます。

例えば、以下は休暇申請用に用意した SharePoint リストですが、Power Apps でフォームコントロールを配置し、データソースに指定すると、列の項目を踏まえ、自動で入力フォームを作成してくれます。
個人的にとても便利だと思いますし、初めて利用したときは、ちょっと大げさかもですが、魔法のようだとすら感じました。

image.png

image.png

そのため、特に最初のうちは、フォームコントロールを利用することが多いと思います。
しかし、とは言っても、初めて触る際、「ここから何をすればいいの?」、「こういうことをしたいけどどうするの?」といった疑問が沢山出てくるというか、場合によっては躓いてしまう方もいると思います。

正直、ここで躓いてしまい、「ローコードとは言っても私にはやっぱり難しい」と感じでしまい挫折してしまう、あきらめてしまうことになってしまったらとても残念ですし、そんな方を少しでも減らしたいと思っています。

そのため、今回は、フォームコントロールを利用してデータの送信が完了するまでに躓きそうなことについて説明いたします。

少しでも、Power Apps を利用した (特に最初の) アプリ作成の助けになれば幸いです。

変更できない (ロック解除)

手始めに、以下の Title という列について、利用者の方にとってちょっと分かりにくいので変更してみたいと思います。しかし、式の箇所をクリックしても反応しません。

image.png

「何か私のやり方がおかしいのかな?」とすら感じてしまうかもしれません。
実は、フォームコントロールを利用して自動でフォームを作成した場合、初期段階では、列ごとに、誤って変更がされて動作しなくなくなることを防ぐためにロックがされています。

そのため、変更したい部品ごとに以下のようにしてロックを解除する必要があります。
これにより、部品の各設定を変更可能になります。

image.png
image.png

何もデータが出てこない

Power Apps では、アプリを作成している段階で、アプリを実行 (プレビュー実行) してみることが出来ます。リリースする前はもちろん、作成途中でここまでは想定した通りに動作するかなど確認する際に頻繁に利用します。

image.png

しかし、試しに実行してみたところ、以下のように、「表示するアイテムがありません」といったメッセージが表示されてしまいます。これは本当に困惑すると思います。

image.png

実は、フォームコントロールは、既定では、「編集」モードになっています。モードは3 つあり、基本的にそれぞれ以下の用途で利用します。

モード 用途
新規 新規にデータを登録する際
編集 既存のデータを編集する際
ビュー 既存のデータの詳細を表示する際

つまり、新規にコントロールを追加してプレビュー実行すると、編集する対象のデータが指定されていないため、上記のような結果となってしまいます。

image.png

そのため、モードを「新規」に変更します。こうすることで、プレビュー実行した際にも、以下のようにデータを入力することが出来ます。

image.png

一つのフォームコントロールでモードを切り替えながら利用することも可能です。こちらについては、以下の記事を参考にしていただければと思います。

列数を変えたい

一旦、上記画像のように入力するフォームにはなったものの、もう少し細かく変更をしたい場合が多いというかほとんどか思います。

例えば、現時点で入力項目は 3 列となっていますが、これを変更したい場合があると思います。
こちらは、以下の箇所で変更可能です。

image.png

変更したところ 2 列になりました。

image.png

列を追加、削除、順番を変えたい

 
既定で表示された列について、これはアプリの利用者に入力させる必要はないといったものもあったり、逆にこれを追加したい、順番を変えたいといったことがあると思います。
こちらは、以下の箇所から変更可能です。

image.png
image.png

以下のように、不要な列は削除したり、ドラッグ&ドロップで順番を変えることが出来ます。

image.png

また、一度削除してしまったもの含め、フィールドを追加することが出来ます。

image.png

今回は以下のような列のみ残したり順番を変えてみたりしました。

image.png

各部品のサイズを変えたい

既定で表示された部品のサイズを変更したい場合ももちろん発生すると思います。
例えば、今回のケースですと、備考の欄の幅を大きくしたいといった感じです。場合によっては逆に幅を小さくしたい (一度大きくし過ぎてしまった後) といったこともあると思います。

image.png

このような際、何かいい感じにサイズが変更できない、と感じたことがる方もいると思います。
こちらについて、恐らく、フォームコントロールの各部品について、実は入れ子構造になっていることが関係して思います。

image.png

イメージとしてはこんな感じです。最初は少し慣れないと思いますが、慣れてくると、サイズの調整含め、ちょっとした変更も容易に出来るようになると思います。

image.png

そちらを踏まえ、サイズを大きくする時は、まず、外枠 (DataCard) を選択し、サイズを広げます。

image.png
image.png

その後、内枠 (DataCardValue) を選択して、サイズを広げます。

image.png
image.png

テキスト入力で複数行入力にしたい場合は、モードを [単一行] から [複数行] の変更します。

逆にサイズを小さくしたい場合は、まず内枠 (DataCardValue) から小さくしてから外枠 (DataCard) も小さくします。

image.png
image.png

利用者に変更させたくないが、データの登録はしたい

例えば、以下の項目で言うと、ステータスについて、申請があった時点では、必ず「新規申請」にしたいといった場合があると思います。しかし、今のままだと、誤って他のステータスに変更される可能性があります。
いきなり、上司承認済みとかになったら嫌ですよね。

image.png
image.png

この場合、既定値を設定する、アプリ利用者には見えないようにするといったアプローチで実現することができます。

既定値を設定する

まず、既定値の設定方法について、データソースや列の種類 (例えば、テキスト型なのか、選択肢列なのか) によっても変わります。

今回は、SharePoint リストで、以下のような選択肢列を使用しているため、[DefaultSelectedItems]の値を以下のようにすることで既定値を設定することが出来ます。

image.png
image.png

SharePoint リストの列の種類ごとの既定値の設定方法については、こちらのサイトが参考になると思います。(いつもお世話になっています)

特に、ユーザーまたはグループ列について、組織のユーザーを検索でき、名前の入力ミスを省けたり、やり方次第では手動入力の手間を省けるため、非常に便利なのですが、既定値の設定の仕方に癖があるので、SharePoint リストベースでアプリを作成することが多い場合は、上記サイトをお気に入りにしておく、組織で共有するのが良いかと思います。

image.png

特定の列をアプリ利用者には見えないようにする

既定値が設定できたため、こちらの項目について、アプリ利用者から変更されないよう、表示をオフにします。
こうすることで、アプリ利用者は特に入力していないにもかかわらず、データ自体は登録される (今回の場合は、必ず新規申請のステータスで) という動作になります。

image.png

実際にやってみます。

image.png

アプリ利用者は何も入力していませんが、ちゃんと新規申請ステータスになっています。

image.png

データを入力必須にしたい

データソース側で入力必須にしていることが望ましいですが、データソース側の設定に関わらず、アプリ上入力必須にしたい項目は、以下の [Required]プロパティを true にすることで入力必須にできます。

image.png

必須項目が未入力のままデータの送信を使用とすると、以下のようなエラーが表示されます。

image.png

SharePoint リストで列名を日本語で作成していると、以下のようにエラーメッセージに内部名が表示されてしまうため、[Text]プロパティを変更します。
image.png

列名を一旦英語で作成するという点については以下の記事を参照ください。

SharePoint リスト側で列の入力を必須にする設定は以下の箇所です。

image.png
image.png
image.png

データを送信したら、アイテムが表示されなくなった

データの送信について、例えば、以下のようにボタンを追加し、ボタンの [OnSelect]プロパティ(ボタンを押した際に何をするかを記述するプロパティ)にて、以下のような式を書くことで実現できます。

SubmitForm(Form1)

※SubmitoForm(フォームコントロールの名前)

image.png

しかし、実行後、以下のような画面になってしまいました。「一度入力できたけど入力できなくなった」と感じてしまうと思います。

image.png

実は、SubmitForm でデータの登録が成功すると、フォームのモードが編集になってしまいます。

そのため、以下のように、フォームコントロールの [OnSuccess]プロパティ (データの送信に成功した場合に実行する処理)に、NewForm(フォームコントロールの名前) という式を記述します。

image.png

Notify という関数を使って、アプリ利用者にメッセージも出してあげると親切かと思います。

ついでに、 [OnFailure]プロパティ (データの送信に失敗した場合に実行する処理) に以下のように記述しておくと良いかと思います。

image.png

上記を実装することで、以下のように、データの送信に成功した場合に入力内容がクリアされます。

image.png

まとめ

今回は、フォームコントロールを利用してデータの送信が完了するまでに躓きそうなことについて説明いたしました。いざ書いてみると、思ったより結構ありましたね。。
今後、他にも思いついたら追記しようと思いますが、少しでも何かのお役に立てる内容であれば幸いです。

23
17
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
23
17