署名画面の設定

RayPenはVisualforceページに配置することで、手書きの署名画面と署名結果を表示することができます。署名用の画面はgcrp:RayPenコンポーネントの属性を使用して外観を変更できます。

署名パッドのタイトルを変更する

署名パッドのタイトルの文字列と文字色を変更できます。

<apex:page>
    <gcrp:RayPen
        titleText="署名欄"
        titleTextColor="#3300FF"
    /> 
</apex:page>

署名パッドの下部の注意書きを変更する

署名パッドの下部に注意書きを記載できます。この注意書きの文字列と色、および注意書き上部に表示する水平線の色を変更できます。

<apex:page>
    <gcrp:RayPen
        footNote="署名の前に契約書を必ずお読みください"
        footNoteColor="#FF0000"
        signatureLineColor="#FF6600"
    /> 
</apex:page>

署名パッドの背景色を変更する

署名パッドの背景色を変更できます。

<apex:page>
    <gcrp:RayPen
        signatureBackgroundColor="#CCCCCC"
    /> 
</apex:page>

署名パッドのボタンを変更する

署名の結果を確定または破棄するボタンの文字列を変更できます。

<apex:page>
    <gcrp:RayPen
        okButtonText="確定"
        cancelButtonText="中止"
    /> 
</apex:page>

署名パッドの向きを変更する

署名パッドの向きを縦または横に変更できます。画面を縦向きにする場合はportrait、横向きの場合はlandscapeを設定します。

<apex:page>
    <gcrp:RayPen
        signaturePadOrientation="portrait"
    /> 
</apex:page>

署名結果を表示する

プレースホルダの代わりに署名パッドに手書きした結果を表示できます。署名結果を表示するには、gcrp:RayPenコンポーネントの属性のcurrentSignatureIdに署名パッドで手書きした署名結果のIDを設定します。

次の手順は、プレースホルダの代わりに署名結果を表示する例です。

1. 署名を保存するためにカスタムオブジェクトを作成する

  1. Salesforce Classicの場合、「設定 > 作成 > オブジェクト」をクリックする。Lightning Experienceの場合、歯車アイコンをクリックした後「設定 > オブジェクトおよび項目 > オブジェクトマネージャ」をクリックする。
  2. Salesforce Classicの場合は「新規カスタムオブジェクト」ボタン、Lightning Experienceの場合は「作成 > カスタムオブジェクト」をクリックする。
  3. カスタムオブジェクトの情報に次の値を設定し、「保存」をクリックする。
    • 表示ラベル:SampleSignature
    • オブジェクト名: Sample_Signature
    • レコード名: Signature No.
    • データ型: 自動採番
    • 表示形式: SAMPLE-{00000000}
    • 開始番号: 0

2. 署名結果を返すコントローラを作成する

  1. Salesforce Classicの場合、「設定 > ビルド > 開発 > Apexクラス」を開く。Lightning Experienceの場合、歯車アイコンをクリックした後「設定 > プラットフォームツール > カスタムコード > Apexクラス」を開く。
  2. 「新規」ボタンをクリックし、「Apex Class」に次のコードを貼り付け、「保存」をクリックする。
public with sharing class SampleSignaturePageController {
    public string patientSignatureId{get;set;}
}

3. 署名パッドを表示する

次に、Visualforceページを作成して署名パッドを表示します。次の手順ではPC(Mac)のブラウザを使用します。

  1. Salesforce Classicの場合、「設定 > 開発 > Visualforceページ」をクリックする。Lightning Experienceの場合、歯車アイコンをクリックした後「設定 > カスタムコード > Visualforceページ」をクリックする。
  2. 「新規」ボタンをクリックする。
  3. 「表示ラベル」と「名前」に「Sample_Signature」と記入する。
  4. 「Lightning Experience、Lightning コミュニティ、およびモバイルアプリケーションで利用可能」をオンにする。
  5. 「Visualforce Markup」に次の内容を入力し、「保存」をクリックする。
<apex:page controller="SampleSignaturePageController" standardStylesheets="false">

    <div>

         <div class="signature-pad-container">
            <gcrp:RayPen placeholder="署名する" 
                              styleClass="signature-button"
                              signatureImageStyle="max-width: 200px; max-height: 100px;"
                              currentSignatureId="{!patientSignatureId}"

                              signaturePadOrientation="portrait"                              
                              />
        </div>
        
    </div>

    <style>
    .signature-pad-container{
        max-width: 200px;
        max-height: 100px;
        width: 200px;
        height: 100px;
        border: 1px solid black;
        background-color: white;
        text-align: center;
    }
    
    .signature-button{
        
        width: 200px !important;
        height: 100px !important;
        background-color: white !important;
        border: none !important;
        -webkit-appearance: none;
        background-image: none !important;
        box-sizing: border-box;
        border-radius: unset !important;
        padding: 0 !important;
        margin: 0 !important;
    }

    </style>
</apex:page>

「3. 署名パッドを表示する」で作成したVisualforceページをタブに追加して動作を確認します。署名パッドに入力すると、プレースホルダの代わりに手書きした結果が表示されます。

Copyright © 2018 GrapeCity inc. All rights reserved.