• Installation
• Usage

Installation

The component is available from the block store under the name “Capture Signature”.  

Usage

Once installed, the component has two parts that both need to be on the page to work.  

1. The first is the “Signature Hidden Input”. Drag that into your form. 
2. Select the component and in the left bar click on Select action variable. 
   1. Set the name to something like signature_value 
   2. Leave the Kind as text 
3. Next search for the Signature Pad component and drag it below the Hidden Input 
   1. The first time you drop it onto the canvas it will take some time to compile the component. 
   2. Now select the component and we'll go through its options:
      1. Value: You can set its value. For instance, if you want to allow a user to update their signature, you could load a saved value into the component.
      2. Disabled:  allows you to show but not edit a signature, though there is a better way to do that that we’ll discuss in the last section. 
      3. Height & Width: allow you to set the signature pad size. 
      4. Border: set the border color, thickness and style that the pad has. 
   3. In addition to options the signature component has 6 custom interactions that can be used to interact with the component 
      1. Save Signature: this interaction converts the signature into a value and saves that value to the component 
      2. Clear Signature: As it sounds this interaction clears the signature pad. 
      3. SetValue: this is used to take the saved value from the signature pad and set the hidden input value to that it can be sent to an action for saving.
      4. OnSignatureOk: this interaction type is available on the Signature Pad component and is fired after a Save Signature interaction. This is where a SetValue interaction would be called from to pass the saved value to the hidden input. 
      5. OnSignatureBegin: this type indicates that a user has started drawing on the pad. 
      6. OnSignatureEnd: this type indicates that a user has stopped drawing on the pad. This can be used to automatically save the value of the pad to the component and the hidden input if having a button to handle confirming the signature is undesirable. 
   4. The signature component saves the signature into a Base64 encoded image which can be saved as text in a betty blocks model property 
   5. Example usage Screenshot
      
      
      
      

When implementing the Capture Signature component keep the following in mind.

1. Always use both the signature hidden input and the signature pad together. The custom hidden input has customizations that let it save and use the actions that the normal hidden input component cannot do. 
2. To display an already saved signature you don’t need the signature pad you can just use a Media component and use the Data/URL option. 
3. Use either the onSignatureEnd interaction or a confirm button click to trigger the saveSignature action or the onSignatureOk Event will never be triggered and the signature will not be saved to your model.