テーマを変更中で、表示が崩れているところがあります…!

【bubble】一覧の複数選択フィルターの作り方

.bubble
.bubble

最近ときどき発生するので、メモとして残します。

一覧表の検索自体はあちこちで書かれていますが、リレーションが貼られたテーブル(Type)に対し、絞り込みの対象を複数選択可能にしてフィルターする方法です。

よくあるのが、以下のような状態。

  • Userテーブル=ユーザーデータが存在する
  • 会社名や部署名が別テーブルとして存在する
  • Userテーブルに会社名・部署名が設定されている

この状態で会社や部署名を複数選択してフィルターする感じです。

出来上がりはこちら

フィルタ(複数選択)

テーブル構成

テーブル構成は以下のような感じです。

一覧表示する対象は Item テーブルで、このテーブルに Company テーブルへのリレーションが貼られています。

このとき、Companyのnameでフィルターをかけます。

一覧表示しているItemテーブル
Companyテーブル

メインの一覧表示

ひとまずメインの一覧表示を作成します。

Repeating Groupを配置し、Data Sourceは Search for Item としておきます。

表示する項目はお任せしますが、ここでは Item.nameItem.companys nameItem.companys address を設定しました。

メインの一覧表示の設定

フィルターアイテムの表示

次にフィルターしたいテーブルデータを表示する所を作ります。

Repeating Groupを配置し、Data Source は Search for Company とします。

ここで、Custom States を作成し、チェックを入れた会社データを保存できるようにします
Custom StatesのデータをCompanyとし、Listにチェックを入れます。

フィルター対象(Company)の表示

行にチェックボックスを配置し、チェックボックスの値は Current cells Companys name とし、会社名を一覧で表示するようにします。

チェックボックスの Preset status は Dynamic。

Dynamic statusは上で作成したCustom State contains Current cells Company とします。
こうすると、この行の会社が Custom State に含まれている場合、チェックがオンになります。

チェックボックス

メインの一覧の検索条件を設定

フィルター用のCustom Stateを作成したところで、メインの一覧表示の検索条件を設定します。

Search for Item の中身に、 company is in Custom State を入れIgnore empty constraints にチェックします。

これで、Itemの会社名は チェックボックスで選択した会社が含まれているもの を検索します。
Ignore empty constraints にチェックをしておくと、会社が未選択のときに全てを表示します。チェックがないと未選択の時に一覧が空になります(一致するデータがないため)。

検索条件

ワークフロー

最後にチェックを入れたときのワークフローを設定します。

トリガーは An inputs value is changed を選択します。

チェックされた時、Custom Statesにその会社情報を追加します。
チェックが外れた時、Custom Statesからその会社情報を削除します。

チェックが入った時のアクション
チェックが外れた時のアクション

以上で設定は終了です!

会社+部署名で選択したい、という場合も同じようにCustom Statesを作成して両方で検索するように設定します。

タイトルとURLをコピーしました