LoginSignup
2

More than 5 years have passed since last update.

kintone プラグイン開発メモ その9(設定画面の作成)

Last updated at Posted at 2019-02-11

プラグイン作家になるためメモも最後となりました。(長かった)

その9では、これまで仮で作成してきた設定画面を、アプリのフィールド情報から自動生成します。

まずは設定画面のソースを貼り付けておきます。

設定画面用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;
            // 1つ目の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; }
                // フィールド要素1つ取り出し
                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) {
                            // 2つ目以降は、要素をクローンして親要素に追加する
                            $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"
        ]
    }
}

説明は後ほど。

参考リンク

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
2