検索エレメント
概要
検索エレメントでは、高度なフィルター検索機能を利用できます。特にデータ件数が多い場合に適しており、必要な情報を効率よく絞り込むことが可能です。
対象環境
Webアプリ・ネイティブアプリ
対象プラン
Proプラン以上
仕様
基本機能
- データベース選択
検索対象のデータベースを選択します。リレーションで紐づくデータも選択可能。
- AND条件
- 複数条件を組み合わせた絞り込み
- 検索クリア設定
- 検索条件をクリアするボタンあり
- デフォルトで全データ表示
条件指定
📝 テキスト検索
- Operator
- 等しい
- 等しくない
- 含む
- 含まない
- 対象: 名前、住所など文字列フィールド
📅 範囲検索
- 数値・日付
- 数値: 最小〜最大（例: 正社員数 10〜50）
- 日付: 開始日〜終了日（例: 2025/01/01〜2025/06/30）
🔗 リレーション検索
- 多対多 (ManyToMany): ドロップダウン
- 1対多 (OneToMany): チェックボックス
✅ ブール値検索
- True / False チェックボックス
🔥 フィルター設定例
| フィールド | 条件 | 例 |
|---|---|---|
| 名前 | 含む | "山田" を含む全件 |
| 正社員数 | 範囲 | 10人〜50人 |
| 設立日 | 日付範囲 | 2020-01-01 〜 2025-01-01 |
| 取引先カテゴリ | ドロップダウン | "主要取引先" を選択 |
| フラグ (有効/無効) | チェックボックス | True (有効) のみ |
操作手順
店舗検索アプリの作成を例にした作成手順を説明いたします。
サンプルアプリ
検索させたいデータを作成
検索対象とする店舗情報に必要な項目をデータベースに準備します。
今回検索対象とする店舗情報
- 店舗名
- テキスト
- エリア
- 新たにマスターテーブルを作成し、1：ｎでリレーションを組む
- ジャンル
- 新たにマスターテーブルを作成し、多：多でリレーションを組む
- 目安となる料金
- 数値
エリアのマスターテーブル
ジャンルのマスターテーブル
トップページを作成
キャンバスに移動します。
①プロジェクト内で「トップページ」を新規作成します。
②画像エレメント・ボタンエレメントを配置し、画像エレメントは用意した画像をアップロードしてください。（おススメはAI生成）
ボタンのスタイルやテキストも編集してください。
③カスタムリストを設置し、のデータひも付けを行います。
右側パネル → カスタム→ データベースの選択 を開いてください。
「お店」テーブルを選択してください。
④カスタムリスト内の各要素（テキストや画像）に右側パネルのエレメントタブで、Currentからデータを紐づけてください。
検索ページを作成
新規ページを作成し、モーダルで設定してください。
ボタンエレメントを選択し、右側パネルの「アクション」タブで、『アクションを追加する→ページの移動→検索ページ』と設定してください。
モーダルの枠を拡大後、テキストとボタンを削除し、左側パネルから「検索フォーム」を配置。エレメントの幅を調整し、モーダル内に収まるようにしてください。
検索の設定
①検索フォームエレメントを選択した状態で、右側エレメントタブ内の『フォーム→データを選択してください→お店』を選択
②テキスト表示の設定を行います。右側パネルの「項目」を開き、Operatorで検索条件として「含む」を設定します。
Operatorの下の「項目」で、必須／任意の設定ができます。
③料金項目は数値項目のため、「範囲フィルター」を設定できます。これをONにしてください。
なお、「範囲フィルター」を設定できる型は 数値 と 日時 のみです。
④リレーションを組んでいる項目については、「表示項目の追加」ボタンを押して追加してください。
エリアを設定してください。
1：多のリレーションを組んだ項目では、ドロップダウン形式の検索入力が表示されます。
ジャンル項目は多：多のリレーションを組んでいるため、チェックボックスが表示されます。
⑤送信時にフォームをリセットする設定もありますので、必要に応じてご利用ください。
検索フォームエレメントを選択し、『アクションを追加→ページ移動→トップページ』に設定します。
カスタムリストのフィルターを設定
トップページに戻り、カスタムエレメントを選択してください。
『フィルター→参照できるエレメント・機能→Search Forms→検索ページ』と設定してください。
プレビューでテストしてください
最終更新日：2025/07/09