設定画面用HTML

config.html

<html>
    <body>
        <h1>ゼロ埋めプラグイン設定画面</h1>
        <div id="form">
            <div class="zero-fill-plugin_div">
                <input type="checkbox" name="name" value="value" class="checkbox">
                <label class="label" for="text">label</label>
            </div>
        </div>
        <div class="button">
            <button type="button" id="button_submit">保存</button>
            <button type="button" id="button_cancel">キャンセル</button>
        </div>
    </body>
</html>

設定画面用JavaScript

config.js

jQuery.noConflict();
(function ($, pluginId) {
    "use strict";
    $(document).ready(function() {

        function escapeHtml(htmlstr) {
            return htmlstr
                .replace(/&/g, '&amp;')
                .replace(/</g, '&lt;')
                .replace(/>/g, '&gt;')
                .replace(/'/g, '&quot;')
                .replace(/'/g, '&#39;');
        }

        // 設定を取得する
        let conf = kintone.plugin.app.getConfig(pluginId);
        let confValue = [];
        if (Object.keys(conf).length !== 0) {
            confValue = [
                JSON.parse(conf.ZeroFillItem),
            ];
        }
        console.log(confValue);

        let param = {'app': kintone.app.getId()};
        let url = kintone.api.url('/k/v1/preview/app/form/fields', true);
        // アプリのフォームフィールド情報を取得
        kintone.api(url, 'GET', param, function(resp) {
            console.log(resp);
            let cloneElemCnt = 0;
            // １つ目のdiv要素のクローンを変数にセット
            let $cloneElem = $('.zero-fill-plugin_div').clone();
            console.log($cloneElem);
            // フィールド要素ごとループ
            for (let key in resp.properties) {
                console.log(key);
                // keyが存在しない場合は次へ
                if (!resp.properties.hasOwnProperty(key)) { continue; }
                // フィールド要素１つ取り出し
                let prop = resp.properties[key];
                // フィールドタイプごとに処理を分ける
                switch (prop.type) {
                    case 'SUBTABLE':
                    case 'STATUS':
                    case 'STATUS_ASSIGNEE':
                    case 'RECORD_NUMBER':
                    case 'CALC':
                        break;
                    
                    case 'NUMBER':
                        if (cloneElemCnt !== 0) {
                            // ２つ目以降は、要素をクローンして親要素に追加する
                            $cloneElem.clone().appendTo('#form');
                        }
                        $('.label').eq(cloneElemCnt).text(escapeHtml(prop.code));
                        $('.checkbox').eq(cloneElemCnt).attr('name', escapeHtml(prop.code));
                        $('.checkbox').eq(cloneElemCnt).attr('id', 'check_' + cloneElemCnt);
                        $('.checkbox').eq(cloneElemCnt).attr('value', escapeHtml(prop.code));
                        // 既存の設定値を反映
                        if ($.inArray(prop.code, confValue[0]) !== -1) {
                            $('.checkbox').eq(cloneElemCnt).attr('checked', 'checked');
                        }
                        cloneElemCnt++;
                        break;

                    default :
                        break;
                }
            }
        });

        function createConfig() {
            // 項目にチェックがついているフィールドを取得
            let arrayZeroFillItem = $('.checkbox:checked').map(function() {
                return $(this).val();
            }).get();
            let config = {
                'ZeroFillItem': JSON.stringify(arrayZeroFillItem),
            };
            return config;
        }

        // 保存
        $('#button_submit').on('click', function() {
            let config = createConfig();
            console.log(config);
            // 設定を保存する
            kintone.plugin.app.setConfig(config);
            window.alert("保存しました");
        });
        // キャンセル
        $('#button_cancel').on('click', function() {
            window.history.back();
        });
    });

})(jQuery, kintone.$PLUGIN_ID);

マニフェストファイル

設定画面用のconfig.js内で、jQueryを利用する為にmanifest.jsonでjQueryを読み込みます。読み込み順はconfig.jsの前にします。

manifest.json

{
    "manifest_version": 1,
    "version": 1,
    "type": "APP",
    "name": { 
        "ja": "ゼロ埋めプラグイン",
        "en": "zero-fill plugin"
    },
    "description": { 
        "ja": "これはゼロ埋めプラグインです。",
        "en": "This is zero-fill plugin."
    },
    "icon": "image/icon.png",
    "desktop": {
        "js": [
            "js/customize.js"
        ]
    },
    "config": {
        "html": "html/config.html",
        "js": [
            "https://js.cybozu.com/jquery/3.3.1/jquery.min.js",
            "html/config.js"
        ]
    }
}

説明は後ほど。

参考リンク

jQuery API Document