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-]+)\/([\w-]+)\/([\d]+)/;
            console.log(url.match(reg));
            if (url.search('guest') !== -1) {
                console.log(url.match(reg));
            } else {
                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);
                });
            });
        });
    });
})();

#サンプルアプリの準備

お気に入りのアプリをアプリストアからインストールします。今回は交通費申請アプリを使っています。（アイコンが可愛いので結構お気に入り♪）

###フォームにスペースを追加
どこでも良いのですが、スペースを追加します。
サンプルコードの通りに使う場合は、フィールドコードを printButton とします。

###JavaScriptファイルとCSSファイルをアップロード

サンプルコードと「kintone UI Component」をアップロードして保存します。

#サンプルコードの説明
処理の流れは次の通り

1.印刷ボタンを設置
2.印刷ページのURLを生成

###何やってるか？
let button = new kintoneUIComponent.Button({text: '印刷'});
「kintone UI Component」でボタンを生成

elPrintButton.appendChild(button.render());
JavaScript（以下JS）でボタンの要素をスペースフィールドに追加

resolve(button);
成功時のPromiseコールバック変数にボタンオブジェクトをセットして、印刷用のURL生成コードに渡します。

let url = kintone.api.url('/k/v1/records', true);
kintone JavaScript API（以下KJS）でURLを取得します

let reg = /http(s)?:\/\/([\w-]+\.)+([\w-]+)+\/([\w-]+)/
JSでURLを切り出す為に正規表現を設定します。URLがおかしい場合はこちらのコードを修正してみてください。正規表現のデバックにはRubularが便利です。

UiButton.on('click', function(event) {
    window.open(printURL, null);
});

ボタンオブジェクトのclickイベントのコールバック関数に生成した印刷画面遷移用のURLを仕込んでおきます。コールバックに仕込んでおくことで、印刷ボタンが押された時のclickイベントで処理が発火します。

※サンプルコードには動作確認の為、デバッグコードを残してあります。

#注意点

• 「kintone UI Component」を利用する前提なので、GitHubからJSとCSSをダウンロードして、そのファイルをアップロードしてください。
• kintoneのJavaScriptイベントapp.record.detail.showではeventをreturnしないでください。理由はこちらをご覧ください。

#必要スキル

• cybozu developer network のサンプルコードを自分で設置できる
• JavaScriptのコードをデバッグできる。

ヘッダーメニューにボタンを置く場合

下記のコードに差し替えてください。

        new kintone.Promise(function(resolve, reject) {
            let button = new kintoneUIComponent.Button({text: '印刷'});
            kintone.app.record.getHeaderMenuSpaceElement().appendChild(button.render());
            resolve(button);
            return;
        })