モデル駆動型アプリのカスタム（キャンバスアプリ）ページで検索画面を作成する

モデル駆動型アプリにキャンバスアプリのページを作ることができます。
実際に中身を作ってみましょう！
（参照：[モデル駆動型アプリにキャンバスアプリを表示する](https://qiita.com/skuramoto/items/fce8d47ab6a979175f4e)）
今回は例として、**検索画面**を作ってみます。

途中まではキャンバスアプリの作り方です。その為、キャンバスアプリで検索画面を作りたい方にも参考にしていただけると思います。
コントロールごとの扱いについても書いているので、それぞれの部品ごとにもぜひ参考にしてください！
（作業するにあたって、随時保存を忘れないようにして下さい！）
# 作成する画面のイメージ
今回作る画面のイメージです。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2883014/6323f043-475b-f2ae-12fc-39a7a3a0aaa7.png)

検索条件が上にあって、下に一覧で検索結果が表示されます。
詳細ボタンを押すとモデル駆動型アプリの詳細画面（フォーム画面）に遷移するイメージです。

では早速作っていきましょう！
# カスタムページの始め方
カスタムページの最初の作り方は[こちら](https://qiita.com/skuramoto/items/fce8d47ab6a979175f4e#%E3%82%AB%E3%82%B9%E3%82%BF%E3%83%A0%E3%83%9A%E3%83%BC%E3%82%B8%E4%BD%9C%E6%88%90%E6%96%B9%E6%B3%95)と同じ内容ですが再度こちらでも説明いたします。

モデル駆動型アプリの編集画面で[ページ]＞[ページの追加]＞[カスタムページ]から作成することができます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2883014/0b296d30-1d34-435b-8d82-2938d62c1200.png)


新しく作る場合は[新しいカスタムページを作成する]を選択し、ページの名前を入れます。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2883014/80d25d0e-8a48-07b3-bb4d-fa2d5a31afd7.png)

キャンバスアプリの編集画面が表示されます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2883014/00a52667-585a-48fe-2dca-8639cb59ae53.png)

# 検索画面を作成
## デザイン
まず、デザインで背背景の色を変えてみます。
リボンバーの[背背景]から変えられます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2883014/2351ef31-8d0a-845f-a00e-2f85f21bf2c5.png)

最初に検索条件の背景になる画像を入れていきます。画面上側に表示されるリボンバーの[挿入]＞[画像]を選択します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2883014/655c1028-3931-60d4-4e7d-e2669ccc99c0.png)
画面右のプロパティで[画像]をクリックし「画像ファイルの追加」をクリックします。
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2883014/c09b1ed1-79a2-b459-c802-176387db63fc.png" width=40%>

同じくプロパティにて[画像の位置]＞[画像サイズに合わせる]を選択します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2883014/e73f8b18-717d-32d2-8a2c-54ee308369e0.png)

:::note info
今回は白い画像をパワポでつくったものを使用しました。
四角形をそのままPower Appsで挿入してもいいのですが、今回は、角を丸くしたい為、画像を挿入しました。（四角形だと丸くできない）
:::

[プロパティ]＞[境界半径]に20を入力すると画像の4つ角が丸くなります。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2883014/2b15d665-4bb9-c717-1a0a-06071df75855.png)

## 検索条件
### ラベル・テキストボックス 
検索条件のラベルを入れていきます。画面上側に表示されるリボンバーの
[挿入]＞[ラベル]を選択します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2883014/8ece7665-a24b-1df6-bd27-45c0561ee6b8.png)

例えばラベルのテキストに「注文ID」と入力してサイズなど整えた後、これをコピーしてペーストします（[ctrl+C], [Ctrl+V] or ツリービューで右クリック[コピー]、[貼り付け]）。今回は、高さを30にそろえて作っていきます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2883014/4ccfeeeb-76c9-832e-e415-af372d90f711.png)
同じ操作を繰り返して、必要な検索条件のラベルを配置します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2883014/a782f454-e13c-7f24-bb7b-3a142bfd95c9.png)

次に、検索条件になるテキストインプットを入れていきます。
[挿入]＞[テキストボックス]を選択します。

<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2883014/800debff-e0b8-f65f-d1ac-ef7c8d9d582e.png" width=70%>

ラベルと同じように、高さを30にそろえてからコピペで必要なテキストボックスを配置します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2883014/7f1025cd-ac7b-cc69-211a-1fd05999d5a0.png)


デフォルト値（Text Box）は消しておきましょう。
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2883014/1add0881-c112-9fa6-17d6-29743c5958ac.png" width=50%>

### 【注意】コンボボックス
検索条件「ステータス」は選択肢列になるのでテキストボックスではなく、コンボボックスを入れていきます。
[挿入]＞[コンボボックス]を選択します。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2883014/f50104c3-a112-6b70-64bb-7af5c81a283a.png)

:::note info
通常のキャンバスアプリではドロップダウンかコンボボックスか選べますが、カスタムページで選択肢を扱う場合はコンボボックスしか使えません。
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2883014/146dc8dc-c09d-618f-3d60-123ebd9e185b.png" width=80%>

**ドロップダウンとコンボボックスの違い**
コンボボックスはテキストボックスのようにテキストを打ち込むことができ、直接入力したり、それを検索に使ったりすることができますが、ドロップダウンではそれができないというイメージです。

コンボボックスのほうが便利であるため、ドロップダウンがなくてもそんなに問題はないかと思います。
:::

コンボボックスを挿入したら、「データソースの選択」で**テーブルを選択せず**、上の数式バーでItemsプロパティに以下のように選択肢列の名前を引数に入れてChoices関数を入れます。
```
Choices(選択肢列名)
```
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2883014/9a5c1c70-5fdd-8e89-f0a9-4f1865947527.png)

このままだと、以下の画像のように選択肢で表示される値が謎の数字になるので、表示される値を実際の選択肢の値に設定します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2883014/4a28a8d0-3213-de5c-2c27-90b4d681bbeb.png)

該当のコンボボックスを選択した状態で、画面右のプロパティから[フィールド]の[編集]>[フィールドの追加]>「Value」>[追加]をクリックします。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2883014/8bcb75ab-a8a0-7169-c26a-2023d151d3d7.png)

すると、選択肢の値が入りました。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2883014/c28a842f-5b03-a939-98dc-d5dfe24063b1.png)

### 日付の選択コントロール
画面上のリボンバー[挿入]>[日付の選択]をクリックします。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2883014/3067a42b-99a5-ae86-1278-8d42f9300f5e.png)

カレンダー形式で入力できるコントロールが使えるようになります。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2883014/a1df6406-8e5b-b32d-c0e4-112ef76d232b.png)

DatePicker.Valueにはyyyy年mm月dd日が値として渡されています。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2883014/59d99904-7b0b-3929-2a80-ce9afd4b0581.png)

### チェックボックス
検索結果を絞り込みをするためのチェックボックスを作ります。
[挿入]>[チェック ボックス]をクリックします。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2883014/a8928799-555e-48a7-f3ad-0212f90623da.png)
ラベルを消します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2883014/377c87d8-b11f-36dc-bab8-93bc01cf9b20.png)

色やサイズは好きな仕様にカスタマイズします。

<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2883014/2aeaa4cb-ebc4-d029-ac44-ad0c43b3e6f2.png" width=30%>

チェックボックスの条件ですが、自分で設定しないといけません。（「チェック入れたら～する」「チェック外れたら～する」）
チェック入れた時の設定は「OnCheckプロパティ」、チェック外した時の設定は「OnUncheckプロパティ」で行います。
OnCheckプロパティでコンテキスト変数を設定します。
```
UpdateContext({Check:"On"})
```
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2883014/9be015fc-6260-d20b-fa9f-6dc3988bdfe5.png)
同様に、
OnUncheckプロパティでコンテキスト変数を設定します。
```
UpdateContext({Check:"Off"})
```
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2883014/8e52fe0e-aeed-e5d6-bf06-239370c1ba56.png)

あとは画面が表示されたときにデフォルトで変数がOffになっているように設定します。（これをしないと、起動前に設定した変数の値が残ってしまいます。）
ツリービューでScreenを選択してOnvisibleプロパティに以下の関数を入れます。（もともと入っている関数は消さない）
```
UpdateContext({Check:"Off"})
```
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2883014/da3641cc-9847-3374-161f-9edd48ef37dd.png)

このように設定しておくことで、チェックした時、チェックを外したときで値を持たせて、他に反映させることができます。

今回はステータスが空の行を絞りこむように設定していきたいので、ラベルに「ステータスが空」と入れました。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2883014/6fe0862c-ca56-094a-1bd2-51fe287c5fea.png)


### クリアボタン
ワンクリックで検索条件をクリアするボタンを作ります。
リボンバーの[挿入]>[ボタン]をクリックします。

<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2883014/4ee4b2c8-e145-9f5a-4f4f-60ae2d355125.png" width=70%>
テキストに「クリア」と入力し、[色]、[ポイント時の色][無効時の色][押されたときの色]を好きな色に変更します。境界線の半径を20にして丸みを付けます。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2883014/9878193d-8959-b56c-4f50-f2bca77c4be2.png)

OnSelectプロパティにそれぞれの検索で使用したテキストボックスやコンボボックス、日付選択、チェックボックスをリセットする関数を入れていきます。
```
Reset(TextBox1);
Reset(TextBox1_1);
Reset(TextBox1_2);
Reset(TextBox1_3);
Reset(ComboBox1);
Reset(DatePicker1);
Reset(Checkbox1);
```
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2883014/f8af7521-4f75-7012-26dd-c8ab206782fb.png)


動作確認してみます。
プレビューモードで適当に値を入れ、ボタンを押してリセットされるか試してみましょう。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2883014/d1246bcb-272d-ba7c-2ad5-c56516e6d790.png)


![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2883014/937330fe-fe7c-575a-7a54-f453e8bf0ca1.png)



## 検索結果一覧
### ギャラリーの値
リボンバーの[挿入]>[垂直ギャラリー]をクリックします。
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2883014/751f9f16-b6fa-bfb9-d25c-a8c8663e8ac3.png" width=70%>
表示したいデータソースと接続します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2883014/2ddaad72-c32b-d129-147e-00a73a1c0632.png)
プロパティの[色]で好きな背景に変化させます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2883014/d7445217-e157-7bef-0a50-3496ee35389e.png)

画像はいらないので[レイアウト]でそれ以外を選びます。
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2883014/c071bd2b-e788-4140-af12-8140ab69a6c4.png" width=70%>
鉛筆マークをクリックしてギャラリーの中の値をカスタマイズしていきます。一行目を選択した状態でラベルを追加して`ThisItem.列名`の設定を繰り返します。

<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2883014/690b6741-a99c-02ad-06f9-ffabd013eccf.png" width=40%>

関連テーブルの値も使用したい場合は、データの追加をしておきます。
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2883014/e9c675d6-ae20-e2fe-2f91-604b9331c8cf.png" width=50%>
関連テーブルの値をとってくる場合は以下の画像のように値を設定します。
詳しくは以下を参照してください。
[キャンバスアプリでリレーションシップを使いこなす-ギャラリーでの使い方](https://qiita.com/skuramoto/items/b26db9a5dbe7c88e9740#%E3%82%AE%E3%83%A3%E3%83%A9%E3%83%AA%E3%83%BC%E3%81%A7%E3%81%AE%E4%BD%BF%E3%81%84%E6%96%B9)
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2883014/3abcccf5-f41c-0e8d-a662-c9ad0a0b4023.png)

今回は以下の画像のように表示させました。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2883014/492fc82c-8d93-437a-490b-5d7dc573f6be.png)


### 列名
次にギャラリーの各列名を表示させます。
[挿入]>[四角形]を選択して、ギャラリーの上に配置します。
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2883014/04f7d0f0-c78d-1ec4-74ca-6bd13bb1ce55.png" width=50%>

好きな色に設定します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2883014/0d6c3dfd-1b5f-1ad5-7932-879b44d2a3d3.png)

ラベルをどんどん追加していき、それぞれの列名をテキストで入れていきます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2883014/30933304-b33b-4776-354f-5e380d54939a.png)



### 検索条件反映
では、上の検索条件でいれた値を反映させてこのギャラリーに表示させるようにしましょう。
ギャラリーのItemsプロパティを見ると現在はテーブルの値がそのまま入っていると思います。
こちらFilter関数を使って絞り込みをしていきましょう。
例えば、注文IDのフィルタリングに使うTextBox1の設定は以下のように設定します。

```
Filter('販売注文',IsBlank(TextBox1.Value) || TextBox1.Value in 注文ID)
```
意味としては、「TextBox1が空欄でない場合、販売注文テーブルの注文ID列でTextBox1の値を含む行を表示する」となります。
あとはこれの繰り返しです。

チェックボックスの操作は変数で反映させます。
```
Filter(販売注文, Check="Off" || IsBlank(販売ステータス))
```
この関数を設定することで、チェックしたら販売ステータス列が空欄になっている行を絞り込むという設定をすることができます。
Filter関数は一つの関数の中で検索条件をいくつも設定できるのでこれらの条件をひとつの関数に入れます。

```
Filter(販売注文,
    IsBlank(TextBox1.Value) || TextBox1.Value in 注文ID,
    IsBlank(TextBox1_1.Value) || TextBox1_1.Value in 製品情報.製品名,
    IsBlank(TextBox1_2.Value) || TextBox1_2.Value in 製品情報.製品番号,
    IsBlank(TextBox1_3.Value) || TextBox1_3.Value in 顧客,
    IsBlank(ComboBox1.Selected) || 販売ステータス = ComboBox1.Selected.Value,
    IsBlank(DatePicker1.Value) || Text(DatePicker1.Value,"yyyy年mm月dd日") = Text(注文日時,"yyyy年mm月dd日"),
    Check="Off" || IsBlank(販売ステータス)
    )
```

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2883014/c1d3bae2-bec8-e794-da43-537c4761337c.png)

ここまで検索画面がある程度できました。
最後に詳細画面に飛ぶボタンを設定します。

### 詳細ボタン
ギャラリーの鉛筆マーク選択した状態で[挿入]>[ボタン]をクリックします。

好きなデザインにカスタマイズします。

<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2883014/66c556e7-cc18-670c-5314-87742840d3e7.png" width=70%>

ボタンを押したときにモデル駆動型アプリの詳細画面に遷移するように設定したいと思います。
実はモデル駆動型アプリと連携がシームレスになっているので非常に簡単に設定できるようになっています。
ボタンのOnselectプロパティで以下の関数を設定します。これだけで直接モデル駆動型アプリの詳細画面に遷移するようになります。
```
Navigate(ThisItem)
```
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2883014/47520d3f-4496-59c1-ebbd-8a9a886e9389.png)



ここまでで作りたい画面は完成しました。
動作確認していきましょう！（保存と公開を忘れずに）
# 動作確認
モデル駆動型アプリを再生します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2883014/cfc54edf-4884-909d-65df-7bd85267142f.png)

検索条件に沿って結果が表示されるか確認します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2883014/dfb502c7-4c24-4df1-bf08-5bc8a306b122.png)

「詳細画面」ボタンで詳細画面が表示されるか確認します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2883014/0d63dfe3-990b-accb-9b24-0638c77dc481.png)



# まとめ
ここまででカスタムページで検索画面を作ってきました。いろんな要素が詰まっている演習になっていると思うので、検索画面のみならず、これを応用していろんな画面を作ってみてください。