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

CRUD Lab. Tech Blog

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

【kintone】kintone.app.record.getの活用例 - 進捗ゲージを表示してみる -

kintone

0. 目次

1. 概要


ギークス株式会社CRUD Lab.まとめ役のATSUSHIです。

今回はkintone.app.record.getというkintone JS APIを利用して進捗ゲージを表示してみたいと思います。

kintone.app.record.getを利用することで
現在開いてるレコードデータをJSON形式で取得することができます。
これは、通常のDOM操作でのdocument.getElementBy〜をkintoneアプリの詳細画面に表示されているform要素全てに対して行う(ような)仕組みです。 kintone.app.record.setと併用して、kintoneのカスタマイズにフル活用できます。

kintoneでJavascritptを使ってカスタマイズする場合、
多くの処理はイベントハンドラ内で処理を記述するのがシンプルかつ効率が良いことと思います。 今回紹介する技術を駆使することで痒いところに手が届くような仕組みを提供できるようになります。

実装手順は以下のとおりです。

  • html5のprogressタグをスペースエレメント上に配置する
  • タイマーを設置して一定間隔で入力値をチェックする
  • 進捗状況は必須項目フィールドの値の有無を判断して表現する

前置きが長くなりましたが、以下ハンズオンで進めます。

2. イメージ図


f:id:crud_lab_editor:20160204181043g:plain

3. 準備


3-1 フィールド定義

フィールド名 フィールドコード 初期値 その他
スペース -- -- 要素ID:el_progress_bar ※進捗ゲージ表示用
数値 fc_num -- --
計算 fc_num_with_tax -- 計算式:fc_num*1.08
文字列(1行) fc_text -- --
文字列(複数行) fc_multitext -- --

f:id:crud_lab_editor:20160204181020p:plain

4. 実装



'use strict';

// 必要なjsライブラリをインクルード
document.write("<script type='text/javascript' src='https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js'></script>");
document.write('<script src="https://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.8.3/underscore-min.js"></script>');


// レコードの新規作成、編集時に処理を実行する
kintone.events.on(['app.record.create.show','app.record.edit.show'], function(event){

    // スペースエレメントに進捗ゲージを作成
    var el_progress_bar = document.createElement('div');
    el_progress_bar.id   = "div_progress_bar";
    kintone.app.record.getSpaceElement("el_progress_bar").appendChild(el_progress_bar);
    $('<progress id="progress_bar" value="20" max="100"></progress><span id="progress_txt">100%</span>').appendTo('#div_progress_bar');
    $('#progress_bar').css({width:'100%'});


    // 1秒間隔のタイマーを設置
    var timer = setInterval(function() {

        var  record = kintone.app.record.get().record // 表示中のレコード情報を取得
            ,field_code = ['fc_num', 'fc_text', 'fc_multitext'] // 必須項目のフィールドを定義
            ,percentage = 0
            ,filled = _.filter(field_code, function(key){
                // 入力値の有無を確認
                if(!_.isNaN(record[key].value)) return record[key].value;
            })
            // 進捗率を算出
            percentage = Math.ceil((filled.length/field_code.length)*100);

            // UIに結果を反映
            console.log(percentage);
            $('#progress_bar').val(percentage);
            $('#progress_txt').text(percentage+'%');

    }, 1000);

 }); 
  • 今回は記述を完結にするためにjQueryとUnderscore.jsを使用していますが、 無くても実装可能です。
  • 入力値のチェック処理を行うトリガーとしてapp.record.create.changeを利用するパターンも考えられますが、実装が煩雑になると考えsetInterval()を採用しました。

5. まとめ


この仕組みを理解することで、 例えばこんなスタマイズが可能になると思います。

  • 入力値のバリデーションチェック
  • disableをハンドルすることによる動的な必須項目への誘導
  • 複雑な自動計算ロジックの実装

上記に挙げたアイデアについては今回は深く触れませんが、今後の投稿において触れていければと思います。