kintoneの詳細画面にkintoneライクなUIを使った印刷ボタンを置いてみた

時代はペーパーレスですが、まだまだ「最後は紙に印刷（あるいはPDFに）したい」という要望を無視できないので、標準のkintoneの詳細画面から何故か隠されている印刷メニューを、kintoneライクなUIを使える「kintone UI Component」を使って主役に抜擢してみるサンプルを作ってみました♪

印刷ボタンの復権を切に願いまして、以下にサンプルコードを載せます。

画面イメージ

サンプルコード

(function() {
    'use strict';
    kintone.events.on('app.record.detail.show', function(event) {
        new kintone.Promise(function(resolve, reject) {
            let button = new kintoneUIComponent.Button({text: '印刷'});
            let elPrintButton = kintone.app.record.getSpaceElement('printButton');
            elPrintButton.appendChild(button.render());
            resolve(button);
            return;
        })
        .then(function (UiButton) {
            let url = kintone.api.url('/k/v1/records', true);
            let reg = /http(s)?:\/\/([\w-]+\.)+([\w-]+)+\/([\w-]+)/;
            console.log(url.match(reg));
            let appId = kintone.app.getId();
            console.log(appId);
            let body = {'id': appId};
            kintone.api(kintone.api.url('/k/v1/app', true), 'GET', body, function(resp) {
                // success
                console.log(resp);
                let printURL = url.match(reg)[0] + '/' + resp.appId + '/print?record=' + event.recordId;
                console.log(printURL);
                UiButton.on('click', function(event) {
                    window.open(printURL, null);
                });
            });
        });
    });
})();