Form

Form Designer

Design mode

ASP.NET editor

Click the .NET icon at the far right of 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 developers.

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.

If you're using Visual Studio to develop a custom ASPX form in AJAX mode, do the following:

1. In the <form runat="server"> element, add a ScriptManager at the beginning of the form and wrap all the form content in the contenttemplate of an UpdatePanel.

   Example:

    <form id="form1" name="form1" runat="server">
    <asp:scriptmanager id="ScriptManager1" runat="server"></asp:scriptmanager>
    <asp:updatepanel id="UpdatePanel1" runat="server">
    <contenttemplate>
    ... form content ...
    </contenttemplate>
    </asp:updatepanel>
    </form>

2. Since standard FileUpload controls are not supported inside the UpdatePanel, use our custom WorkflowFileUpload user control for your attachment needs.

3. Add the following line in the page constructor to prevent an issue that can occur when updating a row in a GridView:

    this.UseClientSideOptimization = false;

   You will see no difference at runtime, since all this does is prevent a postback when clicking the Update button and the validation fails. The UpdatePanel already prevents postback.

4. Register the postback triggers either in the Page_Load event or directly in the ASPX page.

Toolbar

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
Id	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

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

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
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
Enable AJAX mode	Enable AJAX mode

Web references tab

Name	Description
Include jQuery API and jQuery UI libraries	Check to include the jQuery API (v 1.7.2) and jQuery UI (v 1.8.20) libraries in the run-time mode (execution of the form); by default, these libraries are available in design mode
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.