【Power Apps初心者講座】コントロールの使い分け

Power Apps初心者の方向けに**Power Appsの基本概念**を説明する試みです。

この記事では、以下の内容を解説します。

- **コントロールの大まかな分類**
- **使用目的による入力コントロールの分類**
- **ユーザー入力コントロールの使い分け**

## コントロールの大まかな分類

Power Appsのコントロールは**使用目的に応じて入力やディスプレイなどに分類**されています。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3618051/62746de2-d70b-d032-899b-4258e53a6643.png)

このコントロールの大まかな分類は、挿入タブから確認することができます。

## 使用目的による入力コントロールの分類

### ボタン（アイコン）・タイマー

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3618051/7662e3f0-acc5-6b9b-dbc7-08f6d329ff7d.png)

**ボタン（アイコン）・タイマーコントロール**は動作の数式を入力し、主にユーザーからの操作や時間経過によってアプリに何らかの動作をさせる場合に使用するコントロールです。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3618051/706f0c99-a170-0938-7286-854cef2bcc91.png)

アイコンコントロールは種類が多いため別のカテゴリーに分類されていますが、**ボタンと同じような働き**をします。

上の画像のようにアイコンとラベルを併用することで、**スペースを小さくするだけでなくボタンの操作結果をイメージしやすく**なります。

モダンコントロールはボタンとアイコンを一つのコントロールで表すことができるので効果的です。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3618051/981e3aaa-769a-2687-3f3b-04389e9fbd4a.png)

### フォーム

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3618051/13d75b7c-bbf8-7f44-e350-149c29e1dfd3.png)

後述する**ユーザー入力コントロール**を使い分け、データソースへのデータをまとめて入力することのできるのが編集フォームです。

一方表示フォームは表示のみのコントロールであるため、基本的にラベルを用いてデータを表示しています。

https://powerplatformnikki.com/editform

https://powerplatformnikki.com/viewform

### ユーザー入力コントロール

ここまで紹介したボタンや編集フォームなどのコントロール以外のコントロールをまとめて「**ユーザー入力コントロール**」と呼びます。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3618051/26f515c2-cd2d-0989-f617-9ba937d195ad.png)

Power Appsには多種多様なユーザー入力コントロールが存在するため、**コントロールの使用箇所に応じて以下の観点で使用するコントロールを選定する**必要があります。

- **データ型**
- **入力の自由度（項目数）**

## ユーザー入力コントロールの使い分け

上記の観点に沿って**ユーザー入力コントロール**を分類すると、以下のようになります。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3618051/3d8a2a33-a03c-7e7f-565d-d2e60e9d4837.png)

上にあるコントロールほど**入力の自由度（項目数）が高い**です。

### ブール

ブール型には、トグル（切り替え）またはチェックボックスコントロールを使用します。

トグルはiOSの設定画面で選択時にすぐに設定が反映されるように、**それぞれが独立している項目に適しています**。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3618051/03694dc3-7081-f39b-a1cf-4959c349d932.png)

チェックボックスはOutlookなどで複数選択する際に選択されていることを示すように、**チェックボックス同士に関連があり、選択した項目に対して何らかのアクションをするような場合**に利用します。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3618051/0cf26e98-afc0-a48d-6139-64c33921d89f.png)
*Outlook Webの設定画面などでトグルとチェックボックスの使い分けを見てみると面白いかも*

[（参考）【チェックボックスVSトグルスイッチ】あなたは使えてますか？教えます、状況に応じて適切に使い分ける方法 - SeleQt【セレキュト】](https://www.seleqt.net/design/checkbox-vs-toggle-switch/)

### 日付

日付は日付の選択コントロールを使用します。

モダンコントロールの方が圧倒的に見やすく使いやすいので、**できるだけモダンコントロールを使用**しましょう。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3618051/846a4db1-0dd7-4971-8907-9a92e4299735.png)

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3618051/b850df60-2b2e-c869-5ee3-ae11bb8e4512.png)


**Tips:**
ちなみにIsEditableプロパティをtrueにすると日付をいじれます。この場合は意図しない日付（2024/2/31等）がデータソースに保存できてしまうので注意。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3618051/20b0aaf7-ea6b-5ff5-682a-16e74902239e.png)

### テキスト

**シンプルな文字入力**にはテキスト入力、太字、色やインデントなどの装飾が必要な場合はリッチテキスト、手描き文字を入力する場合はペン入力コントロールを使用します。

リッチテキストコントロールの出力はhtmlタグが付いているので、**不要な場合はPlainText関数**を使用します。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3618051/0e473faf-20fd-beb3-57bc-0dc5ee6b5125.png)

ペン入力コントロールで書いた文字は画像で出力されます。

### 数値

数値の入力には**数値範囲や許容誤差に応じてコントロールを使い分ける**とアプリが使いやすくなります。

![数値の入力](https://powerplatformnikki.com/wp-content/uploads/2024/01/06257ddae7346b4e01f7085ac4d74bbc.png)
*評価は数値範囲が狭い場合（Max10くらい）にのみ有効、スライダーは数値範囲が広くても使えるが微調整が難しい。*

**Tips:**
ドロップダウンを数値選択のために使用するには**Sequence関数**を使用します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3618051/7002a329-3bb0-d217-ecf6-4a65bdf3c8cf.png)

またテキスト入力コントロールのFormatプロパティをTextFormat.Numberにすることで、**数値以外の入力を受け付けなく**なります。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3618051/47e8923d-8d2d-569f-593f-059d6fe42408.png)


### アレイ

アレイ（テーブル）を選択することのできるコントロールは、**複数選択・検索が必要か、アレイ（テーブル）の行数が何行かによって使い分ける**といいと思います。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3618051/6aee1fbb-e0ed-9867-bf23-48e25b7c5089.png)

コンボボックス・ドロップダウンは**少ない表示領域で多くのデータを表示できますが、データの選択に2アクションを必要とします**。

一方ラジオボタン・リストボックスは**1アクションでデータの選択が可能ですが、データの行数が多いと必要とする表示領域も増えます。**

https://powerplatformnikki.com/combobox

他にもテーブルデータを一覧表示するコントロールに**ギャラリー、データテーブル、モダンテーブル**が存在します。

以下の記事で比較していますので、よければどうぞ。

https://powerplatformnikki.com/datatablegallery

## 元記事

https://powerplatformnikki.com/controldif/