kintone JavaScript cheatSheet

JavaScriptを使用したkintoneのカスタマイズを行う際、良く利用する記述をチートシートとして纏めました。
私自身の備忘録も兼ねています。

kintone_cheatSheet.js

/**
 * イベント
 */
(function() {

    "use strict";

    kintone.events.on([
        'app.record.index.show',
        'app.record.index.edit.show',
        'app.record.index.delete.submit',
        'app.record.create.show', 'app.record.edit.show',
        'app.record.create.submit', 'app.record.edit.submit',
        'app.record.create.submit.success', 'app.record.edit.submit.success',
        'app.record.index.edit.submit',
        'app.record.detail.show',
        'app.record.detail.delete.submit',
        'app.record.detail.process.proceed',
        'app.record.index.edit.change.<フィールドコード>',
        'app.record.create.change.<フィールドコード>', 'app.record.edit.change.<フィールドコード>'
    ], function(event) {

        var record = event.record;

        // 増殖バグ回避
        if (document.getElementById ('my_index_button') !== null) {
            return event;
        }

        // レコード詳細画面を取得
        var menu = kintone.app.record.getHeaderMenuSpaceElement();

        // レコード一覧のメニューの下側の空白部分の要素を取得する
        var header = kintone.app.getHeaderSpaceElement();

        // レコード一覧画面を取得
        var headerMenu = kintone.app.getHeaderMenuSpaceElement();

        // スペースを取得
        var space = kintone.app.record.getSpaceElement("スペースID");

        // ボタンの設置
        var myIndexButton = document.createElement('button');
        myIndexButton.id = 'my_index_button';
        myIndexButton.innerHTML = '一覧のボタン';
        myIndexButton.className = "button-simple-cybozu geo-search-btn";
        myIndexButton.onclick = function() {
        // クリック処理
        };
        space.appendChild(myIndexButton);

        // ボタンの設置(jQuery)
        $(space).append($('<button id="btnId" class="btn-class">ボタン</button>'));
        $("#btnId").click(function() {
            // クリック処理
        });


        // アプリIDを取得
        var appId = kintone.app.getId();

        // レコードIDを取得
        var recordId = kintone.app.record.getId();

        // 関連レコード一覧の参照先のアプリIDを取得
        var related = kintone.app.getRelatedRecordsTargetAppId('フィールドコード');

        // ルックアップフィールドの参照先のアプリIDを取得
        var looked = kintone.app.getLookupTargetAppId('フィールドコード');

        // フィールド非表示
        kintone.app.record.setFieldShown("フィールドコード", false);

        // フィールドを編集不可へ
        record.フィールドコード.disabled = true;

        // ルックアップ取得を自動で行う
        record.ルックアップ.lookup = true;

        // フィールド要素を取得
        var elements = kintone.app.getFieldElements('フィールドコード');

        // フィールドにエラー表示
        record.フィールドコード.error = 'このエラーメッセージを表示';

        // レコードにエラーを表示
        event.error = 'エラーです！';

        // グループの開閉(true: 開く, false: 閉じる)
        kintone.app.record.setGroupFieldOpen("グループID", true);

        // チェックボックスの比較
        if(record['フィールドコード'].value.indexOf('チェック') > -1){
           alert("チェックOK");
        }

        // チェックボックスの比較(jQuery)
        if(!($(':input[id*=_52655951]')[0].checked)){
           alert("jQueryで比較する際、IDは部分一致で比較");
        }

        // ステータス変更時にステータスを取得する方法
        var status = event.nextStatus.value;

        // Rest API
        var params = {
            app: kintone.app.getId(),
            id: kintone.app.record.getId(),
            query: 'フィールドコード="abc" order by "フィールドコード" asc limit 1'
        };
        kintone.api(kintone.api.url('/k/v1/records', true), 'GET', params).then(function(resp) {
            // 成功時
            alert(resp.records.レコード番号.value);

            // レコードに値をセット
            var record = kintone.app.record.get();
            record.record.フィールドコード.value = '書き換えた文字列';
            kintone.app.record.set(record);

        }, function(error) {
            // 失敗時
            var errmsg = 'レコード取得時にエラーが発生しました。';
            if (error.message !== undefined) {
                errmsg += '\n' + error.message;
            }
            alert(errmsg);
        });

        // Promiseを利用したモダンなアプリの全レコード取得の書き方
        var fetchRecords = function(appId, opt_query, opt_offset, opt_limit, opt_records) {
            var offset = opt_offset || 0;
            var limit = opt_limit || 500;
            var allRecords = opt_records || [];
            var query = opt_query || '';
            var params = {app: appId, query: query + ' order by レコード番号 asc limit ' + limit + ' offset ' + offset};
            return kintone.api(kintone.api.url('/k/v1/records', true), 'GET', params).then(function(resp) {
                allRecords = allRecords.concat(resp.records);
                if (resp.records.length === limit) {
                    return fetchRecords(appId, offset + limit, limit, allRecords);
                }
                return allRecords;
            });
        };
        fetchRecords(<アプリID>).then(function(records) {
            console.log(records);
        });

        return event;
    });

})();


/**
 * レコード詳細画面へボタンを設置
 */
(function() {

    "use strict";

    // レコード詳細画面へボタンを設置
    kintone.events.on('app.record.detail.show', function(event) {

      // 増殖バグ回避
      if (document.getElementById ('send_mail_button') != null) {
          return;
      }

      //ボタン作成
      var sendMailButton = document.createElement('button');
      sendMailButton.id = 'regist_comment_button';
      sendMailButton.style.height = '50px';
      sendMailButton.style.width = '200px';
      sendMailButton.style.margin = '0px 10px';
      sendMailButton.innerHTML = ' メール送信 ';
      sendMailButton.className = 'kintoneplugin-button-normal'; // kintone標準のスタイルを反映するためには、右記CSSファイルを読み込むこと https://github.com/kintone/plugin-sdk/blob/master/stylesheet/51-current-default.css

      //ボタン押下イベント
      sendMailButton.onclick = function() {
         if(confirm("メールを送信します。\nよろしいですか？")){
           send_mail(event);
         }else{
          return;
        }
      }

      //ボタン設置
      kintone.app.record.getHeaderMenuSpaceElement().appendChild(sendMailButton);

    });
})();