kintoneUIComponentでボタンを設置する

kintoneUIComponentを使ってボタンを設置する

英語ドキュメントしか出てこなかったので、参考までに書いておく。なお、作ったのはタイムカードアプリなので、サンプルの定義はそれらしい記述になっているのでご了承を。

大前提

kintoneUIComponentのライブラリはアプリに読み込んでおくこと。

ボタン定義

まず、ボタンの定義をする。ボタンに表示するテキストと、ボタンのタイプ、submitとnormalを選べる。

kintoneui.js

        // 開始打刻ボタン定義
        var restStartButton = new kintoneUIComponent.Button({
           text: '休憩開始',
           type: 'submit'
        });

ボタンを設置する

レコード詳細画面で、ボタンを設置したい場所に「スペース」を定義して、その上で上記で定義したボタンを設置する。getSpaceElementで取っているのが、スペースのID。

kintoneui.js

        // 開始打刻ボタン定義
        var restStartButton = new kintoneUIComponent.Button({
           text: '休憩開始',
           type: 'submit'
        });
        // 開始打刻ボタン設置
        let elStartButton = kintone.app.record.getSpaceElement('restStart');
        elStartButton.appendChild(restStartButton.render());

ボタンを押下した時の挙動を定義する

ボタンの場合は「押下（クリック）」した時の動作を定義する。ちなみに別関数を呼び出しているだけ。

kintoneui.js

        // 開始打刻ボタン定義
        var restStartButton = new kintoneUIComponent.Button({
           text: '休憩開始',
           type: 'submit'
        });
        // 開始打刻ボタン設置
        let elStartButton = kintone.app.record.getSpaceElement('restStart');
        elStartButton.appendChild(restStartButton.render());
        // 開始打刻
        restStartButton.on('click', function(){
            setRestStartTime();
        });

参考までに、呼び出し先はこんな感じ。

kintoneui.js

    // 休憩開始打刻
    function setRestStartTime(){
        var record = kintone.app.record.get();
        record['record']['休憩開始']['value'] = moment().format('YYYY-MM-DD HH:mm');
        kintone.app.record.set(record);
    }