手書きの仕組み

RayPenでは手書きの署名用の画面だけを提供します。このため、ユーザがこの画面で手書きの署名を実行するためには、開発者がこの画面をVisualforceページに埋め込み、ユーザがそのページを表示できるようにタブやメニューを追加する必要があります。

gcrp:RayPenコンポーネント

このVisualforceコンポーネントをVisualforceページに配置すると、ユーザに手書きの署名画面を提供できます。署名された結果は画像として添付ファイルに格納されます。添付ファイルが格納された場所は、Signatureオブジェクトのレコードで参照できます。

画面の説明

gcrp:RayPenコンポーネントをVisualforceページに配置すると、Salesforceモバイルアプリでは、gcrp:RayPenコンポーネントを配置した部分に次のように署名パッドが表示されます。

  1. ユーザがまだ署名していない場合、プレースホルダ(placeholder)が表示されます。
  2. ユーザが署名操作を行うと、プレースホルダの代わりに署名の画像が表示されます。

ユーザがプレースホルダをタップすると、次のような手書きの画面が表示されます。

  1. 署名する契約書のタイトル(titleText)を表示します。
  2. 署名した内容を消去します。
  3. 署名の説明文(footnote)を表示します。
  4. 署名した内容を破棄するボタン(cancelButtonText)です。
  5. 署名した内容を確定するボタン(okButtonText)です。

gcrp:RayPenコンポーネントの属性

RayPenコンポーネントの属性を変更すると、手書きの署名画面の外観を変更できます。

属性名 属性型 説明
cancelButtonText String 署名の結果を破棄する「キャンセル」ボタンのテキスト。既定値は「Cancel」。
currentSignatureId String 表示する署名のID。署名の結果を表示しない場合、空欄にします。
footnote String 署名パッドの下部のテキスト(footnote)。既定値は「Please read the content before you sign.」。
footnoteColor String 署名パッドの下部のテキスト(footnote)の色。既定値は「#CCCCCC」。
imageHeight Integer 署名画像の高さ。
imageWidth Integer 署名画像の幅。
onSignatureComplete ApexPages.Action 署名が完了したときのハンドラ。 このアクションを使用して、署名結果を処理します。
okButtonText String 署名の結果を確定する「OK」ボタンのテキスト。既定値は「OK」。
placeholder String 署名がないときのメッセージ(プレースホルダ)です。既定値は空文字。
styleClass String open-signature-padボタンのCSSクラス名。
style String open-signature-padボタンのスタイル。
reRender String OnScanCompleteアクションが実行されたときに再描画するターゲット。
strokeWidth Integer 署名のストロークの幅。既定値は「2」。
strokeColor String 署名のストロークの色。既定値は「#000000」。
signatureImageStyleClass String 署名画像のCSSクラス名。
signatureImageStyle String 署名画像のスタイル。
signatureLineColor String 署名のガイド線の色。ガイド線とは署名パッドの下部に表示される水平線です。既定値は「#CCCCCC」。
signatureBackgroundColor String 署名パッドの背景色。既定値は「#FFFFFF」。
signaturePadOrientation String 署名パッドの向き。横向きの場合はlandscape、縦向きの場合はportrait。既定値は「landscape」。
titleTextColor String タイトルのテキストの色。既定値は「#000000」。
titleText String タイトルの文字列。既定値は「Signature Title」。

gcrp:RayPreviewコンポーネントの属性

RayPreviewコンポーネントの属性を変更すると、プレビュー画面の外観を変更できます。

属性名 属性型 説明
contentDocumentId String プレビューに表示するドキュメントのID。通常は「069」で開始されます。例: 069f200000429xV
rendered Boolean コンポーネントがページに表示されるかどうかを指定するBoolean値です。既定値は「true」。
styleClass String open-previewボタンのCSSクラス名。
style String open-previewボタンのスタイル。
text String open-previewボタンのテキスト。

gcrp:Signatureオブジェクト

署名の結果が格納されるオブジェクトです。

項目の表示ラベル API参照名 データ型 説明
名前 Name 自動番号 署名を識別するためのIDです。書式は「SIG-{0000000000}」。
AttachmentId gcrp__AttachmentId__c テキストエリア(255) 画像化した署名の添付ファイルのIDです。
Signature Image gcrp__SignatureImage__c 数式 (テキスト) 署名の画像です。Salesforceの画面に埋め込んだり、「スマレポ!」のレポートなどに埋め込むこともできます。
ImageHeight gcrp__ImageHeight__c 数値(18) 画像サイズの高さです。
ImageWidth gcrp__ImageWidth__c 数値(18) 画像サイズの幅です。

gcrp:RayPenコンポーネントの使用例

手書きパッドの組み込みを参照してください。

gcrp:RayPreviewコンポーネントの使用例

PDFファイルの生成とプレビュー表示を参照してください。

Copyright © 2019 GrapeCity inc. All rights reserved.