|
Form Template Designer |
  
|
|
Form Template Designer |
|
Form template designer is an advanced form layout editor with a rich interface designed to allow users the ability to create and manage form elements within the form layout.
A form layout generally consists of a grid like table with a defined number of cells referenced by a column and row number. A very first form cell is referenced at Row 1 and Column 1. A form layout can have any number of rows and column, however it is recommended there should be no more than 10 columns in any given form layout.
A cell is basically a container for field elements. A field element is the smallest entity in a form layout. Enterprise Forms support all the basic field elements such as textbox, select list, check boxes etc. In addition Enterprise Forms also support advanced field elements such as the rich text editor and datagrid.
A cell can have a number of of field elements however for the purpose of styling and accessibility it is recommended to have 1 field element per cell.
Form Template Designer layout properties
Form Template Designer form layout
Functionalities available within the screen are
Field Element functionalities
• Add Field Element
• Edit Field Element
• Copy Field Element
• Move Field Element
• Delete Field Element
• Edit Cell Properties
Field Row functionalities
• Insert New Row
• Copy Row
• Move Row
• Delete Row
Page Editing functionalities
• Edit Page Columns Size
• Add New Page
• Navigate between Pages
• Delete Page
Page Properties functionalities
• Edit Page Name
• Edit Page Style
• Edit Page Script references
• Edit Page Navigation and Action Buttons
• Edit Page Conditional Visibility
Other functionalities
• Preview Form
• Form Localization
• Show/Hide Interactive Help
• Show/Hide Form Metadata
Field Element Functionalities
Add Field Element
• Move mouse pointer to a cell or field element (hi-lighted by blue-border box) then right-button click to open the Context menu.
• Select Add New Item in Cell to open an Element Properties window to begin adding new field element to the selected cell
TIP:
New field element are always added to the last position of the selected cell
Edit Field Element
• Move mouse pointer to a cell or field element (hi-lighted by blue-border box) then right-button click to open the Context menu.
• Select Edit Item in Cell to open an Element Properties window to begin editing the selected field element
Copy Field Element
• Move mouse pointer to a field element (hi-lighted by blue-border box) then right-button click to open the Context menu.
• Select Copy Selected Item to Cell top copy the currently selected field element and append to the last position of the currently selected cell
TIP:
When a field element is copied ALL properties related to the field element are replicated with the following exceptions:
• A new value is generated for the Field ID, usually a 34 characters ID value
• The field name is affixed with a numeric value. For example the original field name is "someTextField", the replicated field name is "someTextField_1"
• The ReportFieldName field is affixed with a numeric value. For example the original ReportFieldName value is "someTextField_1", the replicated ReportFieldName value is "someTextField_2"
Move Field Element
• Move mouse pointer to a field element (hi-lighted by blue-border box) then left-button click and hold.
• Drag the mouse to another cell located to one of the small grey boxes available in each cell
• Release the button click to drop the field element to that position in the cell
TIP:
This functionality is only available to Internet Explorer (IE) browsers only
Delete Field Element
• Move mouse pointer to a field element (hi-lighted by blue-border box) then right-button click to open the Context menu.
• Select Delete Item to the selected field element from the cell
• Select OK in the confirmation window to confirm the delete process, otherwise click Cancel
TIP:
This action is permanent and can not be reversed
Edit Cell Properties
• Move mouse pointer to a field element (hi-lighted by blue-border box) then right-button click to open the Context menu.
• Select Edit Cell Properties to open the Cell Properties windows to edit properties for the cell
Field Row Functionalities
Insert New Row
• Select a position to insert new row from the list of available items in the Insert Row field
• Click on the adjacent Insert button to insert a new row to the form layout grid
Copy Row
• Click on the button (
) on the row to be copied to append a new row (with field element contents) below the currently selected row
TIP:
Additional notes
• Field elements contained in the selected row are also copied
• New Field ID are generated for each copied field element
• FieldName and ReportFieldName are incremented with a numeric value
Move Row
• Click on the up (
) or down (
) arrow button to move the selected row up or down the form layout grid respectively.
Delete Row
• Click on the Delete button () to delete the selected row from the Form Layout grid
• Select Ok on the confirmation window to confirm the delete process, otherwise click Cancel
TIP:
This action is permanent thus can not be reversed
Page Editing Functionalities
Edit Page Columns Size
• Enter a numeric value from 1 - 9 in the Number of Columns property
• Click on the Update link button to apply changes
Add New Page
• Select the position to insert a new Page from the list of available items in the Insert Page field
• Select the Copy Current Page Content if required to replicate ALL field elements in the current page to the new page
TIP:
Additional notes
• Field elements contained in the selected row are also copied
• New Field ID are generated for each copied field element
• FieldName and ReportFieldName are incremented with a numeric value
• The newly created page is appended to the last position
Navigate between Pages
• Click on the Page Number from the available list of form pages to navigate to that page
TIP:
The currently displayed page is displayed in Red color font
Delete Page
• Click on the Delete Page button to delete current page from the form
• Click Ok on the confirmation window to confirm the delete process, otherwise click Cancel
TIP:
This action is permanent thus can not be reversed
Edit Page Properties
Edit Page Name Property
• Provide a name in the Current Page Name field
• Click on the Update link button to apply changes
TIP:
For multi-page forms, the page name property is used as identifiers when navigating between pages in the form.
Edit Page Style Property
• Provide an optional CSS class value in the Page CSS field to apply the overall CSS style to the page form
• Provide an option CSS style values in the Page Style field to apply the overall CSS style to the page form
• Click on the Update link button to apply changes
TIP:
To include external style sheets, use the HTML element to add Link HTML tags to the page. The default Page CSS value EFFormBody is included in the module.css stylesheet.
Edit Page Script References
• Provide a URL address (make sure to include http or https in the address) to where an external Javascript page resides
• Click on the Update link button to apply changes
TIP:
Javascript functions available from the external file can be accessed in ClientActions properties for each field element or Before Submit script of the Action Button property of the Edit Workflow screen.
Edit Page Navigation and Action Buttons
• Select Hide Navigation Buttons if required to hide the Navigation Buttons (First, Previous, Next, Last) for the current page of a multi-page form
• Select Hide Action buttons if required to hide the workflow Action Buttons for the current page.
• Click on the Update link button to apply changes
TIP:
Navigation buttons are buttons that allow the user to navigate between multi-page forms. If the form is a single page form, navigation buttons will not be shown even if Hide Navigation Buttons property is not selected. For single page forms, it is advisable not to select the Hide Action Buttons property as this will remove the user's ability to submit or progress the form to the next workflow level.
Edit Page Conditional Visibility
Page level Conditional Visibility is the ability to hide or show the page depending on the value of a field element in the current page or other pages. Conditional Visibility can be activated only when there are more than one pages in a form (multi-form).
• Select an item from the Conditional Visibility property to enable or disable conditional visibility. There are three options to choose from, N/A (Not Applicable), Visible If and Hide If. N/A means that Page level Conditional Visibility is not active, the other two options indicate the feature is active.
• When Conditional Visibility is active, a list of Conditional Fields are display, select a an item from the list available.
• Check Auto Postback option if changes to the selected Conditional Field is to trigger a postback to the server. In other words a postback means that form data is to be sent back to the server for processing.
• Select from an item from the list of available comparison type and the value to compare against for the Evaluation Expression. This evaluation expression is to be validated against the value of the selected Conditional field. There are 10 comparison operators available as described below
• Any Value: Always return TRUE for any value provided in the Conditional Field
• Equals: Returns TRUE if the provided Conditional Field value match exactly to the value specified in the evaluation expression. This matching operator is case sensitive.
• Not Equals: Returns TRUE if the provided Conditional Field value do not match exactly to the value specified in the evaluation expression. This matching operator is case sensitive
• Less Than: Returns TRUE if the provided Conditional Field value is less than the value specified in the evaluation expression. This comparison operator applies to Date and Numeric value types
• Less Than or Equals: Returns TRUE if the provided Conditional Field value is less than or equals to the value specified in the evaluation expression. This comparison operator applies to Date and Numeric value types
• Greater Than: Returns TRUE if the provided Conditional Field value is greater than the value specified in the evaluation expression. This comparison operator applies to Date and Numeric value types
• Greater Than or Equals: Returns TRUE if the provided Conditional Field value is greater than or equals to the value specified in the evaluation expression. This comparison operator applies to Date and Numeric value types
• Contains: Returns TRUE if the provided Conditional Field value contains the value specified in the evaluation expression. This comparison operator is NOT case sensitive
• Empty or Equals: Returns TRUE if the provided Conditional Field value is empty or blank or the provided Conditional Field value matches exactly the value specified in the evaluation expression. This comparison operator is case sensitive
• Empty or Not Equals: Returns TRUE if the provided Conditional Field value is empty or blank or the provided Conditional Field value do not match exactly the value specified in the evaluation expression. This comparison operator is case sensitive
• In List: Returns TRUE if the Conditional Field value exists in the list of values (separated by coma or semi-colon) provided in the FieldCompareValue field
• Not In List: Returns TRUE if the Conditional Field value does not exists in the list of values (separated by coma or semi-colon) provided in the FieldCompareValue field
• State In List: Returns TRUE if the Current Workflow state exists in the list of values (separated by coma or semi-colon) provided in the FieldCompareValue field. The list can contain case-sensitive State Name or State ID
• State Not In List: Returns TRUE if the Current Workflow state does not exists in the list of values (separated by coma or semi-colon) in the provided FieldCompareValue field. The list can contain case-sensitive State Name or State ID
• DNN Role In List: Returns TRUE if one of the DNN Roles of the current User exists in the list of values (separated by coma or semi-colon) provided in the FieldCompareValue field. The list can contain case-sensitive DNN Role Name or Role ID
• DNN Role Not In List: Returns TRUE if none of the DNN Roles of the current User exists in the list of values (separated by coma or semi-colon) provided in the FieldCompareValue field. The list can contain case-sensitive DNN Role Name or Role ID
• Custom Role In List: Returns TRUE if one of the Custom Roles of the current User exists in the list of values (separated by coma or semi-colon) provided in the FieldCompareValue field. The list can contain case-sensitive Custom Role Name or Role ID
• Custom Role Not In List: Returns TRUE if none of the Custom Roles of the current User exists in the list of values (separated by coma or semi-colon) provided in the FieldCompareValue field. The list can contain case-sensitive Custom Role Name or Role ID
• Click on the Update link button to apply changes
TIP:
Only when the Evaluation Expression returns TRUE the specified Conditional Visibility for the current page is activated.
Other Functionalities
Preview Form
• Click on the Preview Link button (
) to preview the overall form layout for all pages of the form
Form Localization
• Click on the Localization link button (
) to open Field Localization screen to create and maintain separate language versions of the form.
Show/Hide Interactive Help
• Select the Show Help option to turn on Interactive Help which display a section of how to use instructions at the bottom of the screen.
• Unselect this option to turn off Interactive Help as well as the bottom help section
TIP:
Changes apply here also affect Interactive Help through out the Enterprise Forms modules
Show/Hide Form Metadata
• Select the Show Form Metadata option to turn on/off the options to display field meta data information when the mouse is moved over a field.
TIP:
When this option is turned on, it can slow down the rendering time of the form as additional information needs to be displayed. The performance can be noticeable when there are a significant amount of fields in a page.