Appearance, Behavior & Mapping
Last updated
Last updated
The built-in style templates (available in the Style drop-down menu) contain additional CSS that will automatically format and optimize a web form 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
The themes in the Styles 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 the Appearance tab to open the Appearance Editor.
You can use the Appearance Editor in Express or Advanced modes.
To use Express mode, hover 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.
Advanced mode provides extended customization options. To show the Advanced mode panel, hover over the item to display the Express mode toolbar, then click the pencil icon to the right.
Text lets you set the text appearance, alignment, and word spacing. Layout sets the width and padding of the item. Borders adds and customizes the appearance of borders. Field sets the top, left, and right margins of the field.
You can also add images to section headers and bodies:
The Image URL field contains the URL of the image to display.
Image repeat sets if and how the image will be repeated:
No repeat: the image will not be repeated
Repeat: the image will be repeated both vertically and horizontally (this is the default setting)
Repeat x: the image will be repeated horizontally only
Repeat y: the image will be repeated vertically only
Image position "x" aligns the image to the left, horizontal center, or right.
Image position "y" aligns the image to the top, vertical center, or bottom.
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 menu, click the checkbox icon at the top right of the panel. To cancel changes and exit, click the x icon.
The Behavior section 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 Behavior 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 view of the workflow. 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 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 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.
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 Mapping on the toolbar.
To set the default values of form fields at the action level, click the desired action in the interactive view of the workflow.
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 Value 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 view and repeat the previous operation.
To set the form data to be stored for an action, click the desired action in the interactive view of the workflow.
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 Value 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 statistics (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 in the Administration Module.
If you have modified the default Quick approval parameters or added additional ones, the parameter values must be static and not bound to dynamic process data.
