Signature Component

Overview

The Signature component creates a signature field in your module. In Express View, the signature field displays as a box where end-users can use their mouse to input their signature. In the submission data, the signature stores as a Base64 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

A static image displaying the Menu component's Display settings.

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:

  • px (Pixel): Sets the signature box width to an absolute value in pixels. The value range is 0px to 9999px.

  • % (Percentage): Sets the signature box width to a percentage of the column or page. The value range is 0% to 100%.

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 interact with the component. Choose from the following options:

  • Enable User Input: Allow end-users to view and enter data in this field.

  • Disable User Input: Prevents end-users from entering data in the field, but lets them view it. In the Module Builder, the field’s background displays as gray. In Express View, when end-users hover over the field, their cursor displays with a prohibited symbol.

  • Read Only - Legacy: Prevents end-users from entering data and replaces the field with the component’s data value. If no value is provided, the component displays None.

Adding a Signature Component

Configure a Signature component to provide a signature field for an 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 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.

A static image displaying the Signature component's configuration window, the Footer Label and Background Color fields are highlighted.

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. 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 format.

A static image displaying the Developer console. The Angular Command displays the Submission Contol, the Signature component's data is displayed.

Resources