読者です 読者をやめる 読者になる 読者になる

CRUD Lab. Tech Blog

ギークス株式会社の沖縄開発拠点CRUDLab. (クラッドラボ)のIT技術(テック)ブログ。kintoneやAngularJSによる開発を行っています。

【kintone】シンプルなレコード内検索小窓を作ってみよう

kintone

0. 目次

1. 概要

ギークス株式会社CRUD Lab.のKUNISADAです!

シンプルなレコード内検索小窓を作ってみよう

アプリ内検索のように大規模じゃなくてもいい、レコード一覧画面でわざわざ条件絞り込みをするのも面倒くさい! そんな時に役立つ検索小窓を作ってみました。

2. イメージ図

例) 沖縄県◯◯市のレコード一覧の中で、「那覇市」を検索

f:id:crud_lab_editor:20160310154432g:plain

3. 準備

3-1 フィールド

今回は、「タイトル」フィールドを絞り込み検索の対象とするシンプルな設定です。

フィールド名 フィールドコード 初期値 その他
タイトル title -- --

f:id:crud_lab_editor:20160310151331p:plain

3-2 必要ファイルの読み込み

f:id:crud_lab_editor:20160303153525p:plain

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

データを検索する | kintone ユーザーヘルプ

6. まとめ

レコード一覧画面のメニュー右側の空白部分*1を有効活用するシリーズです。 頻繁に検索する必要がある場合は、とても便利なカスタムです。 社内用のwikiなど、カテゴリー別に整理してあるアプリなどで、探したい項目が簡単に見つかるのでおすすめです!

*1:レコード一覧画面のメニュー右側の空白部分の要素は、「kintone.app.getHeaderMenuSpaceElement()」で取得することができます。