手書きの仕組み
RayPenでは手書きの署名用の画面だけを提供します。このため、ユーザがこの画面で手書きの署名を実行するためには、開発者がこの画面をVisualforceページに埋め込み、ユーザがそのページを表示できるようにタブやメニューを追加する必要があります。
gcrp:RayPenコンポーネント
このVisualforceコンポーネントをVisualforceページに配置すると、ユーザに手書きの署名画面を提供できます。署名された結果は画像として添付ファイルに格納されます。添付ファイルが格納された場所は、Signatureオブジェクトのレコードで参照できます。
画面の説明
gcrp:RayPenコンポーネントをVisualforceページに配置すると、Salesforceモバイルアプリでは、gcrp:RayPenコンポーネントを配置した部分に次のように署名パッドが表示されます。
- ユーザがまだ署名していない場合、プレースホルダ(placeholder)が表示されます。
- ユーザが署名操作を行うと、プレースホルダの代わりに署名の画像が表示されます。
ユーザがプレースホルダをタップすると、次のような手書きの画面が表示されます。
- 署名する契約書のタイトル(titleText)を表示します。
- 署名した内容を消去します。
- 署名の説明文(footnote)を表示します。
- 署名した内容を破棄するボタン(cancelButtonText)です。
- 署名した内容を確定するボタン(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 | onSignatureCompleteアクションが実行されたときに再描画するターゲット。 |
| 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」。 |
| id | String | ページの他のコンポーネントがカスタムコンポーネントを参照できるようにする識別子。指定されていない場合、一意の識別子が自動的に生成されます。これはVisualforceカスタムコンポーネントのデフォルトで生成される属性です。 |
| rendered | Boolean | カスタムコンポーネントをページに表示するかどうかを指定する boolean 値。指定されていない場合、この値はデフォルトの true に設定されます。これはVisualforceカスタムコンポーネントのデフォルトで生成される属性です。 |
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コンポーネントの使用例
手書きパッドの組み込みを参照してください。
Copyright © 2020 GrapeCity inc. All rights reserved.