LoginSignup
5
5

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 1 year has passed since last update.

@skuramoto(Shiori Kuramoto)inMicrosoft

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

Last updated at Posted at 2022-12-31

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

途中まではキャンバスアプリの作り方です。その為、キャンバスアプリで検索画面を作りたい方にも参考にしていただけると思います。
コントロールごとの扱いについても書いているので、それぞれの部品ごとにもぜひ参考にしてください！
（作業するにあたって、随時保存を忘れないようにして下さい！）

作成する画面のイメージ

今回作る画面のイメージです。
image.png

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

では早速作っていきましょう！

カスタムページの始め方

カスタムページの最初の作り方はこちらと同じ内容ですが再度こちらでも説明いたします。

モデル駆動型アプリの編集画面で[ページ]＞[ページの追加]＞[カスタムページ]から作成することができます。
image.png

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

image.png

キャンバスアプリの編集画面が表示されます。
image.png

検索画面を作成

デザイン

まず、デザインで背背景の色を変えてみます。
リボンバーの[背背景]から変えられます。
image.png

最初に検索条件の背景になる画像を入れていきます。画面上側に表示されるリボンバーの[挿入]＞[画像]を選択します。
image.png
画面右のプロパティで[画像]をクリックし「画像ファイルの追加」をクリックします。

同じくプロパティにて[画像の位置]＞[画像サイズに合わせる]を選択します。
image.png

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

[プロパティ]＞[境界半径]に20を入力すると画像の4つ角が丸くなります。
image.png

検索条件

ラベル・テキストボックス

検索条件のラベルを入れていきます。画面上側に表示されるリボンバーの
[挿入]＞[ラベル]を選択します。
image.png

例えばラベルのテキストに「注文ID」と入力してサイズなど整えた後、これをコピーしてペーストします（[ctrl+C], [Ctrl+V] or ツリービューで右クリック[コピー]、[貼り付け]）。今回は、高さを30にそろえて作っていきます。
image.png
同じ操作を繰り返して、必要な検索条件のラベルを配置します。
image.png

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

ラベルと同じように、高さを30にそろえてからコピペで必要なテキストボックスを配置します。
image.png

デフォルト値（Text Box）は消しておきましょう。

【注意】コンボボックス

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

image.png

通常のキャンバスアプリではドロップダウンかコンボボックスか選べますが、カスタムページで選択肢を扱う場合はコンボボックスしか使えません。

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

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

コンボボックスを挿入したら、「データソースの選択」でテーブルを選択せず、上の数式バーでItemsプロパティに以下のように選択肢列の名前を引数に入れてChoices関数を入れます。

Choices(選択肢列名)

image.png

このままだと、以下の画像のように選択肢で表示される値が謎の数字になるので、表示される値を実際の選択肢の値に設定します。
image.png

該当のコンボボックスを選択した状態で、画面右のプロパティから[フィールド]の[編集]>[フィールドの追加]>「Value」>[追加]をクリックします。
image.png

すると、選択肢の値が入りました。
image.png

日付の選択コントロール

画面上のリボンバー[挿入]>[日付の選択]をクリックします。
image.png

カレンダー形式で入力できるコントロールが使えるようになります。
image.png

DatePicker.Valueにはyyyy年mm月dd日が値として渡されています。
image.png

チェックボックス

検索結果を絞り込みをするためのチェックボックスを作ります。
[挿入]>[チェック ボックス]をクリックします。
image.png
ラベルを消します。
image.png

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

チェックボックスの条件ですが、自分で設定しないといけません。（「チェック入れたら～する」「チェック外れたら～する」）
チェック入れた時の設定は「OnCheckプロパティ」、チェック外した時の設定は「OnUncheckプロパティ」で行います。
OnCheckプロパティでコンテキスト変数を設定します。

UpdateContext({Check:"On"})

image.png
同様に、
OnUncheckプロパティでコンテキスト変数を設定します。

UpdateContext({Check:"Off"})

image.png

あとは画面が表示されたときにデフォルトで変数がOffになっているように設定します。（これをしないと、起動前に設定した変数の値が残ってしまいます。）
ツリービューでScreenを選択してOnvisibleプロパティに以下の関数を入れます。（もともと入っている関数は消さない）

UpdateContext({Check:"Off"})

image.png

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

今回はステータスが空の行を絞りこむように設定していきたいので、ラベルに「ステータスが空」と入れました。
image.png

クリアボタン

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

テキストに「クリア」と入力し、[色]、[ポイント時の色][無効時の色][押されたときの色]を好きな色に変更します。境界線の半径を20にして丸みを付けます。

image.png

OnSelectプロパティにそれぞれの検索で使用したテキストボックスやコンボボックス、日付選択、チェックボックスをリセットする関数を入れていきます。

Reset(TextBox1);
Reset(TextBox1_1);
Reset(TextBox1_2);
Reset(TextBox1_3);
Reset(ComboBox1);
Reset(DatePicker1);
Reset(Checkbox1);

image.png

動作確認してみます。
プレビューモードで適当に値を入れ、ボタンを押してリセットされるか試してみましょう。
image.png

image.png

検索結果一覧

ギャラリーの値

リボンバーの[挿入]>[垂直ギャラリー]をクリックします。

表示したいデータソースと接続します。
image.png
プロパティの[色]で好きな背景に変化させます。
image.png

画像はいらないので[レイアウト]でそれ以外を選びます。

鉛筆マークをクリックしてギャラリーの中の値をカスタマイズしていきます。一行目を選択した状態でラベルを追加してThisItem.列名の設定を繰り返します。

関連テーブルの値も使用したい場合は、データの追加をしておきます。

関連テーブルの値をとってくる場合は以下の画像のように値を設定します。
詳しくは以下を参照してください。
キャンバスアプリでリレーションシップを使いこなす-ギャラリーでの使い方
image.png

今回は以下の画像のように表示させました。
image.png

列名

次にギャラリーの各列名を表示させます。
[挿入]>[四角形]を選択して、ギャラリーの上に配置します。

好きな色に設定します。
image.png

ラベルをどんどん追加していき、それぞれの列名をテキストで入れていきます。
image.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

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

詳細ボタン

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

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

ボタンを押したときにモデル駆動型アプリの詳細画面に遷移するように設定したいと思います。
実はモデル駆動型アプリと連携がシームレスになっているので非常に簡単に設定できるようになっています。
ボタンのOnselectプロパティで以下の関数を設定します。これだけで直接モデル駆動型アプリの詳細画面に遷移するようになります。

Navigate(ThisItem)

image.png

ここまでで作りたい画面は完成しました。
動作確認していきましょう！（保存と公開を忘れずに）

動作確認

モデル駆動型アプリを再生します。
image.png

検索条件に沿って結果が表示されるか確認します。
image.png

「詳細画面」ボタンで詳細画面が表示されるか確認します。
image.png

まとめ

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

5
5
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
Sign upLogin
5
5

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?