kintone王子(承認待ち)がルックアップを便利にしてみた(jQuery UI, autocomplete)

ごきげんよう。仲宗根です。

今回はCybozu CDNでも提供されているjQuery UI をつかって便利なルックアップ機能を自作してみたいと思います。

今回使用するCDN

jQuery UI

https://jqueryui.com/

https://js.cybozu.com/jqueryui/1.12.0/jquery-ui.min.js

kintoneの「ルックアップ」 とは

kintone のルックアップ機能のイメージはこちらのような感じになります。

顧客マスタ等のkintoneアプリから、営業日報等のアプリが顧客の情報を取得することが出来ます。

auto_complete_demo

このアニメーションでは何やら細かい操作をしていますが、簡単に説明すると下記のような流れの操作をしています。

「ろうとアイコン」→「条件」→「フィールドとその値の選択」

この操作は何がしたいかというと例えば顧客マスタにレコードがたくさんありすぎる場合、この操作で必要なレコードを見つけ出すことが出来ます。

ただ、このアプリを作った人や、kintoneアプリにとても詳しい人ならこの機能を難なく使いこなせるとおもいますが、たまにしかアプリを使わない人たちからは次のような声が聞こえてきます。

「そんな機能あるの知らなかったよ!アイコンの場所分かりにくい!」

「なんか微妙。。もっと使いやすくして。。」

もっとリアルな声だと、

「絞込できるのは良いけど、顧客マスタの項目がおおすぎて、必要な項目を選ぶのが大変。。」

といったような状況があるかと思います。。

 

jQuery UI を使った自作ルックアップ

 

そこで!  今回はjQuery UIをつかってルックアップ機能と同様にマスタから情報を取得する機能+αで入力・絞込をもっと便利にしてみました!

実際の動作はこちらです。

auto_complete_demo3

input要素に入力されたキーワードからクエリを作成してマスタからデータを取得してくるものです。
標準フィールドのルックアップとやってることはほぼ同じですが、こちらの自作ルックアップでは下記のメリットがあるかと思います。

  •  入力操作がシンプル
  • リアルタイムでマスタの検索結果が候補として表示される
  • 絞込の切換が少ない操作で変更できる

このようなメリットで先ほどのクレームに対して次のように対応出来ます。

「そんな機能あるの知らなかったよ!アイコンの場所分かりにくい!」
「アイコンを探す必要はありません! 検索するキーワードを入力すれば候補が自動的に出てきますよ!」

「なんか微妙。。もっと使いやすくして。。」
「リアルタイムに候補が出てくるので、かっこよくて使いやすいでしょ!?」

「絞込できるのは良いけど、顧客マスタの項目がおおすぎて、必要な項目を選ぶのが大変。。」
「よく使う項目を教えて頂ければ見た目も操作もシンプルにカスタマイズ出来ますよ!!」

完璧です。

 

カスタマイズJavaScript

 

すこし行数がおおいですが、今回のカスタマイズに使用したJavaScriptもこちらに載せておきます。
ポイントとしては

  •  jQuery UI ウィジェットのautocompleteを使用
  •  スペースフィールドにinput要素を追加しそこにautocompleteを適用
  • datalistを入力が変わる毎に顧客マスタの検索結果で更新
  • マスタへのクエリをドロップダウンの項目に応じて切替えている

になるかと思います。


(function (){
  var MASTER_ID = 1471;

  kintone.events.on(["app.record.create.show","app.record.edit.show"], function(event){

    // オートコンプリート・インクリメンタルサーチが実装されているinput要素を作成します。
    createAutoCompleteForm(event, "space_field", "訪問先", MASTER_ID, "会社名");

    return event;
  });

  kintone.events.on(["app.record.detail.show"], function(event){

    kintone.app.record.getSpaceElement("space_field").parentNode.style.display = "none";

    return event;
  });

  function createAutoCompleteForm(event, space_id, field_code, master_id, serch_key){

    var record = event.record;
    var element = kintone.app.record.getSpaceElement(space_id);
    var input = document.createElement("input");// kintoneの標準フィールドの代わりに使用するinput要素

    input.value = record[field_code].value ? record[field_code].value : "";
    element.innerHTML = field_code + ": ";
    element.appendChild(input);

    kintone.app.record.setFieldShown(field_code, false);


    $(input).on("keyup focusout", function(e) {

      var datalist = [];//input要素の下に表示する補完された候補(初期値は空)
      var query = "";
      var rec = kintone.app.record.get();

      if(input.value){
        // マスタへのクエリをドロップダウンの項目に応じて切替えている
        query = serch_key + " like \"" + input.value + "\" and " + "顧客ランク in \(\"" + rec.record.顧客ランク.value + "\"\)";
      }

      if(query){

        kintone.api("/k/v1/records", "GET", {app:master_id, query: query}, function(resp){

          // datalistを入力が変わる毎に顧客マスタの検索結果で更新
          for(var i in resp.records){
            datalist.push(resp.records[i][serch_key].value);
          }

          // jquery UI ライブラリを使用してオートコンプリート機能を使用する。
          $(input).autocomplete(
            {
              source : function(request, response) {
                response(datalist);
              },
              autoFocus: false,
              delay: 800,
              minLength: 0
            }
          );

        });

      }


      rec.record[field_code].value = input.value;
      kintone.app.record.set(rec);

    });
  }
})();

以上、今回はルックアップをjQuery UI の autocompleteでカスタマイズをご紹介させていただきました!
※サンプルプログラムは、その動作を保証するものではありません