【kintone】シンプルなレコード内検索小窓を作ってみよう
0. 目次
1. 概要
ギークス株式会社CRUD Lab.のKUNISADAです!
シンプルなレコード内検索小窓を作ってみよう
アプリ内検索のように大規模じゃなくてもいい、レコード一覧画面でわざわざ条件絞り込みをするのも面倒くさい! そんな時に役立つ検索小窓を作ってみました。
2. イメージ図
例) 沖縄県◯◯市のレコード一覧の中で、「那覇市」を検索
3. 準備
3-1 フィールド
今回は、「タイトル」フィールドを絞り込み検索の対象とするシンプルな設定です。
フィールド名 | フィールドコード | 初期値 | その他 |
---|---|---|---|
タイトル | title | -- | -- |
3-2 必要ファイルの読み込み
4. 実装
//検索したいフィールドの設定値 const FIELD_CODE = 'title'; //レコード一覧表示のイベントハンドラー (function () { 'use strict'; kintone.events.on("app.record.index.show", function (event) { //GET引数に格納された直前の検索キーワードを取得して再表示 var result = {}; //クエリから、URL固定部分(?query=)を無視して取り出す var query = window.location.search.substring(7); //フィールドコード名と検索キーワードに分割する for(var i = 0;i < query.length;i++){ var element = query[i].split('like'); var param_field_code = encodeURIComponent(element[0]); var param_search_word = encodeURIComponent(element[1]); //空白スペースを取り除いて、配列に格納 result[param_field_code.replace(/^\s+|\s+$/g, "")] = param_search_word.replace(/^[\s|\"]+|[\s|\"]+$/g, ""); } //検索キーワード var search_word = document.createElement('input'); search_word.type = 'text'; //検索ボタン var search_button = document.createElement('input'); search_button.type = 'submit'; search_button.value = 'search'; search_button.onclick = function () { keyword_search(); }; //キーワード検索の関数 function keyword_search(){ var keyword = search_word.value; var str_query = '?query='+ FIELD_CODE +' like "' + keyword; if(keyword == ""){ str_query = ""; }else if(keyword != ""){ str_query = '?query='+ FIELD_CODE +' like "' + keyword + '"'; } //検索結果のURLへ document.location = location.origin + location.pathname + str_query } //重複を避けるため要素をあらかじめクリアしておく var node_space = kintone.app.getHeaderMenuSpaceElement() for (var i =node_space.childNodes.length-1; i>=0; i--) { node_space.removeChild(node_space.childNodes[i]); } var label = document.createElement('label'); label.appendChild(document.createTextNode('レコード内検索')); label.appendChild(document.createTextNode(' ')); label.appendChild(search_word); label.appendChild(document.createTextNode(' ')); label.appendChild(search_button); kintone.app.getHeaderMenuSpaceElement().appendChild(label); return event; }); })();
5. kintoneでの検索の注意点
1. 1文字では検索不可/ 最低2文字以上が検索に必要
例)「なは」
- OK :「なは」と検索 → 「なは」
- NG:「な」と検索 → データがありません。
2. 英数字は単語単位でしか検索できない
例)「KUNISADA」
- OK:「KUNISADA」と検索 → 「KUNISADA」
- NG:「KUNI」と検索 → データがありません。
参考URL
6. まとめ
レコード一覧画面のメニュー右側の空白部分*1を有効活用するシリーズです。 頻繁に検索する必要がある場合は、とても便利なカスタムです。 社内用のwikiなど、カテゴリー別に整理してあるアプリなどで、探したい項目が簡単に見つかるのでおすすめです!
*1:レコード一覧画面のメニュー右側の空白部分の要素は、「kintone.app.getHeaderMenuSpaceElement()」で取得することができます。