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.
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.
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.
To display the Express mode toolbars for all of the items on the form, press Ctrl+Shift+A.
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.
The Behavior screen is used to visually define the behavior of form sections nd fields for each action of the workflow.
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.
Sections | Required | Read-only | Hidden |
All sections | ✔️ | ✔️ | ✔️ |
Default – Fields | Required | Read-only | Hidden |
File attachment (Standard .NET | ✔️ | ✔️ | ✔️ |
File attachment ( | ❌ | ✔️ | ✔️ |
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.
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 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.
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.
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.
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.
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.
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.
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.
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.
To activate the interactive workflow view and define the behavior of the form, click on the toolbar.
To activate the interactive workflow view and manage the mapping of the form, click on the toolbar.
