2017.05.23

SkyVisualEditorとjQueryで簡単PDF一括出力を実現してみよう

AY

みなさんこんにちは。
私はSkyVisualEditorのプリセールス／活用支援を担当しているのですが、お客様から画面の課題とともに帳票（PDF）出力についてのご要望をよくお聞きします。
SkyVisualEditorはあくまでも画面作成ツールなので、高度なご要件の場合は帳票サービスをお勧めするのですが、単票形式の簡単なPDF出力であればSkyVisualEditorの「PDF化機能」を使用してPDF単票を作成することができます。
今回はそのPDF画面とSkyVisualEditorの「検索画面 + JavaScript機能」を利用して、

  • 検索画面から
  • 検索結果にチェックを入れたレコードのPDFを
  • 一括で出力する

という機能を、架空の要件に基づく実装手順でご紹介します。

要件

  • 商談を検索し、検索結果でチェックを入れた商談の受注票（PDF）を一括出力したい
  • 受注票は手動で保存もしくは印刷するので、ブラウザの別タブで開くだけで良い

前提条件

  • 商談の検索画面と受注票PDF画面はSkyVisualEditorで構築
  • PDF一括出力処理はjQueryで構築

実装手順

実装方法

はじめに、SkyVisualEditorで受注票PDF画面を作成します。

  1. [ファイル > 新規] を選択し、レイアウトマネージャで "Salesforceレイアウト" または "自由レイアウト" を選択します。
    帳票の背景として画像を利用したい場合は [自由レイアウト] を選択してください。オブジェクトは "商談" を選択し、任意のページ名を指定します（今回は "SVE_OppPdfSample" としました）。


    上記設定が終わったら、 [OK] をクリックします。
  2. 受注票をデザインしていきます。
    まず、ページプロパティのPDFセクションで "PDF化" にチェックを入れます。チェックを入れたらページサイズや用紙の向きを設定します。


  3. PDFに表示する項目を配置します。PDF画面なので表示項目を並べてください。パネルグリッドを活用するときれいな帳票が作成できますよ。


  4. 画面が完成したらデプロイします。

次に、商談検索画面を作成します。

  1. [ファイル > 新規] を選択し、レイアウトマネージャで "[テンプレート] 検索画面" を選択します。オブジェクトは "商談" を選択し、任意のページ名を指定します（今回は "SVE_OppSearchSample" としました）。

    < alt="" src="https://cdn.clipkit.co/tenants/243/resources/assets/000/000/291/original/20210325e_08.png?1616656925" width="400" height="367" class="mt-image-center" style="text-align: center; display: block; margin: 0 auto 20px;" />
    上記設定が終わったら、 [OK] をクリックします。
  2. 検索画面はウィザード形式で作成できるので、ウィザードに従って作成を進めてください。
    今回は、ウィザードの [オブジェクトテーブル設定] でテーブル種類を "参照テーブル" にし、カスタムボタンを1個配置する設定にしています。それ以外の検索条件項目や検索結果項目については任意のものをご自由にお選びください。


    無事検索画面が作成できたでしょうか？
    検索画面の作成方法がわからない方はヘルプを参考にして作成してみてくださいね。

これからいよいよ本番、PDFを一括出力するためのパーツ（ボタン、チェックボックス）とjQueryスクリプトを設定していきます。

  1. 検索結果のデータテーブルにチェックボックスを配置します。
    データテーブルを選択し、コンポーネントプロパティの "チェックボックス列表示" にチェックを入れます。


  2. カスタムボタンのラベルを修正します。
    カスタムボタンを選択し、コンポーネントプロパティの値を "受注票一括出力" に修正します。ついでに、幅指定有りのチェックを外し、ボタンの幅が値に応じて可変するようにしておきます。


  3. 画面右側の [ページ] タブをクリックし、 [ページスクリプト] セクションの [ページスクリプト編集] ボタンを押してスクリプトエディタを開きます。

  4. 以下のスクリプトを記述して [OK] を押し、スクリプトエディタを閉じます。
    function getCheckedList(){
    // 検索結果を配列にセット
    var list = jQuery('.list .BulkSelectCheckbox');
    if(list.length === 0){
        alert('検索結果レコードがありません');
        return;
    }
    // チェックされたレコードのIDの配列を取得
    var checkedList = [];
    list.each(function(){
        var elm = jQuery(this);
        if(elm.prop('checked') && elm.attr('rid') !== ''){
            checkedList.push(elm.attr('rid'));
        }
    });
    // チェックされたレコード取得結果の判定
    if(checkedList.length === 0){
        alert('レコードが選択されていません');
        return;
    }
    //配列に入れたレコードIDでPDF画面を開く
	jQuery.each(checkedList, function(){
			window.open('/apex/SVE_OppPdfSample?id=' + this);  
   });
}

    23行目の "SVE_OppPdfSample" の部分のみ、先ほど作成した受注票PDF画面のページ名に変更してください。それ以外はまるっとコピペでOKです。

  5. 最後に、記述したスクリプトをカスタムボタン「受注票一括出力」から呼び出す設定をします。
    カスタムボタンを選択し、コンポーネントプロパティの動作選択が "JavaScript/Apex呼出" になっていることを確認します。 "画面遷移" になっている場合は選択しなおしてください。
  6. その下のOnClickの設定ボタンをクリックし、関数名プルダウンで先ほど記述したスクリプト（"getCheckedList"）を選択して [挿入] ボタンをクリックします。


    設定できたら、 [OK] を押して、ダイアログを閉じて下さい。

さあ、これで準備が整いました。早速検証してみましょう。

検索画面のデプロイ完了ダイアログのリンクから、検索画面を開いてみて下さい。検索を実行して、検索結果にチェックを入れて、「受注票一括出力」ボタンをクリックすると...


チェックを入れた商談の受注票PDFが別タブで出力されました！

いかがでしたでしょうか？
今回はページを別タブで開くだけの簡単な機能のご紹介でしたが、コーディングの知識がなくてもすぐにご利用いただけるスクリプトですので是非お試しください。

※JavaScript機能によるカスタマイズは標準サポートの対象外です。ご了承の上、ご利用ください。

1 件
    　
  • banner
  • banner

関連する記事

関連するキーワード