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

0. 目次

0. 目次
1. 概要
2. イメージ図
3. 準備
- 3-1 フィールド定義
4. 実装
5. まとめ

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);

 });