Structure, Sections & Fields

Structure

Header

The header contains a title, a label, and an optional image.
The title can be used to display the process name. Its text can be edited directly in the form.
The label is used to display the current request number. Its default identifier is CURRENT_REQUEST and can be referenced in an action parameter to receive the Request.Id macro.
The image is used to display a logo. It can be resized or realigned.
A fixed width and height can be set for the header in the form configuration window.

Section

The section has a title to display the section name. Its text can be edited directly on the form.
It can have one or several fields.
Each section must have a unique identifier.
Sections can only be aligned vertically and reordered using the mouse drag-and-drop action.
When inserting a section tool into the form, the new section will be placed in the last position.
Section width will be resized automatically based on the widest field in the form whenever there is a field width change.
A fixed width can be set for all sections.
The section’s settings can be edited by clicking the pencil icon on the right side of the section name.

See Tools for the different types of default section.

Field

The field has a label and an input control.
The label is used to display the name of the field. Its text can be edited directly on the form. It can be resized and realigned.
A fixed width can be set for all labels (General / Labels).
The input control is where a value is captured in the form. It can be resized and realigned.
Each field must have a unique identifier.
Fields within the same section are prefixed with the section’s identifier following an underscore character.
Fields within a section can be reordered vertically using the mouse drag-and-drop action.
A field can be moved from one section to another section using the mouse drag-and-drop action.
When inserting a field tool into the form, the new field will be placed in the last position of the selected section or the first section if no section is selected.
By default, fields are aligned vertically on the same column.
Two fields can be aligned horizontally on the same row using the Remove line break button (left arrow) on the right side of the first field.
Two fields can be aligned vertically on the same column using the Line break button (right arrow) on the right side of the first field.
The field’s settings can be edited edited by clicking the pencil icon on the right side of the field.

See Tools for the different types of default field.

Button

The Submit and Save as draft buttons can be renamed in the form configuration window (General / Buttons) or in the Appearance Editor (see Appearance Editor).
The Save as draft button can be enabled or disabled as well.
Their identifiers are submitButton and saveAsDraftButton, respectively.

Footer

The footer contains a title and an optional image.
The title can be used to display a note. Its text can be edited directly on the form.
The image is used to display a logo. It can be resized or realigned in the form configuration window (General / Footer) or in the Appearance Editor (see Appearance Editor).
A fixed width and height can be set for the footer.

You can also change the web form style sheet and other attributes (header image, footer, text, etc.) at runtime by adding the following .NET code to your form:

protected void Page_Load(object sender, EventArgs e)
{
    base.Page_Load(sender, e);
    String stylePath=HttpContext.Current.Request.PhysicalApplicationPath.Replace("WfApps\\WebForms\\","App_Data\\Templates\\Forms\\En\\Default\\css");
    Page.Header.Controls.Remove(this.FindControl("StyleSheet"));
    Page.Header.Controls.Add(
        new LiteralControl(
            System.IO.File.ReadAllText(stylePath + "\\" + "metal.css")
        )
    );
    string imageUrl="http://mywebsite/mylogo.jpg"
    HeaderImage.Style["background-image"] = "url('" + imageUrl+ "')";
    HeaderTitleLabel.Text="My Title #";
    FooterTitleLabel.Text="My footer";
    imageUrl="http://mywebsite/myfooter.jpg";
    FooterImage.Style["background-image"] = "url('" + imageUrl+ "')";
}

This replaces:

The current style sheet with the metal.css template
The header title label
The header image
The footer title label
The footer image

You should define the width and height of the images in the form configuration in the .NET code.

📌 Example:

FooterImage.Style["width"] = "200px";
FooterImage.Style["height"] = "100px";

An absolute URL is recommended because the generated form archive (HTML) could be opened in the email notification.

Sections & fields

Tools

Default and custom tools are available in the Tools drop-down list.

Save a section or field as tool

This feature allows a form designer to save an existing section or field in the current form as a custom tool template in order to be reused in other forms. First, select a section or field then click the Save a section or field as tool icon on the toolbar (see Toolbar).

Manage custom tools

To open this window, click the Tools drop-down menu and select Manage custom tools, which allows you to delete custom tools.

Section settings

File attachment field settings

CheckBox/RadioButton field settings

These settings apply to CheckBoxList, CheckBoxListVertical, RadioButtonList and RadioButtonListVertical fields as well.

TextBox field settings

These settings apply to Currency, Date, DateTime, Numeric, Password, and TextArea fields.

ListBox/DropDownListBox field settings

These settings (except Items) apply to Label, ReadOnlyCurrency, ReadOnlyDate, ReadOnlyDateTime, ReadOnlyNumeric, and ReadOnlyText fields as well.

GridView field settings

ASP.NET user control field tool

The Form Designer supports a custom field tool that is an ASP.NET user control. You can create this tool and manually deploy it on the server. It must have the following elements, folder and file structures:

User control field template: \wfgen\App_Data\Templates\Forms\[language]\[folder name]\fields\[user control name].txt

User control sources:

ASCX: \wfgen\WfApps\WebForms\[user control name].ascx
Code-behind: \wfgen\WfApps\WebForms\[user control name].ascx.cs

When you enter a tag, the user control field automatically inserts its closing tag. To collapse a code block, click the down arrow next to the line number, which will insert a double-arrow icon in place of the code. To expand the code block, click the right arrow. Press Ctrl+Space to show a drop-down menu that displays the available variables and keywords.

The user control field supports the Custom attributes settings (see File attachment field settings).

ID editing

The ID menu in the toolbar will activate the field’s identifier edit mode. You can change the identifier of the header label, sections and fields. Identifiers are normally used to identify a form element such as a section or a field in WorkflowGen’s action parameters (e.g. FORM_FIELDS_REQUIRED) or in the form’s ASP.NET code-behind.

Rules

Each identifier must be unique.
It must start with a letter.
It can only contain alphanumeric and underscore characters.
It is case sensitive.
Each field within a section will be automatically prefixed with the section’s identifier following an underscore character (e.g. section id=ACTION1; field id=ACTION1_MYFIELD1)
Each field within a GridView field will be automatically prefixed with the GridView’s identifier following the underscore character (e.g. gridview id=ACTION1_MYGRIDVIEW1; field id=ACTION1_MYGRIDVIEW1_TITLE1).
- If the field is moved from one section to another section, then the field’s identifier will be automatically prefixed with the new section’s identifier.
- If the section’s identifier is changed then all the fields within the section will be automatically prefixed with the new section’s identifier.

A tooltip with the full/real identifier of the element will be displayed when you mouseover the identifier input field.

The Tooltip menu in the toolbar will activate the field’s tooltip edit mode. You can change the tooltip for the form fields only. Tooltips are normally used to display more information about the field when the user moves the mouse pointer over it.

Format editing

The Format menu in the toolbar will activate the field’s format edit mode. You can change the format of TextBox, Currency, Date, DateTime, Numeric, Label, ReadOnlyCurrency, ReadOnlyDate, ReadOnlyDateTime, ReadOnlyNumeric and ReadOnlyText fields. Formats are normally used to specify the way to capture and display a specific type of value based on the user’s language and culture.