The designer page shows all formerly added (or recognized) interactive fields on the documents and allows to interactively place additional interactive fields.

The Designer screen is showing following elements:

• Standard menu bar
  on the very left side, by default collapsed.
  Menu items have been explained in the first chapters of the Application Reference - WebUI.
• The Recipients List
• The elements toolbox with
  • Form Field Elements
  • Predefined (static value) Fields
• The main editor
• The page preview section
  (on the right side)
  
• Properties Panel
  to configure element properties; visible only when an element is selected and in property-editor mode.
• Wizard Navigation Bar (bottom)

This documentation covers in the next chapters:

UI Areas of the Designer explained in Detail

In this chapter, we are explaining the UI elements and their behavior in detail. We are not covering

Recipients List

Shows the list of all recipients and automatic-signature activities.
Allows to select to which recipient elements that are added later-on are assigned, and can be used to re-assign the element currently selected in the Main Editor.

Elements Toolbox

Form Field Elements

Predefined (static value) Fields

The value of a predefined field will be inserted automatically at the time when the recipient, to whom a predefined field was assigned, is opening the activity. Following predefined fields can be used:

• Email, which is the recipient email of the involved signer
• Initials, which is the combination of the first letters of the first name and the last name (Example: For the recipient "John Doe", the initials are "J D")
• First name, which is the first name of the recipient as defined by the sender on the Recipients Page
• Last name, which is the last name of the recipient as defined by the sender on the Recipients Page
• Full Name, which is the combination of the full first name and last name.
  Note, especially in international context, that the current implementation today always lists the first name (given name) first, and the last name (surname) as second.
• Date, which is the date when the activity was opened by the signer.
  Read more about configuring the date format in the properties chapter below.

Main Editor

What-you-see-is-what-you-get (WYSIWYG) editor to place form elements, re-arrange and resize them. Elements can be added on the document by dragging them from the Elements Toolbox and placing it directly at the target location. After adding the element to the document, when moving the mouse over the element on the document, an in-place action menu up shows up:

The in-place action menu provides following actions:

• The cogwheel opens the properties panel (which we describe in detail in one of the next chapters)
• The copy button allows to duplicate an element. The created duplicate is located at the same position and has to be moved to another position after pressing the copy button.
• The delete button (which is available only on elements inserted using the designer, or detected during document parsing when based on advanced document tags or sig-string notation, but not those that had been embedded as AcroForm Elements on the PDF) allows to delete an interactive element.

Re-arranging elements on the page can again be done by Drag&Drop. While re-arranging elements, rulers which are automatically appearing during the re-arranging help to allign controls precisely:

Elements can be resized with a Drag&Drop interaction on the lower-right corner (where it is indicated using the resize-corner icon). Note that elements that had been embedded as AcroForm Elements on the PDF cannot be resized.

Page Preview

Shows the structure of documents and their pages contained in the envelope, and previews locations of signature fields on the document.

Properties Panel

On devices without touch capabilities, the user can open the properties panel by selecting (clicking) an element in the Main Editor area. On tablet PCs (or in general on devices with touch input), the user must click on the cogwheel icon on an element's adhoc menu to open the properties panel. The color of the property panel is indicating to which recipient an element is assigned. The recipient colors used in the recipients list, and also used for the elements in the main editor, are reflected in the colors of the properties panel. When the properties panel is open, the user can change settings, but needs to confirm or cancel the properties panel using one of the two buttons at the bottom of the properties panel, before other UI changes (e.g. arranging of elements) can be done in the UI:

Wizard Navigation Bar

The navigation control of the wizard, with following buttons while on the Designer Page:

• Arrow-Back, navigates to the recipients page
• Discard, which deletes (after confirmation dialog) the draft
• Save-As
  • Template, allowing to create a new Template based on the data configured for the Draft
  • Draft, persisting the changes made on the draft and returning back to the Envelope Filter View.
• Sign-Button, visible and accessible only when the first signer of an envelope is the sender
• Next-Button, proceeds to the Summary Page

Element Properties

Let's have a deeper look into the properties of the elements which you can place using the Designer Page. When an element was placed on a document, and the element gets selected, the properties panel gets opened. Within the properties panel, different properties of the element can be defined. The properties which can be defined vary between different element types.

General properties of all Elements

There is a couple of properties which can be defined on any interactive element thatcan be placed on a document:

The assignment of an element to a recipient defines which recipient is allowed to, or must, fill an element as part of fulfilling the (signing) activity. An element can be assigned to one (or no) recipient. Only recipients of type "signer" (with or without having signature fields) are eligible in the recipients selection (with an exception - "Automatic Signing Activities" can be selected on signature fields, see below). If a field is not assigned to any recipient, only the default value will be shown to all signers (and other recipients), but nobody will be able to interact with the element or change its value. When changing the recipient using the dropdown list, both the color indicator of the properties panel and the color of the element in the main panel will automatically change to the color indicator of the recipient (also visible e.g. in the recipients panel).

Only the recipient to whom an element was assigned will later-on be able to edit the value, but also all the other recipients in the signature workflow will see the value. Recipients that are involved in an activity before the signer is setting/editing the value see the field's default value (which might be empty or changed afterwards), while recipients that are involved after the signer see the value which the signer finally set.

Also, all elements support to define if an element is "required" or "optional". "Required" means that the user to whom an element is assigned must set a value (or keep the initial value), to ensure the element's value is not empty. Some field types like checkboxes may define different policies for handing the "required" property; we will explain details below in the properties section of the respective field types..

Properties of Textfield Elements

General Settings

In addition to the general properties of all elements, the textfield offers following additional properties:

In the "Definition & Assignment" section:

• Readonly; when this property is checked the user cannot edit the value.
• Id; a (technical) field identifier which is typically used when the form values should be processed automatically after signing. Its use typically depends on integration scenarios.
  The control supports copying the value directly to the Windows clipboard, by pressing the "copy" icon ().

In the "General Section":

• Labeled as "New value", the initial value of the textfield element can be defined. This value will be shown to the recipients already before editing the value.

Advanced Settings

The "Advanced" tab contains Text & Appearance configuration and several options of the Textfield.

In the Text & Appearance section, the sender can define

• Font Family
• Font size
• Text color
• Text Alignment

The font family defines which font should be used for rendering the text in the web browser, and also be used for filling form elements in the PDF. Keep in mind when working with languages that require usage of Unicode characters, that the font installed on the server must also support the entire (used) unicode charset - otherwise the entire text or some characters will be represented using replacement characters.

In the "Available Options" section, the sender can define

• that a text field is accepting multiline input
• that the field behaves as a password field, which implies that the value entered by the recipient (or prefilled) is not readable but showing masked password input instead
• Define a maximum text input length (character limit)

Properties of Signature Elements

General Settings

The "Definition & Assignment" section behaves like defined in the standard behavior of all elements, but with following deviations:

• Signature fields can be assigned also to "Automatic Signing Activities", making the automatic signatures visible on the document
• A "Batch Signature" option is added

With the "Batch Signature" checkbox enabled, it makes the signature field a member of a batch of several signature fields. Signatures being member of a batch can be signed all at once if the signer prefers, but allow the signer also to sign them one by one. When the batch signing option is enabled, the sender can distinguish between different batch signing behavior:

• Simple Batch
  where the signer just knows how many signature fields are signed as part of the batch
• Signature List (unselected)
  where a list of all signature fields (document name and page number, or signature field label) are displayed in a list of checkboxes; the user needs to select those which should be signed as part of the batch (opt-in)
• Signature List (preselected)
  where a list of all signature fields (document name and page number, or signature field label) are displayed in a list of checkboxes; the user needs can deselect those which he doesn't want to sign as part of the batch (opt-out)
• Signature List (selected, required mandatory)
  Like "preselected", but without an option to uncheck the "mandatory signature fields)
• Signature List (unselected, required mandatory)
  Like "unselected", but mandators signature fields still preselected and without an option to uncheck the "mandatory signature fields

The signature field, in the designer page's main editor, is represented by a different icon when the signature field is member of a batch:

In the "General" section, the signer can select the signature type(s) he wants to allow for the signer. The different signature types are explained in detail in the Electronic Signature Guide (sender perspective). Also, the Signer Guide describes the different user experience from signer's perspective.

If the sender allows just one signature type, the signature type will be automatically selected when a recipient later-on clicks on the signature field. When allowing multiple signature types, the sender is allowing the recipient to select one of the allowed signature types. The sender can in addition define, by marking the "star" icon (), a preferred signature type which is then automatically preselected for the recipient.

In addition, the sender can define if a timestamp of a timestamping service will be embedded on the signature directly.
The (RFC 3161 compliant) timestamp service therefore has to be configured in the server configuration. It depends on server configuration, if a qualified timestamp service will be used therefore.

Properties of Radiobutton Elements

General Settings

In addition to the general properties of all elements, the radiobutton element offers following additional properties:

In the "Definition & Assignment" section:

• Readonly; when this property is checked the user cannot edit the value.

In the "General Section":

• Selection of the Radio Button Group to which an element belongs;
  this dropdown list is editable and allows to assign the Radiobutton to an existing group by selecting it from the list, or to create a new Radiobutton Group just by entering a name which is not yet in use.
• The value of the selected Radiobutton element; this value is typically used in integration scenarios where form values are automatically processed after signing.
• The Radiobutton which should be preselected in a Radiobutton group can be selected by clicking the radiobutton preview (circle) in the properties panel:
  
  

Properties of Checkbox Elements

General Settings

In addition to the general properties of all elements, the checkbox element offers following additional properties:

In the "Definition & Assignment" section:

• Readonly; when this property is checked the user cannot edit the value.
• Id; a (technical) field identifier which is typically used when the form values should be processed automatically after signing. Its use typically depends on integration scenarios.
  The control supports copying the value directly to the Windows clipboard, by pressing the "copy" icon ().

In the "General Section":

• An "export value", which is the meaning assigned to the checkbox when it is checked. Using this field might be indicated when form values should be processed automatically after signing. Its use typically depends on integration scenarios.
• The initial value of the checkbox element; while the label automatically changes between "Deselected" and "Selected" in the current implementation to reflect its current state.

Properties of Predefined Fields

On predefined fields, only the recipient can be selected. Different to other form elements, it is not possible to set a predefined field "mandatory" as the value anyhow is filled automatically.

On the predefined date field, it is possible to select, from a predefined list of supported date formats, the format which should be used to render the date information: