Smart Report Meisterで手書き画像を表示する

RayPenと日本コンピュータ・ダイナミクス株式会社のSmart Report Meisterを使用して、Salesforce上で帳票への手書き画像印刷を実現できます。RayPenにはSmart Report Meisterのライセンスは含まれません。

Smart Report Meisterのデモ画面

前提

連携を試すためには、SalesforceおよびRayPen、RayPenのサンプルとSmart Report Meisterの環境を準備します。ライセンスがまだない場合、トライアル版を使用できます。

概要

ここでは、RayPenサンプルパッケージで提供している「手術同意書」（Surgery Agreement）を使用して手書きした画像を帳票上にレイアウトしPDF出力するというシナリオを実現します。手書きされた結果を画像として添付ファイルに格納する処理をRayPenが担当します。帳票上のレイアウトとPDFへの出力はSmart Report Meisterが担当します。この2つのパッケージを連携させることで目的を実現します。

1. サンプル「手術同意書」のタブを設定する

RayPenのサンプルに含まれているカスタムオブジェクト「SurgeryAgreement」のカスタムオブジェクトタブを作成します。

指定する値

  • オブジェクト: SurgeryAgreement
  • タブスタイル: 任意のスタイル

次にRayPenのサンプルに含まれているVisualforceページ「Surgery_Agreement」のVisualforceタブを作成します。

指定する値

  • Visualforce ページ: Surgery Agreement [Surgery Agreement]
  • タブの表示ラベル: 署名
  • タブ名: TabSignature
  • タブスタイル: 任意のスタイル

2. 手書き署名の画像を作成する

上記の手順で作成した「Surgery_Agreement」のVisualforceタブから「手術同意書」のページを開き、「署名する」のエリアをクリックします。手書き画面が表示されるので手書きをしてOKボタンを押します。

「SurgeryAgreement」のカスタムオブジェクトタブで画面を開くと、手書きの結果が格納されたことを確認できます。

3. Smart Report Meisterで帳票を作成する

Smart Report Meisterで帳票を作成します。今回は手書き画像を表示する簡単なレイアウトの帳票を作成します。

  1. 「帳票新規作成」ボタンを押下する。
  2. 任意の帳票名や用紙の向きを設定し、「次へ」ボタンを押下する。
  3. 基本オブジェクトを「SurgeryAgreement」に設定し、「次へ」ボタンを押下する。
  4. リレーションオブジェクトは「(基)SurgeryAgreement」、「(参)Patient Signature[Signature]」をチェックする。
  5. Smart Report Meisterの帳票が作成される。
  6. 出来上がった帳票にレイアウトを追加します。「新規レイアウト追加」リンクをクリックする。
  7. デザイナーが表示されるので「Signature Image」を配置し、その他の任意の項目を追加して［保存］ボタンを押下する。

Smart Report Meisterの帳票レイアウトに画像を配置すると、セルのサイズに合わせて画像サイズはリサイズされます。このとき、画像のアスペクト比を維持しながら、実際の画像サイズの縦、横の比率が大きい辺をセルのサイズに合わせてリサイズします。 Smart Report Meisterの帳票レイアウトに手書き画像を表示するとき、画像のアスペクト比とは異なる比率で表示したい場合はSignatureオブジェクトのSignature Imageを使用せずに、新しくカスタム項目を作成して使用します。詳細は「Visualforceでの手書き画像の表示サイズを変更する方法」または「Lightning Webコンポーネントでの手書き画像の表示サイズを変更する方法」を参照してください。

以上で、Smart Report Meisterの設定は完了です。

3. 帳票出力を実行するカスタムボタンの作成

帳票出力を実行するカスタムボタンを作成します。Smart Report Meisterには帳票出力を実行するスクリプトを自動生成する機能があります。

  1. Smart Report Meisterの［ボタンスクリプト］ボタンを押下してスクリプトを表示する。
  2. 表示されたスクリプトをクリップボードへコピーする。
  3. カスタムオブジェクト「SurgeryAgreement」に 新規カスタムボタンを作成する。動作に「JavaScriptを実行」を選択し、先ほどのスクリプトをクリップボードから貼り付ける。

最後に、ページレイアウトに作成したカスタムボタンを追加します。

以上ですべての設定が完了しました。

4. 実行結果の確認

  1. SurgeryAgreementタブから詳細画面に移動し、先ほど作成したカスタムボタン「署名表示」を押下する。
  2. 手書き画像がPDF出力されることを確認する。
Copyright © 2024 MESCIUS inc. All rights reserved.