logo

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

最近のトラックバック

無料ブログはココログ

« 2014年1月 | トップページ | 2014年9月 »

2014年3月

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

前回に引き続き、ReportsConnect for SalesforceのSalesforce1アプリへの組み込み方法について解説します。

今回は、ナビゲーションメニューから呼び出すVisualforceページとして組み込む方法について解説します。

帳票は「Reports Connect for Salesforce アプリケーションへの組込み方法」の記事で使用した帳票「ユーザーリスト」を使用します。

[Visualforceページの作成]

さっそくですが、Visualforceのソースは以下の様になります。

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

<apex:page docType="html-5.0" standardStylesheets="false" showheader="false" sidebar="false">      <!--Include Stylsheets for the Mobile look and feel -->
      <apex:stylesheet value="{!URLFOR($Resource.MobileTempCommon,
                'common/css/app.min.css')}"/>
      <apex:includeScript value="{!URLFOR($Resource.MobileTempCommon,
                'common/js/jQuery2.0.2.min.js')}"/>
      <apex:includeScript value="{!URLFOR($Resource.MobileTempCommon,
                'common/js/zebra_datepicker.min.js')}"/>
      <apex:includeScript value="{!URLFOR($Resource.MobileTempCommon,
                'common/js/main.min.js')}"/>
      <apex:includeScript value="{!URLFOR($Resource.MobileTempCommon,
                'common/js/jquery.nouislider.min.js')}"/>      
<apex:form >
        <div id="result" style="display:none"/>
        <div class="form-control-group">
            <div class="form-control form-control-select">
                <select name="condition">
                    <option value=" ">全件</option>
                    <option value="where Profile.UserType='Standard'">Standard</option>
                </select>
            </div>
        </div>
    <kpsr:RCOne reportId="ユーザーリスト" direct="false"/>
</apex:form>
</apex:page>
------------------------------------------------

このページを「PrintUserOne」という名前で保存しました。
前回同様、apex:pageタグの指定とapex:stylesheetタグ、apex:includeScriptタグの指定は、「Mobile Design Templates」を使用する際のガイドライン通りのものです。

apex:formタグの中に、セレクトリストを用意してあります。これは、conditionというキーでSOQLのwhere節を設定できるようにして、ユーザーにProfile.UserTypeを絞り込む選択を可能にしているものです。
このあたりの仕組みは「Reports Connect for Salesforce アプリケーションへの組込み方法」の記事で行った方法と同様です。
さらに、apex:formタグの中にkpsr:RCOneタグを書きます。帳票名をreportIdに指定し、今回はdirect="false"と設定します。
kpsr:RCOneタグは、ディフォルトでは呼び出されるとすぐに帳票作成処理を起動しますが、direct="false"と設定すると、帳票作成処理を行うボタン表示して、ボタンによる帳票作成処理の起動を可能にします。

[ナビゲーションメニューへの組み込み]

このVisualforceページをSalesforce1のナビゲーションメニューに表示する設定を行います。手順は以下のとおりです。

Visualforceタブの作成

  1. 設定->作成->タブ
  2. Visualforceタブのセクションから新規を押す
  3. Visualforceページで 先ほど作成したPrintUserOneを選択
  4. タブラベルに「ユーザーリスト」を入力
  5. タブスタイルに適当に選択
  6. 次へ->次へ
  7. タブを含めるチェックをすべて外す
  8. 保存を押す
  9. PrintUserOneの編集リンクを押す
  10. モバイル準備完了をチェック、保存を押す

一回、保存した後、もう一度編集リンクを押して「モバイル準備完了」のチェックを入れる必要があります。また、Visualforce側の設定で「Salesforce モバイルアプリケーションでの使用が可能」のチェックが入っている必要があります。この両方のチェックを入れておかないと、ナビゲーションメニューの選択肢に該当のVisualforceページが出てきません。

20140305_14h23_31

ナビゲーションメニューに追加

  1. 設定->モバイル管理->モバイルナビゲーション
  2. PrintUserOneを追加
  3. 保存を押す

これで、ナビゲーションメニューにユーザーリストが出るようになります。

[実行]

20140305_14h30_24_2

メニューのユーザーリストを押すと、作成したVisualforceページが出力されます。

20140305_14h36_38

ボタンの表示名のディフォルトは、「印刷」です。この値はkpsr:RCOneタグの属性「buttonvalue」で変更できます。

この画面で、セレクトリストで条件を指定して、ボタンを押すと、帳票作成処理が起動され結果が表示されます。

20140305_14h40_26

前回の記事同様、PDFファイルは処理したユーザーのフィードの添付として作成され、右側のボタンを押すと該当のフィードのページに飛びます。

[カスタマイズ]

kpsr:RCOneタグは、ボタンのデザイン、結果の表示場所、帳票作成終了時の処理の追加等のカスタマイズができます。

上記、画面のボタンのデザインを自前のものに変えてみたいと思います。また、結果の表示位置を画面の一番上に移動して、さらに後処理を追加して処理完了時にボタンが消える様にしてみたいと思います。

カスタマイズしたVisualforceページのソースは以下のとおりです。

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

  <apex:page docType="html-5.0" standardStylesheets="false" showheader="false" sidebar="false">      <!--Include Stylsheets for the Mobile look and feel -->
        <apex:stylesheet value="{!URLFOR($Resource.MobileTempCommon,
                  'common/css/app.min.css')}"/>
        <apex:includeScript value="{!URLFOR($Resource.MobileTempCommon,
                  'common/js/jQuery2.0.2.min.js')}"/>
        <apex:includeScript value="{!URLFOR($Resource.MobileTempCommon,
                  'common/js/zebra_datepicker.min.js')}"/>
        <apex:includeScript value="{!URLFOR($Resource.MobileTempCommon,
                  'common/js/main.min.js')}"/>
        <apex:includeScript value="{!URLFOR($Resource.MobileTempCommon,
                  'common/js/jquery.nouislider.min.js')}"/>
 
  <script type="text/javascript">
   window.addEventListener("message",function(e){
     if(e.data.tag != "kps-reportsconnect"){
         return;
     }
      $("#pbutton").css("display","none");
   });
  </script>
  <apex:form >
          <div id="result" style="display:none"/>
          <div class="form-control-group">
              <div class="form-control form-control-select">
                  <select name="condition">
                      <option value=" ">全件</option>
                      <option value="where Profile.UserType='Standard'">Standard</option>
                  </select>
              </div>
          </div>
      <kpsr:RCOne reportId="ユーザーリスト" direct="false" resultelm="result">
      <div class="detail-view-header left-thumb with-action-panel" id="pbutton">
              <div class="content">
              <img class="thumb" src="http://business-icon.com/material/040.png"/><h2>印刷します</h2>
              </div>
      </div>   
      </kpsr:RCOne>
  </apex:form>
  </apex:page>
------------------------------------------------------

ボタンのデザインを独自に行うには、kpsr:RCOneタグの内部にHTMLで記述することで可能になります。今回は印刷アイコンと「印刷します」という文字をdivとして設定しました。

さらに、apex:formタグの直下にdivを追加して、kpsr:RCOneタグのresutelm属性にそのIDを指定することで、処理結果の表示をこの位置に設定することができます。

また、javascriptで後処理を書くことができます。

ReportsConnectでは、帳票作成処理終了時に、windowにメッセージが送られます。

  window.addEventListener("message",後処理);

という様にして、messageのイベントを拾って後処理を記述します。
ReportsConnectが返すメッセージ e.data オブジェクトの中身は以下のようになっています。

キー内容備考
tag kps-reportsconnect ReportsConnectが返すメッセージの識別用
message エラーの場合のエラーメッセージ エラーで無い場合は"ok"
id 作成した添付ファイルまたはFeedのID  
success 成功した場合true/失敗した場合false  
filename 作成したPDFファイル名  
parentid 添付ファイルの場合親オブジェクトのID

後処理では、まず、tagの内容を確認してReportsConnectからのメッセージ以外はreturnします。

ReportsConnectからのメッセージであれば、ボタンのdivを非表示にして消しています。

以上のカスタマイズを行った画面はこんな感じになりました。

20140305_15h42_40

印刷アイコンを押すと、ボタンが消えて、一番上に処理結果が表示されるようになりました。

20140305_15h44_21

このように、kpsr:RCOneタグを使用する事で、Salesforce1アプリ内から様々な形で、帳票作成処理を行う事ができます。

Reports Connect for Salesforce Salesforce1アプリへの組み込み その1

Reports Connect for Salesforce ver1.19よりSalesforce1アプリからのモバイル環境での帳票作成が可能になりました。

今回は、まずは、特定のレコードに紐づく帳票をカスタムアクションに組み込む方法を解説します。(これをSalesforce1ではObject-Specific Actionと言います)

帳票自体の作成方法は従来のものがそのまま使用できます。印刷する帳票は「標準画面からの印刷呼び出し方法」で紹介した、商談の請求書を印刷するものをそのまま使用します。

帳票自体の作成方法はこちらの記事を参考にしてください。

[事前設定]

Salesforce1アプリからReportsConnectを使用するためには、事前に印刷をするユーザーのプロファイルで、ReportsConnectの接続アプリケーションを使用可能にしておく必要があります。

Reports Connect for Salesforce ver1.19以降をインストールすると、自動的にReportsConnectの接続アプリケーションが登録されます。

まず、設定->アプリケーションを管理する->接続アプリケーションで、「kps-ReportsConnect」を選択して、許可されているユーザが「管理者が承認したユーザは事前承認済み」になっていることを確認して下さい。もし、他の設定になっている場合は、「管理者が承認したユーザは事前承認済み」にしておきます。

20140304_15h35_21

次に、設定->ユーザーの管理->プロファイルで印刷するユーザーのプロファイルを選択して編集ボタンを押すと「接続アプリケーションへのアクセス」という欄に、「kps-ReportsConnect」という接続アプリケーションが有りますので、ここにチェックを入れてください。

20140304_15h26_29

次に、Mobile Design Templatesの設定を行います。

Salesforce1環境で、モバイル的なルックアンドフィールを実現するためには、セールスフォースから提供されている「Mobile Design Templates」を使用するというガイドラインがセールスフォースから出されています。

ReportsConnectでは、このテンプレートのCSS等を前提にしていますので、必要なCSSやJSライブラリーを静的リソースに入れておく必要があります。

GitHubのMobile Design Templatesのページからサンプルコードをダウンロードします。

ダウンロードした中のcommonというフォルダーにCSSやJSが入っています。このフォルダーをフォルダーごとzipで圧縮します。

20140304_16h31_42

このzipファイルを適当な名前を付けて静的リソースにアップロードしてください。

20140304_16h34_40 この例では、「MobileTempCommon」という名前でアップロードしました。

以上で事前設定は終了です。

[Visualforceページの作成]

カスタムアクションで使用するVisualforceページを作成します。

ソースコードは以下のとおりです。

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

<apex:page docType="html-5.0" standardStylesheets="false" showheader="false" sidebar="false" standardController="Opportunity">
      <!--Include Stylsheets for the Mobile look and feel -->
      <apex:stylesheet value="{!URLFOR($Resource.MobileTempCommon,
                'common/css/app.min.css')}"/>
      <apex:includeScript value="{!URLFOR($Resource.MobileTempCommon,
                'common/js/jQuery2.0.2.min.js')}"/>
      <apex:includeScript value="{!URLFOR($Resource.MobileTempCommon,
                'common/js/zebra_datepicker.min.js')}"/>
      <apex:includeScript value="{!URLFOR($Resource.MobileTempCommon,
                'common/js/main.min.js')}"/>
      <apex:includeScript value="{!URLFOR($Resource.MobileTempCommon,
                'common/js/jquery.nouislider.min.js')}"/>   
      
<apex:form >
<kpsr:RCOne reportId="請求書"
    parms="{&quot;condition&quot;:&quot;where OpportunityId='{!$CurrentPage.parameters.id}'&quot;}"/>
</apex:form>               
</apex:page>

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

apex:pageタグの指定とapex:stylesheetタグ、apex:includeScriptタグの指定は、「Mobile Design Templates」を使用する際のガイドライン通りのものです。(事前設定でアップロードした静的リソースを指定しています)

商談のページからアクションとして呼び出すにはapex:pageタグにstandardController="Opportunity"の指定が必要になります。

ReportsConnectを呼び出すために、ReportsConnectのインストールで提供される「kpsr:RCOne」コンポーネントを使用します。

apex:formタグの中にkpsr:RCOneタグを書いてください。属性として、帳票名をreportIdに指定します。

なお、このタグはparms属性で、json形式で、iReportに渡すためのパラメーターを指定できます。今回指定したパラメーターは以下のようなjsonを意味しています。

{"condition" : "where OpportunityId='{!$CurrentPage.parameters.id}'"}

このままVisualforceページに書くとエラーになるので、ダブルコーテーションの部分は&quot;に置き換えてエスケープします。

この帳票レコードのSOQLは以前の記事にあるように「condition」というKeyを検索条件で置き換える様になっているため、key「condition」に対して、where節を設定して、該当のレコードをReportsConnect側で読めるようにしているわけです。

Object-Specific Actionの場合は、idパラメータに該当のレコードのidが渡って来ますので、{!$CurrentPage.parameters.id}としてID値を入手しています。

以上のページを「PrintSeikyuOne」という名前で保存しました。

[Visualforceページをカスタムアクションに組み入れる]

後は、上記のVisualforceページを商談のカスタムアクションに組み入れるだけです。この作業は一般的なモバイルのカスタムアクションの組み込み方法と変わりはありません。

具体的には、以下の様な手順になります。

カスタムアクションの作成

  1. 設定->カスタマイズ->商談->ボタン、リンク、およびアクション
  2. 新規アクションを押す
  3. アクション種別でカスタム Visualforceを選択
  4. Visualforceページで、今作成した「PrintSeikyuOne」を選択
  5. 表示ラベルに「請求書作成」を入力
  6. 保存を押す

カスタムアクションをページレイアウトに追加

  1. 設定->カスタマイズ->商談->ページレイアウト
  2. 現在使用しているレイアウトを編集
  3. パブリッシャーアクションでグローバルパブリッシャーレイアウトを上書きをクリック
  4. 適当なパブリッシャーアクションの位置に上記で作成した「請求書作成」をドラッグ
  5. 保存を押す

[Salesforce1での帳票作成処理]

以上で組み込み作業は完了なので、Salesforce1アプリから商談を見てみましょう。

印刷したい商談の詳細画面でプラスボタンを押します。

20140304_17h25_06

設定したカスタムアクション「請求書作成」のアイコンが出てくるのでこれを押す

20140304_17h26_56

すると、帳票作成処理が実行されます。

帳票作成が完了すると画面は以下の様にファイル名と、ボタンの表示に変わります。

PDFファイルは処理したユーザーのフィードの添付として作成されます。

20140304_17h28_431

右側のボタンを押すと、フィードの画面へ遷移します。

20140304_17h36_52_2

フィードの添付ファイルなので、後は、ファイルを開いたり、メールに添付して送信したり自由にできます。

次回は、特定のレコードと関連しない帳票をモバイルナビゲーションから呼び出す方法について解説します。

« 2014年1月 | トップページ | 2014年9月 »