Signature Component
Overview
The Signature component creates a signature field in your module. In Express View Express View is how your end-user views your application. Express View also lets you preview your applications to test your configuration and view the styling. This is also the view your end-users will see when interacting with your application. After configuring a module, click Preview in the Module Builder to interact with the module in Express View., the signature field displays as a box where end-users End-users, also known as Express Users, are the individuals accessing an application through Express View. In most cases, end-users are the customers using the product. can use their mouse to input their signature. In the submission data, the signature stores as a Base64 Base64 is an encoding and decoding technique used to convert binary data to an ASCII (American Standard for Information Interchange) text format. string.
Do not use the Signature component for legally-binding signatures. Instead, we suggest you use third-party software like DocuSign and SignNow.
You'll find the component under the Secondary Fields group to the left of the Module Builder:
About the Configuration Window
To learn more about general component settings, view our General Component Settings article.
Display Panel
Default State Options
| Setting | Description |
|---|---|
|
Hide Field |
Displays or hides the component from view in Express View. Setting it to (ON) hides the component. Setting the toggle to (OFF) displays the component. The component is always visible in the Module Builder. By default, Hide Field is set to (OFF) |
Formatting
| Setting | Description |
|---|---|
|
Footer Label |
Like the label text, a component’s Footer Label indicates the purpose of the corresponding field or component. Placed under the Signature box, the Footer Label tells the end-user how to interact with the field. For example, giving the end-user instructions like Sign your name above. User-friendly labels make your module more accessible. Keep labels short, concise, and descriptive using title case. For longer entries, use sentence case. |
|
Background Color |
You can customize the background color of the signature box using an HTML color picker. Enter the color’s RGB code in the Background Color field. For example, rgb (245,245,235). Your chosen color displays in the Module Builder and Express View. |
|
Set Width |
Adjusts the width of the Signature box. The width value is specified in conjunction with the Width Unit type. |
|
Width Unit |
Select the unit type for the Width value. Width Unit types include:
By default, the width unit type is set to % (Percentage). |
|
Set Height |
This setting adjusts the height of the signature box. Set the number of pixels to apply to the box height. |
Input Behavior
| Setting | Description |
|---|---|
|
Input Behavior |
Controls how end-users End-users, also known as Express Users, are the individuals accessing an application through Express View. In most cases, end-users are the customers using the product. interact with the component. Choose from the following options:
|
Data Panel
Data Storage
|
Setting |
Description |
|---|---|
|
Store Data in Database |
The Store Data in Database setting affects how data persists through your application. When set to (ON), Unqork stores values entered into the field to the database (server-side submission). This occurs in three scenarios:
By default, workflows persist data from all fields in the client-side submission when navigating between screens. However, only values from fields with Store Data in Database enabled store in the server-side submission. Set the toggle to (OFF) when you don’t want to store the values from this field in the database. When using a Plug-In to remote execute a module, ensure data moving between modules is persistent. You can optionally enable Store Data in Database for components in the source module. But any components in the API module whose values are included in an API response must have Store Data in Database enabled. When a component’s data is not persistent, the data isn't included in an API call's response. So, Plug-Ins or external services requesting data from the API module can't receive non-persistent data in the response. Store Data in Database also affects what data is tracked using Unqork’s built-in tracker. When the Enable Tracker and Track Value toggles are set to (ON) in Module Settings, only values from fields with Store Data in Database enabled are tracked. By default, this toggle is set to (ON). |
Validation Panel
User Input
|
Setting |
Description |
|---|---|
|
Required |
When set to (ON), the end-user must enter a value in the component's visible fields. When set to (OFF), the input is optional. By default, Required is set to (OFF). |
|
Required Error Message |
A custom error message that displays below a required field. The error message displays when the end-user tries to save or submit the module without completing the required field. |
Advanced Panel
Additional Styling
|
Setting |
Description |
|---|---|
|
Custom CSS Class |
Enter a Custom CSS Cascading Style Sheets (CSS) is a style sheet language used for presenting how a HTML or XML document looks to end-users. Class to apply to your component. Custom CSS lets you maintain a consistent look and feel when the field or element is part of a template or multiple modules. Updated CSS styling applies to all components that reference this custom class name. |
Adding a Signature Component
Configure a Signature component to provide a signature field for an end-user End-users, also known as Express Users, are the individuals accessing an application through Express View. In most cases, end-users are the customers using the product.. We'll use a light blue color for the field background and set the component as Required. These instructions assume that you have an open module saved with a title.
| 1. | In the Module Builder, drag and drop a Signature component onto your canvas. |
| 2. | In the Property ID A Property ID is the unique field ID used by Unqork to track and link components in your module. field, enter sign. |
| 3. | In the Footer Label field, enter Sign above. |
| 4. | In the Background Color field, enter rgb(204,245,255). This color makes the field background light blue. |
| 5. | Navigate to the Advanced settings. |
| 6. | Set Required to (ON). |
| 7. | Click Save Component. |
| 8. | Save your module. |
Preview your module in Express View Express View is how your end-user views your application. Express View also lets you preview your applications to test your configuration and view the styling. This is also the view your end-users will see when interacting with your application. After configuring a module, click Preview in the Module Builder to interact with the module in Express View.. You'll see the following functionality:
Overview
The Signature component creates a signature field in your module. In Express View Express View is how your end-user views your application. Express View also lets you preview your applications to test your configuration and view the styling. This is also the view your end-users will see when interacting with your application. After configuring a module, click Preview in the Module Builder to interact with the module in Express View., the signature field displays as a box where end-users End-users, also known as Express Users, are the individuals accessing an application through Express View. In most cases, end-users are the customers using the product. can use their mouse to input their signature. In the submission data, the signature stores as a Base64 Base64 is an encoding and decoding technique used to convert binary data to an ASCII (American Standard for Information Interchange) text format. string.
Do not use the Signature component for legally-binding signatures. Instead, we suggest you use third-party software like DocuSign and SignNow.
You'll find the component under the Secondary Fields group to the left of the Module Builder:
About the Configuration Window
To learn more about general component settings, view our General Component Settings article.
Display Panel
Field Text
|
Setting |
Description |
|---|---|
|
Footer Label |
Like the label text, a component’s Footer Label indicates the purpose of the corresponding field or component. Placed under the Signature box, the Footer Label tells the end-user how to interact with the field. For example, giving the end-user instructions like Sign your name above. User-friendly labels make your module more accessible. Keep labels short, concise, and descriptive using title case. For longer entries, use sentence case. |
Default State Options
|
Setting |
Description |
|---|---|
|
Disable User Input |
When set to (ON), end-users cannot interact with or edit the Express View's input field or element. When end-users hover over the field, their cursor changes to alert them to the status change. By default, Disable User Input is set to (OFF). |
|
Read Only View |
When set to (ON), the component is display-only. If another component sends content to the field, the end-user can view that content. Otherwise, end-users see the word None. By default, the Read Only View toggle is set to (OFF). |
|
Hide Field |
Displays or hides the component from view. Setting Hide Field to (ON) hides the component in Express View. Setting it to (OFF) displays the component. The component is always visible in the Module Builder. By default, Hide Field is set to (OFF). |
Formatting
|
Setting |
Description |
|---|---|
|
Set Width |
Adjusts the width of the Signature box. The width value is specified in conjunction with the Width Unit type. |
|
Width Unit |
Select the unit type for the Width value. Width Unit types include:
By default, the width unit type is set to % (Percentage). |
|
Set Height |
This setting adjusts the height of the signature box. Set the number of pixels to apply to the box height. |
|
Background Color |
You can customize the background color of the signature box using an HTML color picker. Enter the color’s RGB code in the Background Color field. For example, rgb (245,245,235). Your chosen color displays in the Module Builder and Express View. |
Data Panel
Data Storage
|
Setting |
Description |
|---|---|
|
Store Data in Database |
The Store Data in Database setting affects how data persists through your application. When set to (ON), Unqork stores values entered into the field to the database (server-side submission). This occurs in three scenarios:
By default, workflows persist data from all fields in the client-side submission when navigating between screens. However, only values from fields with Store Data in Database enabled store in the server-side submission. Set the toggle to (OFF) when you don’t want to store the values from this field in the database. When using a Plug-In to remote execute a module, ensure data moving between modules is persistent. You can optionally enable Store Data in Database for components in the source module. But any components in the API module whose values are included in an API response must have Store Data in Database enabled. When a component’s data is not persistent, the data isn't included in an API call's response. So, Plug-Ins or external services requesting data from the API module can't receive non-persistent data in the response. Store Data in Database also affects what data is tracked using Unqork’s built-in tracker. When the Enable Tracker and Track Value toggles are set to (ON) in Module Settings, only values from fields with Store Data in Database enabled are tracked. By default, this toggle is set to (ON). |
Validation Panel
User Input
|
Setting |
Description |
|---|---|
|
Required |
When set to (ON), the end-user must enter a value in the component's visible fields. When set to (OFF), the input is optional. By default, Required is set to (OFF). |
|
Required Error Message |
A custom error message that displays below a required field. The error message displays when the end-user tries to save or submit the module without completing the required field. |
Advanced Panel
Additional Styling
|
Setting |
Description |
|---|---|
|
Custom CSS Class |
Enter a Custom CSS Cascading Style Sheets (CSS) is a style sheet language used for presenting how a HTML or XML document looks to end-users. Class to apply to your component. Custom CSS lets you maintain a consistent look and feel when the field or element is part of a template or multiple modules. Updated CSS styling applies to all components that reference this custom class name. |
Adding a Signature Component
Let's configure a Signature component to provide a signature field for your end-user. We'll use a light blue color for the field background and set the component as Required. These instructions assume that you have an open module saved with a title.
| 1. | In the Module Builder, drag and drop a Signature component onto your canvas. |
| 2. | In the Property ID A Property ID is the unique field ID used by Unqork to track and link components in your module. field, enter sign. |
| 3. | In the Footer Label field, enter Sign above. |
| 4. | In the Background Color field, enter rgb(204,245,255). This color makes the field background light blue. |
| 5. | From the Signature component configuration window, click the  Advanced tab. |
| 6. | Set Required to (ON). |
| 7. | Click Save & Close. |
| 8. | Save your module. |
Preview your module in Express View Express View is how your end-user views your application. Express View also lets you preview your applications to test your configuration and view the styling. This is also the view your end-users will see when interacting with your application. After configuring a module, click Preview in the Module Builder to interact with the module in Express View.. You'll see the following functionality:
Structure of a Signature Component's Data
A signature component stores its data as key/value pair. The value contains the data type and the signature in Base64 Base64 is an encoding and decoding technique used to convert binary data to an ASCII (American Standard for Information Interchange) text format. format.
Resources
