キャンバスアプリで入力チェックとボタン制御を行う

## はじめに<br>
記事見てくださってありがとうございます。
BizOptimars の**いのうえ**です！

今回は お客様からよくいただいた質問の中から、Power Apps のキャンバスアプリで入力チェックとボタン制御を行う方法をご紹介したいと思います。

Power Apps でフォームを使ってユーザーに入力してもらい、登録ボタンを押すことでデータ登録を行う機能を実装される方は多いと思います。
```plantuml
@startuml
<style>
root {
  Padding 0
  Margin 0
}
footer {
  FontColor black
  FontSize 30
}
</style>
footer **ボタンに SubmitForm 関数を設定したよくある登録アプリ**
title <img:https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1966048/a2c91754-736b-58f1-ec59-2276bdea669e.png>
@enduml
```
<br>

こういった機能の実装自体は比較的簡単なのですが、時には半角や全角のチェック・最大の文字数に収まっているかなど、登録ボタンを押す前に入力チェックをさせたいとか、
チェックの結果が OK の時しか登録ボタンを押せなくしたいといったことはありませんか？
そんな時は、ボタンの **DisplayMode** プロパティを使うと、入力内容が条件を満たしていない場合は、ユーザーがボタンを押せないように設定することができます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1966048/75287a9f-faff-5269-9729-75bf77d151bc.png "test")


## 今回用意したもの<br>
SharePoint リストを 1 つ作成しました。
列の詳細は以下の通りです。<br>
| 列名 | データ型 | 必須 / 任意 |
|:-|:-|:-|
| 名前  | テキスト  | 必須 |
| パスワード  | テキスト  | 必須  |
| 従業員ID  | テキスト  | 任意  | 

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1966048/5a478cdd-5bf7-5572-a68c-6b98663321d2.png)



## 特定の列をチェックする<br>
まず、従業員 ID の列に入力されている従業員 ID が半角数字かそうでないかで、ボタンの制御を行います。

ボタンの DisplayMode プロパティに以下のように式を記述します。

```
If(IsMatch(従業員番号の DataCardValue.Text,"^[0-9]+$"),DisplayMode.Edit,DisplayMode.Disabled)
```
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1966048/70403493-259f-6584-0af4-b426f3adde59.png)


このように設定しますと、入力された従業員 ID が半角数字の場合のみ、ボタンが押せるようになります。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1966048/dd9e77d6-de58-4ef8-276b-be754711b998.png)

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1966048/69e47eb1-5d14-7cbd-6a3e-30d446851a4e.png)

## 必須列をチェックする<br>
次に、必須列が入力されているかどうかで、ボタン制御を行ってみようと思います。

項目が必須かどうかは、フォーム内の各データカードの **Required** プロパティで設定できます。
```plantuml
@startuml
<style>
root {
  Padding 0
  Margin 0
}
footer {
  FontColor black
  FontSize 15
}
</style>
footer **true で設定すると必須項目になります**
title <img:https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1966048/8e2b9237-d67c-31f4-c51d-8c147ffe438e.png>
@enduml
```

フォームの入力内容に不備がありますと、登録しようとした際に以下のようなエラーメッセージが表示されます。

```plantuml
@startuml
<style>
root {
  Padding 0
  Margin 0
}
footer {
  FontColor black
  FontSize 20
}
</style>
footer **必須項目が未入力の状態で SubmitForm 関数を実行した場合**
title <img:https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1966048/14addd8f-5403-9c7e-886c-a385b4a5c900.png>
@enduml
```

このフォームの機能をそのまま使っていただくのも問題ありませんが、今回はそれに加えて従業員 ID のチェックも行いたいと思います。

まず、必須列チェックでボタン制御を行います。ボタンの DisplayMode プロパティに以下のように式を記述します。

```
If(フォーム名.Valid,DisplayMode.Edit,DisplayMode.Disabled)
```
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1966048/84a1280d-01ea-515b-06b4-8e4301b0129a.png)

式で使用している Valid プロパティは、フォームの入力内容でエラーがある場合は False、エラーがない場合は True となるプロパティです。
Valid プロパティについては公式ページを参考にしていただければと思います。
[Power Apps での 編集フォーム および 表示フォーム のコントロール](https://learn.microsoft.com/ja-jp/power-apps/maker/canvas-apps/controls/control-form-detail#key-properties?wt.mc_id=MVP_363134)

このように設定しますと、必須の入力ボックスに全て入力された場合のみ、ボタンが押せるようになります。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1966048/0ac9a8c9-3fbf-cd13-172b-38380baae92b.png)

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1966048/89ca714c-9d81-8e5f-db3c-68e974afa249.png)

こちらに先ほどの従業員 ID の条件も以下のように追加してみます。
```
If(フォーム名.Valid && IsMatch(従業員番号の DataCardValue.Text,"^[0-9]+$"),DisplayMode.Edit,DisplayMode.Disabled)
```
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1966048/6967c665-3b8b-058b-065a-921268244b15.png)

このように設定すると、2 つの条件を組み合わせることができます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1966048/0113b0d2-2bea-5732-a06d-0dd8843c91d7.png)

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1966048/830c76b2-6e18-ad88-933d-c0994ba8d127.png)


## 最後に<br>
入力データが登録・更新されてしまう前に、入力内容のチェック機能を付けておくことで
データの整合性を保つ助けになります。

ひと工夫を入れておくことが、ユーザーの利便性向上、運用側の負担軽減につながりますので、ぜひ試してみてくださいね！