logo

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

最近のトラックバック

無料ブログはココログ

« Reports Connect for Salesforce Salesforce1アプリへの組み込み その1 | トップページ | Reports Connect for Kintone 複数ボタンの実装方法 »

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 Kintone 複数ボタンの実装方法 »

Force.com」カテゴリの記事

Reports Connect」カテゴリの記事

Salesforce」カテゴリの記事

コメント

コメントを書く

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

トラックバック

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

この記事へのトラックバック一覧です: Reports Connect for Salesforce Salesforce1アプリへの組み込み その2:

« Reports Connect for Salesforce Salesforce1アプリへの組み込み その1 | トップページ | Reports Connect for Kintone 複数ボタンの実装方法 »