Form

Form Designer

Design mode

ASP.NET editor

Click .NET in the toolbar to open the ASP.NET code editor, which can be used to define server-side procedures, events, and global variables to handle any specific custom tasks. This feature is mainly intended for ASP.NET server-side development.

As of WorkflowGen version 7.19.0, all default.aspx files are saved with the Page Async property set to true (e.g. <%@ Page Async="true" ... %>). This allows asynchronous ASP.NET web form development (see the Using Asynchronous Methods in ASP.NET 4.5 Microsoft article for more information).

JavaScript editor

Click JS in the toolbar to open the JavaScript code editor, which can be used to define server-side procedures, events, and global variables to handle any specific custom tasks. This feature is mainly intended for JavaScript client-side development.

Advanced features

Server-side editing mode

Check Enable server-side editing mode on the General tab in the Form configuration panel to activate this mode, which allows form designers to modify the content of the form's C# runat server tag (e.g. <script runat="server") and JavaScript script tag (e.g. <script jseditor="true">) directly in the generated default.aspx file on the server (usually located in the \wfapps\webforms[PROCESSNAME]\V[VERSION] folder) using Visual Studio Professional or Visual Studio Code.

The .NET and JavaScript editors are disabled when server-side editing mode is enabled.

You must save the form on the WorkflowGen Form screen every time you make changes to a script's code in the default.aspx file in order to keep the form's HTML script tags (FORM_HTML) up to date. This is mandatory before you can export the XPDL process definition for deployment on another server.

AJAX mode

If you're using the Form Designer, you can enable AJAX mode by checking Enable AJAX mode on the General tab of the Form configuration panel.

When adding a custom control (e.g. a button to handle form submission), you must register the control ID as a postback control in the Page_Load event's ScriptManager object. For example:

protected void Page_Load(object sender, EventArgs e)
{
    base.Page_Load(sender, e);    
    
    // Register the custom button to the script manager for postback management in AJAX mode
    if (ScriptManager.GetCurrent(this) != null) {
        ScriptManager.GetCurrent(this).RegisterPostBackControl(ACTION1_BUTTON1);
    }
}

Design mode

Icon

Name

Description

New form

Creates a new form or replaces the current form

Save the form

Saves the current form (you can also press Ctrl+S to save)

Print the form

Prints the current form

Save a section or field as tool

Saves the selected section or field as a custom tool

Duplicate a section or field

Makes a copy of the selected section or field and inserts it in the form. The duplicate section or field will appear below the selected section or field.

Delete a section or field

Deletes the selected section or field from the form

Form configuration

Opens the Form configuration window

Workflow view

Displays the interactive workflow view

Undo/redo

Undoes or redoes the most recent changes made to the form

Styles

Select a style

List of default and custom styles; select an item to change the style of the current form.

Tools

Select a tool

List of default and custom tools; select an item in order to add the tool to the form using the Insert button.

Insert the selected tool

Inserts the selected tool in the form

Edit ID

Edit section and field identifiers

Tooltip

Edit tooltip

Edit section and field tooltips

Format

Edit format

Edit section and field format

Appearance

Edit appearance

Edit the appearance of headers, footers, labels, sections, and fields (see Appearance)

Behavior

Edit field and section behavior

Displays the interactive view of the workflow, activates the Required, Read-only, and Hidden clickable options for each form field, and sets the behavior of sections and form fields for each action (see Field & section behavior)

Mapping

Edit field’s action data mapping

Displays the interactive view of the workflow, activates clickable options Retrieve the value and Send the value for each form field and defines the data input and output for each action (see Field data mapping)

.NET

ASP.NET

Switch to the ASP.NET code editor

JavaScript

Switch to the JavaScript code editor

ASP.NET editor

Icon

Name

Description

New

Clears the ASP.NET code

Save

Saves the ASP.NET code

Comment/Uncomment

Adds or removes // before the selected line(s)

Design

Form Designer

Switch to the Form Designer

JavaScript

Switch to the JavaScript code editor

JavaScript editor

Icon

Name

Description

New

Clears the JavaScript code

Save

Saves the JavaScript code

Comment/Uncomment

Adds or removes // before the selected line(s)

Design

Form Designer

Switch to the Form Designer

.NET

ASP.NET

Switch to the ASP.NET code editor

Form configuration

A form created with the built-in Form Designer has one header, one or several sections, one or several fields per section, a Submit button, an optional Save as a draft button, and one footer.

General tab

Name

Description

Web forms

Enable server-side editing mode

See Server-side editing mode

Enable AJAX mode

See AJAX mode

Header

Title

The title of the form

Width

The width of the form header

Numeric value with or without the unit of measure (px, pt, in, cm, mm, pc, em, ex, %), e.g. 720px

Height

The height of the form header

Numeric value with or without the unit of measure (px, pt, in, cm, mm, pc, em, ex, %), e.g. 38px

Image alignment

The alignment for the header image:

Right: The image will be aligned to the right.
Left: The image will be aligned to the left.
None: No alignment.

Image URL

The URL of the image to be shown

Image width

The width of the image

Image height

The height of the image

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 only horizontally
Repeat y: the image will be repeated only vertically

Sections

Width

The width for all sections

Numeric value with or without the unit of measure (px, pt, in, cm, mm, pc, em, ex, %), e.g. 720px

Adjust width automatically

Check to apply adjusted width to all sections

Labels

Alignment

The alignment for all field labels:

Right: the label will be aligned to the right of the field
Left: the label will be aligned to the left of the field
Top: the label will be aligned on top of the field

Width

The width for all field labels

Numeric value with or without the unit of measure (px, pt, in, cm, mm, pc, em, ex, %), e.g. 150px

Apply the width

Check to apply the width to all field labels

Buttons

Submit label

The label for the submit button

Save-as-draft label

The label for the save as draft button

Enable save-as-draft

Check to enable and display the save as draft button

Footer

Width

The width of the form footer

Numeric value with or without the unit of measure (px, pt, in, cm, mm, pc, em, ex, %), e.g. 720px

Height

The height of the form header

Numeric value with or without the unit of measure (px, pt, in, cm, mm, pc, em, ex, %), e.g. 22px

Image alignment

The alignment for the footer image:

Right: the image will be aligned to the right side
Left: the image will be aligned to the left side
None: no alignment

Image URL

The URL of the image to be shown

Image width

The width of the image

Image height

The height of the image

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 only horizontally
Repeat-y: the image will be repeated only vertically

Security

Enable XML Signature

Check to enable the use of XML signature in the form data

Digital signatures are used to certify that a document has not been modified by the system or by someone who gained unauthorized access to the system. The XML signature is a W3C standard that defines the syntax and processing rules for creating and representing digital signatures. This is a method of associating a key with referenced data to insure the integrity of this data.

Misc.

Display a confirmation message for quick deletion

Check to prompt a confirmation message prior to deletion

Web references tab

Name

Description

Include jQuery API and jQuery UI libraries

Check this option to include the jQuery and jQuery UI libraries in runtime mode (form execution); by default, these libraries are available in design mode

Available versions:

v1.7.2 & v1.8.20
v1.10.2 & v1.10.3
v3.5.1 & v1.12.1 (default)

Free text

Custom web references to be included in the HTML head that will be available in both design and run-time modes. Only <script>, <meta>, <link>, and <style> tags are supported. When you enter a tag, the free text editor automatically inserts its closing tag.

📌 Example:

<link rel="stylesheet" type="text/css" href="mystyle.css" />

<style type="text/css">

body {background-color:yellow}

p {color:blue}

</style>

<meta name="description" content="my content" />

<script type="text/javascript">

alert("Hello World!");

</script>

<script type="text/javascript" src="myscript.js">

</script>

To fold 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 unfold the code block, click the right arrow. Press Ctrl+Spaceto display a drop-down menu that lists the available variables and keywords.

Translations tab

Name

Description

Select a language

The Form Designer allows you to translate form labels and error messages to the languages available in WorkflowGen. Select a language for translation from the languages available in the drop-down list.

✏️ Note: Generic language selections such as English, French, Spanish, etc., correspond to the version of the language that the administrator initially used to create a form. For example, if the administrator used English (United States) to create a form, then in this instance the selections English (United States) and English would be one and the same.

Free text

Write translated text that corresponds to the selected language. If a field is left empty, then the language will defer in the following order: Country-specific language > Generic language > Default language.

PreviousData NextStructure, Sections & Fields

Last updated 2 years ago