logo

サイト内検索
ココログ最強検索 by 暴想

最近のトラックバック

無料ブログはココログ

« Reports Connect for Salesforce Salesforce1アプリへの組み込み その2 | トップページ | Reports Connect for Salesforce / for kintone QRコードの出力 »

Reports Connect for Kintone 複数ボタンの実装方法

Reports Connect for Kintone アプリへの組込み方法およびReports Connect for Kintone テーブルのデータの読込の記事で、Javascriptで印刷処理を起動する方法について解説しました。
今回は、1画面で複数のボタンを配置して、それぞれ異なる帳票を作成する場合の方法について解説します。

例として、Reports Connect for Kintone テーブルのデータの読込の記事で紹介したJavascriptを取り上げます。

ソースコードは以下のようになっていました。

-------------------------------------

/*
* 商談 見積もり/請求印刷
*/
(function() {

    //①ReportsConnectのライブラリーをロードする
    load("https://kps-reportsconnectk.herokuapp.com/js/kpsrck.js");
    //②ロード完了後kpsrc.setupReportを呼び出す
    waitLoaded(function(){
        kpsrc.setupReport(17, "商談見積もり");
    });
    //③詳細表示時に、印刷ボタンを追加する(bt1はボタン配置スペースの要素ID)
    kintone.events.on('app.record.detail.show', function(event) {
            var bt = document.createElement('input');
            bt.type = "button";
            bt.value = "見積印刷";
            bt.onclick = goPrint;
            var btsp = kintone.app.record.getSpaceElement("bt1");
            btsp.appendChild(bt);
        });
    //④印刷ボタン押下時の処理。kpsrc.rcparms.kps_recidに現在のレコードIDを動的に設定し
    //kpsrc.gorcprint呼び出す
    function goPrint() {
        kpsrc.rcparms.kps_recid = kintone.app.record.getId();
        kpsrc.gorcprint();
    }
    //以下の関数はそのままコピペしてください。
    // http ヘッダに要素を追加します
    function load(src) {
        var head = document.getElementsByTagName('head')[0];
        var script = document.createElement('script');
        script.type = 'text/javascript';
        script.src = src;
        head.appendChild(script);
    }
    // ReportsConnect がロードされるまで待ちます
    var timeout = 10 * 1000; // ms
    var interval = 100; // ms
    function waitLoaded(callback,parm) {
        setTimeout(function() {
            timeout -= interval;
            if (typeof kpsrc !== 'undefined') {
                callback(parm);
            } else if (timeout > 0) {
                waitLoaded(callback,parm);
            } else {
                // abort
            }
        }, interval);
    }
})();

---------------------------------------------------

このJavascriptを修正して、見積印刷ボタンに加えて、請求印刷ボタンを追加して、請求書も作成できるようにしたいと思います。

まずは、前提として、「商談見積もり」と同様に、「商談請求」という帳票のデザインがされ、その帳票レコードがすでに作成されている事とします。

(帳票のデザイン方法に関してはこちらの記事等を参考にしてください)

画面のイメージはこのようにボタンが2つ並ぶ感じです。

20140307_14h28_44

 

変更後のJavascriptは、以下のようになります。

-------------------------------------

/*
* 商談 見積もり印刷
*/
(function() {

    //①ReportsConnectのライブラリーをロードする
    load("https://kps-reportsconnectk.herokuapp.com/js/kpsrck.js");
    //②ロード完了後kpsrc.setupReportを呼び出す
    waitLoaded(function(){
        kpsrc.setupReport(17, "商談見積もり");
        kpsrc.setupReport(17, "商談請求");
    });
    //③詳細表示時に、印刷ボタンを追加する(bt1はボタン配置スペースの要素ID)
    kintone.events.on('app.record.detail.show', function(event) {
            var bt = document.createElement('input');
            bt.type = "button";
            bt.value = "見積印刷";
            bt.onclick = goPrint;
            var btsp = kintone.app.record.getSpaceElement("bt1");
            btsp.appendChild(bt);
            var bt2 = document.createElement('input');
            bt2.type = "button";
            bt2.value = "請求印刷";
            bt2.onclick = goPrint2;
            btsp.appendChild(bt2);
        });
    //④印刷ボタン押下時の処理。kpsrc.rcparms.kps_recidに現在のレコードIDを動的に設定し
    //kpsrc.gorcprint呼び出す
    function goPrint() {
        kpsrc.rcparms = kpsrc.parmsmap["商談見積もり"];
        kpsrc.rcparms.kps_recid = kintone.app.record.getId();
        kpsrc.gorcprint();
    }
    function goPrint2() {
        kpsrc.rcparms = kpsrc.parmsmap["商談請求"];
        kpsrc.rcparms.kps_recid = kintone.app.record.getId();
        kpsrc.gorcprint();
    }
    //以下の関数はそのままコピペしてください。
    // http ヘッダに要素を追加します
    function load(src) {
        var head = document.getElementsByTagName('head')[0];
        var script = document.createElement('script');
        script.type = 'text/javascript';
        script.src = src;
        head.appendChild(script);
    }
    // ReportsConnect がロードされるまで待ちます
    var timeout = 10 * 1000; // ms
    var interval = 100; // ms
    function waitLoaded(callback,parm) {
        setTimeout(function() {
            timeout -= interval;
            if (typeof kpsrc !== 'undefined') {
                callback(parm);
            } else if (timeout > 0) {
                waitLoaded(callback,parm);
            } else {
                // abort
            }
        }, interval);
    }
})();

---------------------------------------------------

[kpsrc.setupReportの呼び出しを追加]

②の箇所に帳票「商談請求」」を初期設定するkpsrc.setupReportを追加します

[ボタンの追加]

③の箇所で、請求印刷ボタンを作成し追加します。その際、onclickイベントで、関数goPrint2が呼び出されるようにします。

[関数goPrint2の追加]

④の箇所で関数「goPrnt2」を追加します。goPrint、goPrnt2それぞれの処理の最初で変数kpsrc.rcparmsに kpsrc.parmsmap[印刷する帳票レコード名]の値を設定します。

(kpsrc.parmsmap[印刷する帳票レコード名]には、kpsrc.setupReportで該当の帳票を初期設定した際のkpsrc.rcparmsの値が入っています。kpsrc.setupReportを複数呼び出した場合はkpsrc.rcparmsが上書きされてしまうので、kpsrc.parmsmapから正しい値を設定し直します)

修正箇所は以上の3箇所です。

今回のような単票イメージのパターン以外でも同様の方法で、1画面複数ボタンが実現できるはずです。

« Reports Connect for Salesforce Salesforce1アプリへの組み込み その2 | トップページ | Reports Connect for Salesforce / for kintone QRコードの出力 »

Kintone」カテゴリの記事

Reports Connect」カテゴリの記事

コメント

コメントを書く

(ウェブ上には掲載しません)

トラックバック

この記事のトラックバックURL:
http://app.f.cocolog-nifty.com/t/trackback/1482716/55272606

この記事へのトラックバック一覧です: Reports Connect for Kintone 複数ボタンの実装方法:

« Reports Connect for Salesforce Salesforce1アプリへの組み込み その2 | トップページ | Reports Connect for Salesforce / for kintone QRコードの出力 »