Appearance, Behavior & Mapping

Appearance

Styles

Built-in style templates are available in the drop-down menu in the Form Designer toolbar. These contain additional CSS that will automatically format and optimize web forms to display on smartphone and tablet devices based on their screen resolution.

Custom styles can be created and deployed on the server using the following folder and file structure: \wfgen\App_Data\Templates\Forms[language][folder name]\css[style name].css

📌 Example

\wfgen\App_Data\Templates\Forms\En\MyCompany\css\MyStyle.css

Styles selected in the drop-down menu will be applied to the entire form. The Appearance Editor lets you fully customize individual form elements, such as font and size, text and background colors, border styles and colors, etc.

Appearance Editor

The Appearance Editor lets you customize the appearance of individual form items and provides further options. You can change the appearance of headers and footers, fields and their labels, radio buttons, checkboxes, the Submit button, and the optional Save-as-draft button. Click in the Form Designer toolbar to open the Appearance Editor, which you can use in Express or Advanced modes.

Express mode

To use Express mode, hover the mouse over the item you want to customize and a toolbar will appear that lets you change the appearance of text and the size of the top margin. (If the item contains several fields, toolbars will appear in the corresponding positions.) You can also change the width of labels and fields.

Editing form item appearance in Express mode

To display the Express mode toolbars for all of the items on the form, press Ctrl+Shift+A.

Express mode toolbars displayed for all form items

Advanced mode

Advanced mode provides extended customization options. To display the Advanced mode panel, hover the mouse over the form item to display the Express mode toolbar, then click the icon to the right.

Editing form item appearance in Advanced mode

The Text section lets you set the text appearance, alignment, and word spacing. The Layout section sets the width and padding of the item. In the Borders section, you can add borders and customizes their appearance. The Field section sets the top, left, and right margins of the field.

On the Apply to... tab, you can choose the items to which you want to apply the customized appearance settings using the checkboxes.

To apply your customized appearance and exit the Advanced mode editor, click the icon at the top right of the panel. To cancel changes and exit, click the icon.

Field & section behavior

Interactive workflow view: Behavior

The Behavior screen is used to visually define the behavior of form sections nd fields for each action of the workflow.

To activate the interactive workflow view and define the behavior of the form, click on the toolbar.

To define the behavior of sections and fields of the form at the action level, click the desired action in the interactive workflow view. Once the action is selected, the Required, Read-only, and Hidden settings are activated as clickable buttons for each section and the form field.

To activate the Required, Read-only, and Hidden settings of each section and form field, click the button related to the section or field for which you want to manage the behavior.

To define the behavior of the form for the other actions of the workflow, click another action via the interactive workflow view and repeat the above operation according to the desired behavior.

Table of supported behaviors for sections

Sections	Required	Read-only	Hidden
All sections	✔️	✔️	✔️

Table of supported behaviors per field type

Default – Fields	Required	Read-only	Hidden
File attachment (Standard .NET FileUpload control)	✔️	✔️	✔️
File attachment (WorkflowFileUpload control)	❌	✔️	✔️
CheckBox	❌	✔️	✔️
CheckBoxList	❌	✔️	✔️
CheckBoxListVertical	❌	✔️	✔️
Currency	✔️	✔️	✔️
Date	✔️	✔️	✔️
DateTime	✔️	✔️	✔️
DropdownListBox	✔️	✔️	✔️
Gridview	✔️*	✔️	✔️
Gridview - Column	✔️*	❌	❌
Label	❌	❌	✔️
ListBox	✔️	✔️	✔️
Numeric	✔️	✔️	✔️
Password	✔️	✔️	✔️
RadioButton	❌	✔️	✔️
RadioButtonList	✔️	✔️	✔️
RadioButtonList Vertical	✔️	✔️	✔️
ReadOnlyCurrency	❌	❌	✔️
ReadOnlyDate	❌	❌	✔️
ReadOnlyDateTime	❌	❌	✔️
ReadOnlyNumeric	❌	❌	✔️
ReadOnlyText	❌	❌	✔️
TextArea	✔️	✔️	✔️
Text	✔️	✔️	✔️

* Not supported in field conditions.

Field data mapping

The Mapping screen enables you to visually define the default values ​​(data in) and/or data to be stored by the workflow (data out) of the form fields for each action of the workflow.

To activate the interactive workflow view and manage the mapping of the form, click on the toolbar.

Interactive workflow view: Mapping

To set the default values ​​of form fields at the action level, click the desired action in the interactive workflow view.

Once the action is selected, the value IN and value OUT buttons are activated in each form field.

Default value (data in)

A default value will automatically populate a field when displaying the form following the launch of an action. These default values can be of several types:

• Manually-entered text

• A macro selected from the list of available macros

• Workflow data selected in the data list

To set the default value of a field at the action level, click the IN button to the right of the field concerned.

Interactive workflow view: Mapping default IN values

In the dialog box that appears, set the default value of the field by entering text in the Text section, by selecting a macro from the drop-down Macro list, or by selecting process data in the Data combo box. Click the check mark at the top right to save.

To set the default values ​​of other form fields for each of the actions of the workflow, click another action via the interactive workflow view and repeat the previous operation.

Data stored by the workflow (data out)

To set the form data to be stored for an action, click the desired action in the interactive workflow view.

Data stored by the workflow corresponds to the value of form fields that will be retrieved by the workflow as a result of an action, and that can be used for the following purposes:

• As workflow conditions

• In the assignment of an action, setting the time for action and content of notifications

• Through the tracking features and/or statistics (reporting)

To send the value of a form field and therefore store it as process data, click OUT to the right of each field in question.

Interactive workflow view: Mapping OUT values

Fields whose values have been sent are automatically declared in the Data tab of the process definition and will be usable as workflow transitions, as tracking features and analytics (reporting), etc.

Data names should respect the following XML naming rules:

• They should begin with a letter or an underscore

• They should contain only letters, digits, hyphens, underscores, and periods

• They should not contain spaces

• They should not begin with the letters XML in any case (e.g. xml or Xml)

Otherwise, the action parameter will be successfully saved, but a warning message will be displayed upon saving. For more information, see https://www.w3schools.com/xml/xml_elements.asp.

To define the data stored for each of the actions of the workflow, click another action via the interactive view and repeat the previous operation.

Quick approval

To enable the Quick approval feature on validation actions, click the Quick approval tab and check Enable Quick approval. Click Edit email approval keywords to specify email approval keywords (comma-separated) for the configured Quick approval parameters. Once enabled, you can also Enable Quick approval comments for comments actions.

To enable Quick approval by default, check Enable Quick approval by default on the Portal tab in the Configuration panel.

If you've modified the default Quick approval parameters or added additional ones, the parameter values must be static and not bound to dynamic process data.