Intro
The signature capture allows users to input their signature by signing on the screen. The signature is captured and saved in the backend with a watermark.
Example of signature capture components in compact width (left) and regular width (right)
Usage
Signature capture is intended for users to authorize workflows when they sign while using this feature. Some use cases include signing forms or documents, approving an order, confirming a task, indicating reception of an article, signing off for another person, etc.
After users generate an autograph, they have the option to save the signature as a bitmap or SVG watermark which can be saved with the final signature, or it will be stored in the backend.
Consider using inline signature form cell for any forms that require careful inspection of the content during the signing process.
Anatomy
A. Navigation Bar of Signature Capture
The navigation bar contains primary actions for the signature capture modal. There are two buttons: “Cancel” and “Done”. By default, the title is “Signature” but it can be customized to fit with the context.
B. Signature Canvas
The canvas is a signature capture view that allows the user to draw a signature on it. In this view, there is a signature line to guide the user of where to draw.
C. Toolbar of Signature Capture
By default, the toolbar contains a clear button for the user to remove all previous drawings on the canvas.
D. Watermark (Optional)
Watermarks are optional texts that are added automatically by the system to the saved signature image.
Signature capture modal (top) and saved signature image with a watermark (bottom)
Behavior and Interaction
Signature Capture Flows
Activate from Button Form Cell
Tapping the button form cell in a form can bring up the signature capture modal. When the user finishes signing, the button can be replaced with the In-line signature form cell.
Signature capture in a bottom sheet
Activate as Part of Navigation Flow
Signature capture can be intrinsically integrated as a part of a screen flow.
Signature capture that is triggered from a screen flow
Adaptive Design
Compact and Regular Width
Signature capture is supported in both regular and compact width on both iPhone and iPad devices. Signature capture view can be customized to fit into several modals and containers to fit any use cases.
Signature capture in modal sheet, bottom sheet, form sheet, and pop-over
Resources
Development: UIKit FUISignatureCaptureController, UIKit FUISignatureCaptureView, UIKit FUISignatureCaptureControllerDelegate, SwiftUI SignatureCaptureView
SAP Fiori for Android: Signature Capture
Related Components/Patterns: Inline Signature Form Cell