検索窓を追加して選択式で絞り込む

H_ishi

2019年03月27日 04:11

現在、アプリ内でレコードの検索、絞り込みを考えています。

https://developer.cybozu.io/hc/ja/community/posts/213524143-%E4%B8%80%E8%A6%A7%E7%94%BB%E9%9D%A2%E3%81%A7%E3%81%AE%E8%A4%87%E6%95%B0%E6%A4%9C%E7%B4%A2%E7%AA%93%E3%81%AE%E4%BD%9C%E6%88%90

上記などを参考に、文字入力での検索は出来るのですが、ドロップダウン等での選択式での検索ができず困っています。

具体的には、A~Eの項目を選択して、選択した項目の数値が〇〇以上といった具合に絞り込みしたいと考えています。

どなたかご教授頂けると幸いです。よろしくお願いいたします。

6件のコメント

HANSA 2019年03月27日 07:36

H_ishi さん

かなりざっくりした実装方針は以下の通りだと思います。

ドロップダウンを作成する
検索ボタンを作成する
検索ボタンクリック時の動作を実装する

1．ドロップダウンを作成する
これは kintone UI Component などを使うと簡単に実装できると思います。
導入参考：https://developer.cybozu.io/hc/ja/articles/360000511023#step3

(function() {
  'use strict';
  kintone.events.on('app.record.index.show', function(event) {
    var dropdown = new kintoneUIComponent.Dropdown({
      items: [
        {
          label: 'A',
          value: 'A',
          isDisabled: false
        },
        {
          label: 'B',
          value: 'B',
          isDisabled: false
        }
      ],
      value: 'A'
    });
    var header = kintone.app.getHeaderMenuSpaceElement();
    header.appendChild(dropdown.render());
  });
})();

上記のようなコードで一覧にドロップダウンが作成できると思います。
value は 3で実装する際に簡単にできるように query の値にしてあると良いと思います。
例えば A を選択されたときは、"Number" というフィールドの値が "10以下" としたいときは、
以下のように value プロパティを設定することで dropdown.getValue() で簡単に値がとれるようになります。

var dropdown = new kintoneUIComponent.Dropdown({
      items: [
        {
          label: 'A',
          value: 'Number < 10',
          isDisabled: false
        },
        {
          label: 'B',
          value: 'B',
          isDisabled: false
        }
      ],
      value: 'Number < 10' // デフォルトの value もしっかり変更しましょう。
    });

dropdown.getValue(): // 'Number < 10'

2．検索ボタンを作成する

これは既に実装済みかと思いますが、せっかく UI Component を実装したので、
同様に以下のようなコードを差し込むことで実装できるかと思います。

var button = new kintoneUIComponent.Button({
  text: '検索する',
  type: 'submit'
});
header.appendChild(button.render());

3．検索ボタンクリック時の動作を実装する

UI Component で実装したので、以下のコードでクリック時のアクションを設定できます。

button.on('click', function(event) {
    console.log('on click');
});

後は dropdown.getValue() してその値をもとに URL 書き換えで実装できると思います。

HANSAにより編集されました 2019年03月28日 00:42

H_ishi 2019年03月29日 02:55

HANSA様ありがとうございます。

かなりの初心者で

（後は dropdown.getValue() してその値をもとに URL 書き換えで実装できると思います。）

の部分が理解できておりません。申し訳ありませんが、ご教授頂けますでしょうか？

現在は、A,Bのドロップダウンを表示させるところまでは出来ておりますが、

検索ボタンが表示されていない状態です。

また私の理解不足かもしれませんが、項目A,Bと数値を選択して絞り込みをかけたいのでドロップダウンが２つ必要になるかと思いますが、

現在のコードで表示出来るのでしょうか？

重ねてお願いいたします。

HANSA 2019年04月02日 01:37

H_ishi さん

要件をよく確認していませんでした。すみません。

複数選択の場合は、MultiChoice の要素を作成する必要がありそうですね。
https://kintone.github.io/kintone-ui-component/Reference/MultipleChoice/

設計はコメント１と同様に、label はわかりやすいもの、value は URL に乗せるパラメータに設定すれば問題なさそうです。

URL の書き換え処理については、最初に H_ishi さんが提示してくれたリンク先のコードをよく読むとわかると思います。

https://developer.cybozu.io/hc/ja/community/posts/213524143

↓部分がその処理です。

function keyword_search(){
    var keyword1 = search_word1.value;
    var keyword2 = search_word2.value;
    var str_query = '?query='+ FIELD_CODE1 +' like "' + keyword1 + '" '+ AND_OR +' '+ FIELD_CODE2 +' like "' + keyword2 + '"';

    if(keyword1 == "" && keyword2 == ""){
        str_query = "";
    }else if(keyword1 != "" && keyword2 == ""){
        str_query = '?query='+ FIELD_CODE1 +' like "' + keyword1 + '"'
    }else if(keyword1 == "" && keyword2 != ""){
        str_query = '?query='+ FIELD_CODE2 +' like "' + keyword2 + '"'
    }

    // GET変数を使って、検索結果へジャンプ！
    document.location = location.origin + location.pathname + str_query
}

H_ishi 2019年04月09日 04:28

HANSA様ありがとうございます。

実装に時間がかかり返信が遅くなり申し訳ありません。

２つのドロップダウンからの選択と検索ボタンの表示はすることができました。

まだ、検索の関数の設定まで行えていませんが、時間がかかりそうでしたので一旦報告させていただきます。

ありがとうございました。

ひとつ気になったのですが、今回初めに提示させて頂いたリンク先のコードは

直接入力で、２つのキーワードを含むものを検索しているかと思いますが、

それをドロップダウンに変更し、含むではなく、〇〇以上（=<）に変更することは可能でしょうか？

今後の学習のために教えて頂けたら幸いです。

HANSA 2019年04月09日 04:52

H_ishi さん

実装お疲れ様です！

>直接入力で、２つのキーワードを含むものを検索しているかと思いますが、
>それをドロップダウンに変更し、含むではなく、〇〇以上（=<）に変更することは可能でしょうか？

可能です。

コメント3に記載した箇所の処理は、ざっくりですが、今現在ブラウザで開いている URL を変更する。という処理をしています。

document.location = location.origin + location.pathname + str_query

↓の赤枠部分から、適当な絞り込み条件を入れると、https://{subdomain}.cybozu.com/k/229/?view=20&q=f5577005%20<%3D%20"1" のようなURLに遷移すると思いますが、先ほどの処理はこのURLに飛ばしています。

str_query というのが q=~~~~~ の部分です。

この q= というURLのパラメータは REST API のクエリとほとんど同じです。

なので、↓を参考に ○○以上という記載方法にすれば実装可能かと思います。

https://developer.cybozu.io/hc/ja/articles/202331474#step2

H_ishi 2019年04月25日 05:25

HANSAさま回答ありがとうございます。

https://developer.cybozu.io/hc/ja/community/posts/213524143

上記のコードでdocument.createElement(input)をdocument.createElement(select)に変更して

ドロップダウンに変更できるかと思いますが、ドロップダウンの中身を表示するにはどのようなコードを追加すればよいでしょうか？

以下、該当部分のコードです。

// 検索キーワードその１

varsearch_word1=document.createElement('select');

search_word1.onkeypress=function(e) {

if (e.keyCode&&e.keyCode==13) {

keyword_search();

}

if(result[ FIELD_CODE1 ] !=undefined){

search_word1.value=result[ FIELD_CODE1 ]; // GET引数に、直前の検索キーワードがあったら格納しておく

}

サインインしてコメントを残してください。