【powerapps講座】#2 テーブルと複数検索ボックスを設置する

テーブルと複数検索ボックスを設置する

前回の記事でSharePoint Listのインポートをしました。

funi-ds.hatenablog.com

今回はリストの中身を表示するテーブルと検索ボックスを設置します。

データテーブルを挿入する

「挿入」タブから「データテーブル」を選択します。

データソースの選択で対象のリストを選択します。

データが反映されました！
SharePoint Listでタイトルに設定している列は列名がTitleと表記されるため、列名を変更します。

対象の列を選択し、右端に出てくる編集画面の「ヘッダーテキスト」を正しい列名に変更します。

検索ボックスを挿入する

続いて検索ボックスを設置します。
今回は「分類」列と「商品名」列の2つで検索ボックスを設置します。
検索ボックスはSharePoint Listでの列の設定によってコードの書き方が変わります。

「挿入」タブ→「入力」→「ドロップダウン」を選択します。

同じ要領で検索ボックスを2つ設置します。

検索ボックスの選択肢を設定する

「ツリービュー」→「App」→「OnStart」に検索ボックスの選択肢の設定をしていきます。

入力するコードは以下の通りです。

//1.分類の選択肢設定
ClearCollect(category, {Result:"-"});
Collect(category, Distinct(在庫管理リスト, 分類.Value));

//2.商品名の選択肢設定
ClearCollect(name, {Result:"-"});
Collect(name, Distinct(在庫管理リスト, 商品名))

「分類」のコードで1行ずつ説明します。


まずCollect関数を使って、「category」のコレクションを作成しています。
コレクションの中身としては、Distinct関数でリストで回答されている項目とするように設定しています。
SharePoint Listで選択肢の設定をしている場合は列名の後ろに「.Value」を追加します。
ここでは「分類」列は選択肢、「商品名」列は1行テキストで設定しているため、分類のみ.Valueをつけています。


ClearCollect関数で「category」コレクションの中身を削除し、「-」を追加する設定をしています。
「-」は検索ボックスで無選択のときに使うため追加しています。

「ツリービュー」→「App」の「・・・」をクリックし、「OnStartを実行します」をクリックします。

データにコレクションが追加されました。


コレクションの内容は「ファイル」→「コレクション」から確認することができます。



検索ボックスそれぞれにさきほど設定したコレクションの設定をしていきます。
検索ボックスの「Items」にコレクション名を入力します。

検索ボックスに選択肢が表示されるようになりました！

検索ボックスとテーブルを連携させる

続いて検索ボックスとテーブルの連携設定をしていきます。
検索ボックスの選択は全部で4通り考えられるため、4通りのコードを設定していきます。

4通りのコードは以下の通りです。

If(
    //すべて選択されない
    Dropdown_name.Selected.Result = "-" And Dropdown_category.Selected.Result = "-",
    在庫管理リスト,

    //どれか1つが選択
    Dropdown_name.Selected.Result <> "-" And Dropdown_category.Selected.Result = "-",
    Filter(在庫管理リスト, 商品名 = Dropdown_name.Selected.Result),

    Dropdown_name.Selected.Result = "-" And Dropdown_category.Selected.Result <> "-",
    Filter(在庫管理リスト, 分類.Value = Dropdown_category.Selected.Result),

    //2つとも選択される
    Dropdown_name.Selected.Result <> "-" And Dropdown_category.Selected.Result <> "-",
    Filter(在庫管理リスト, 商品名 =Dropdown_name.Selected.Result, 分類.Value = Dropdown_category.Selected.Result))

検索ボックスがすべて選択されないとき、つまり検索ボックスの表示が「-」のときは在庫管理リストの一覧を表示します。


検索ボックスのうちどれか1つが選択されたとき、つまり検索ボックスの表示が片方が「-」でもう片方が「-」以外のものが表示されたときは「-」以外の指定されたワードで列の絞り込みをします。
コードの<>は≠を意味します。


検索ボックスが2つとも選択されたとき、つまり検索ボックスの表示が2つとも「-」以外の場合は、「-」以外の指定されたワードで2列の絞り込みをします。
このコードはテーブルの「Items」に入力します。


実際に検索ボックスを操作してみます。
＜検索ボックスの指定なし＞

＜片方の検索ボックスのみ選択＞

＜両方の検索ボックスを選択＞

それぞれの条件でうまくテーブルに絞り込みデータを出すことができました！