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でカスタマイズをご紹介させていただきました!
※サンプルプログラムは、その動作を保証するものではありません

kintone王子(仮)がDataTablesを使ってみた

はじめまして。レキテク初投稿の仲宗根(肩書未定)です。

これから定期的にCybozu CDNで公開されているものを

kintone アプリで使ってみたレポートを書いていきたいと思います。

 

今回はDataTablesというjqueryのライブラリを使用してみたいと思います。

DataTablesが何かについてはこちらが分かりやすかったです。

簡単に言うと、HTMLのtableに対して簡単にソート・ページングなどの便利な機能を追加できるものです。

 

準備

 

kintoneアプリ

 

table_customize

 

テーブルを適当に作ってください。
(テーブルを識別するためのフィールドコードはとりあえず「Table」にします。)

 

 

アプリに登録するJava Script/CSS

 

JavaScript

https://js.cybozu.com/jquery/2.2.0/jquery.min.js (jqueryを読み込む必要があります。)
https://js.cybozu.com/datatables/v1.10.12/js/jquery.dataTables.min.js (今回つかうライブラリ)

table_customize.js (自分で書きましょう)

CSS

https://js.cybozu.com/datatables/v1.10.12/css/jquery.dataTables.min.css

 

 

table_customize.jsは自分で書く必要があります。

ほんの少しだけなのでコチラに載せておきます。


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

    // レコード詳細画面でテーブルが表示されるまでちょっと待つ
    setTimeout(function(){
      $(kintone.app.record.getFieldElement("Table")).dataTable();
    },2000)

  return event;

  });
})();

kintoneではどうもレコード詳細画面表示イベント(“app.record.detail.show”)の後に、少し時間を置いてテーブルが表示されるようでした。

そのため、ちょっとかっこ悪いですがDataTablesを適用する際にはsetTimeoutで少し待ち時間を入れています。

「テーブルが表示された後のイベント」等のkintone Javascript APIが公開されるともう少し綺麗にかけるかもしれません。

 

こんな感じ

 

table_customize

DataTableのCSS( https://js.cybozu.com/datatables/v1.10.12/css/jquery.dataTables.min.css )が適用されているので、レコードの詳細画面でいつものテーブルとは少しスタイルが変わって表示されています。

 

ソート機能

 

table_customize

ヘッダをクリックするとその列の降順、昇順の切換ができます。

実際のテーブルフィールドの並びが変更されることはありませんが、行数が多いものなどを表示するときに見やすくなっていいかと思います。

 

キーワード検索

table_customize

キーワード検索もインクリメンタルサーチで気持よくできます。

 

 

感想

このライブラリでは簡単にkintoneのテーブルを多機能にカスタマイズ出来るみたいでした。

kintoneのテーブルでは中の行を優先順位やキーワードなどで並び替え・絞込はできないため

このライブラリは他にも活用シーンがありそうですね。

 

以上、簡単でしたが今回は「DataTables」のCDNの紹介でした。

今後もCDNを使ってみた記事をどんどん書いていきたいと思いますのでよろしくお願いします!