kintone プラグイン開発メモ その８（ダミーの設定値を読み込んでJavaScriptカスタマイズしてみる）

その７からの続き。

プラグイン設定画面を作成する前に、先にJavaScriptカスタマイズプログラムを作ります。

フィールドゼロ埋めJavaScriptカスタマイズ

kintoneアプリのフィールドをゼロ埋めするカスタマイズを作成します。
この時にプラグインの設定値を取得したと仮定してダミーデータを作り、それを利用してカスタマイズしていきます。

カスタマイズ概要

以下のような内容です。

• 編集画面、新規作成画面から保存する際に実行
• プラグインの設定値を取得（ダミーです）
• 単価フィールドが空欄の時にフィールドにゼロをセットする
• 保存する

動作イメージ

編集画面又は新規作成画面時にゼロ埋めボタンを表示させます。

ゼロ埋めボタンを押下した際に、単価フィールドが空の時にゼロを埋めます。

保存後の画面です。

カスタマイズ側のソースコード

通常のカスタマイズと少し違う点は、設定画面から値を読み込んだと仮定して、下記の流れで作成しています。

1. 設定値を読み込みます。
2. ダミーの設定値を用意します。
3. 設定値を使って処理を記述します。

customize.js

(function(pluginId) {
    "use strict";
    let config = kintone.plugin.app.getConfig(pluginId)
    console.log(config);

    // var config = {
    //     'DisableItem': JSON.stringify(arrayDisableItem),
    //     'DisableLine': JSON.stringify(arrayDisableLine)
    // };

    config = {
        'ZeroFillItem': ["単価", "単価_1", "単価_0"]
    };
    console.log(config);
    console.log(JSON.stringify(config));

    // 詳細画面　編集、新規作成
    kintone.events.on(['app.record.edit.show', 'app.record.create.show'], function(event) {
        let myIndexButton = document.createElement('button');
        myIndexButton.id = 'my_index_button';
        myIndexButton.innerHTML = 'ゼロ埋めボタン';
        myIndexButton.onclick = function() {
            let record = kintone.app.record.get();
            config.ZeroFillItem.forEach(function(value){
                if (!record.record[value].value) {
                    console.log("record.value is NULL or undefined");
                    record.record[value].value = 0;
                } else {
                    console.log(record.record[value].value);
                }
            });
            kintone.app.record.set(record);
        }
        kintone.app.record.getHeaderMenuSpaceElement().appendChild(myIndexButton);
        return event;
    });
})(kintone.$PLUGIN_ID);

次はいよいよ設定画面を作成していきます。