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


# はじめに

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

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

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3074511/b0b2eea0-1f68-7dfb-ec2c-5296e7af4783.png)

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3074511/49d373b0-9a08-37b6-2814-44f3f574c85a.png)

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

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

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

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

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

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

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3074511/f278a6c2-0f7b-f960-5a5e-49a6247a767e.png)

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

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

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3074511/078edb86-8e2c-457e-b25e-f29c6f468576.png)
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3074511/6c8a5971-ef71-173f-6b97-bad5067ae864.png)

# 何もデータが出てこない

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

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3074511/02d905fa-0827-0235-ced3-97e784d8f494.png)

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

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3074511/4c96f2de-36a2-3b36-e16a-e68906b6f588.png)

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

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


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

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3074511/b4f48a55-65d7-bd63-8ed6-86a8fcd61b57.png)

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

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3074511/97de8e58-f9b4-2312-6216-67b35a5e262a.png)

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

https://qiita.com/Takashi_Masumori/items/a1c0f6f557605b91a596

# 列数を変えたい

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

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

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3074511/598cad9c-a4b6-c530-b458-35e4aa42770c.png)

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

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3074511/8c9ed77a-8464-2b78-e629-93fa5951e396.png)

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

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3074511/fa3cc785-287f-3d4b-c8db-b7ac905fbefa.png)
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3074511/b00a7906-ef54-3809-dcff-83e7220aaa1f.png)

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

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3074511/b3b245ef-999a-d940-485a-ff995f372cd7.png)

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

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3074511/69662514-483e-bbee-bfb5-cc41682597f0.png)

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

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3074511/1bce317c-4a1a-36fb-9f83-96cbb0f0f881.png)

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

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

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3074511/e1454248-5471-2a94-02e0-9306c5d6645c.png)

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

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3074511/f886c6a7-3ab9-9775-9f72-b0eb1e8bf507.png)

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

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3074511/ac3133b3-ced1-a02f-be89-33c6cdf591e0.png)


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

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3074511/f302dee2-50bf-ab21-3795-92a8a83030af.png)
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3074511/0f6aa84c-537b-d943-eae9-2a772c727b84.png)

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

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3074511/1643d9d2-6c99-12c1-57f8-95d2d74399a2.png)
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3074511/39fb4a87-29d2-b3ff-fd81-78e343e52a2d.png)

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

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

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3074511/86695854-261c-a7cf-3556-35cc036e83d0.png)
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3074511/61a3525f-062f-dde8-87d2-3008a6764311.png)

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

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

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3074511/8ddddee1-e6e4-7807-9d3d-8af3b625d513.png)
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3074511/f656d1f1-6188-b9af-63ed-66973fe83355.png)

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

## 既定値を設定する

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

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

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3074511/aa28c5c6-a647-438e-cbc3-8f62ee19796f.png)
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3074511/6d6278e0-393b-04d6-7cbb-533e65c99333.png)

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

https://idea.tostring.jp/?p=5108

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

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3074511/576e0524-9675-f35b-a871-1f4655321aaf.png)

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

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

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3074511/379a0cd1-ccee-6b20-c6fe-a1787807bf9e.png)

実際にやってみます。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3074511/185f2dfe-b1ca-44c4-8b36-680418543f54.png)

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

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3074511/50cab4f1-2ebb-ca72-b92d-879f5c2f08bd.png)

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

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

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3074511/083dc7a6-8de0-b82d-51e1-b887593e1b74.png)

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

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3074511/88417f51-aaae-0f62-1399-76cd129023b9.png)

:::note warn
SharePoint リストで列名を日本語で作成していると、以下のようにエラーメッセージに内部名が表示されてしまうため、`[Text]`プロパティを変更します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3074511/b3ca200a-fae5-440c-afe4-a9495e25b1f6.png)
:::

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

https://qiita.com/Takashi_Masumori/items/e3f99db1436d186adcde

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

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3074511/720170ba-bc9b-53bb-e87e-b1a47d8f19dc.png)
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3074511/b32b384a-5aa6-7383-bccb-5de3de6dfeff.png)
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3074511/061e7d5f-0370-61cf-416e-118312e5d8cc.png)
:::

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

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

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

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3074511/e366b551-7347-0e7c-284c-8b959630ac34.png)

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

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3074511/ac806b4a-3430-a487-5937-2d528649efbf.png)

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

https://learn.microsoft.com/ja-jp/power-platform/power-fx/reference/function-form

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

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3074511/af38de6a-7fe1-8256-92b5-94ed19f61b1a.png)

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

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

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3074511/fb75b624-f6d6-5852-b054-e5f931b46858.png)

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

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3074511/27ac9f88-d4bb-e72e-4787-3122cd067f46.png)

# SharePoint リストの複数行テキスト列を表示すると HTML のタグが表示される

フォームコントロールで SharePoint リストを指定すると、SharePoint リストの以下のような種類の列において、HTML のタグが表示されてしまいます。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3074511/f4887563-2884-3d7b-cb75-1a6b10181ac3.png)

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3074511/72794362-c969-2d67-d813-55c6b00297db.png)

少し困惑してしまう方もいらっしゃると思います。Power Apps のフォームコントロール上では、HTML のタグは出したくないという場合、PlainText 関数を利用することで実現できます。

具体的には、該当の DataCard の`[Default]` プロパティにて、元々記載されていたものを PlainText 関数で囲むだけです。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3074511/09a1809c-9889-5ae2-aea2-09fba26055f4.png)

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3074511/f790c404-37df-c9c1-0284-1ecd41842cc7.png)


例)

```
PlainText(ThisItem.案件の説明)
```

# SharePoint リストの複数行テキスト列が一行で表示される

以下のように、SharePoint リストの複数行テキスト列が、改行されず、一行で表示されてしまって、全部上手く表示されません。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3074511/7fcfb472-9a15-5d32-f3b4-6c32199dc63f.png)

こちらは、DataCardValue のモードを`複数行`にすることで、改行して表示されるようになります。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3074511/474fa1a4-0328-3f6e-d881-f24b24883027.png)

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3074511/c25dac4f-4bbc-9c88-c1b5-d663dbec53a7.png)


# まとめ

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