To download the app, visit: Library
Purpose
The Hands Written Signature Widget allows users to sign directly on a touchscreen device or using mouse.
It is designed for scenarios where operator verification, approvals, or acknowledgments are required such as quality checks, work order confirmations, or delivery handoffs.
The widget captures freehand input and enables saving the signature image within the app context for storage or display.
Do not use this widget for electronic signatures that require CFR21 Part 11 requirements. Use the electronic signature instead.
Setup
To use the widget in your Tulip app:
- Add the widget to a step in your app.
- Ensure the step is accessed from a touchscreen-capable device, alternativly using mouse is also allowed.
- Customize the appearance and labels using the optional parameters (see below).
- Connect the available triggers to handle the signature data or errors.
Mandatory parameters
There are no mandatory parameters.
The widget will function with default values out of the box.
Optional parameters
| Parameter Name | Description |
|---|---|
Buttons font size |
Font size (in px) for both the "Sign" and "Clear all" buttons. |
Save button title |
Custom label for the button that saves the signature. |
Save button BG color |
Background color of the save button. |
Save button font color |
Font color of the save button text. |
Clear button title |
Custom label for the clear/reset button. |
Clear button BG color |
Background color of the clear button. |
Clear button font color |
Font color of the clear button text. |
These allow full visual control to match the app's design and language preferences.
Triggers
The widget exposes the following triggers:
- Copy Image into Variable: Fired when the signature is saved. Returns the signature image (base64 format) so it can be stored or passed to another widget.
- Clear Widget Variables: Used to programmatically reset the widget content and clear any drawn signature.
- Widget Error Message: Triggered when the widget encounters an error, such as trying to save an empty signature.
These triggers can be used to create workflows such as saving to a Tulip Table, validating signature presence, or resetting the form.
How it works
Once the widget is active on a touchscreen device, users can sign inside the provided signature box using their finger or a stylus.
Two buttons are shown below the input area: one to save the signature, and another to clear the current drawing.
When the user taps "Sign" (or your custom label), the widget captures the drawing as an image and fires the corresponding trigger.
This image can then be stored in a variable or added to a Tulip Table record.
If the user taps "Clear all", the signature box is reset, and the widget returns to its initial state.
Further Reading
If you would like to know more about custom widgets please visit the site below:
Custom Widgets Overview