Editing Form Widgets

Each form widget can be customized using the widget settings that are built into each widget. Every form widget setting has customizable attributes. The following is a list of the form widgets with a brief description.

Field Type	Field Description
Single-Line Text	Text field for single-line text
Multi-Line Text	Text area field for multiple line text
Checkbox Field	Checkbox field for Boolean (true/false), string (‘true”,’false’ or comma-delimited string of values) or data array
Radio Group Field	Radio group Field with list of options
Select Field	Drop down selection field
Section	Section field for containing other fields
Button Group	Represents form action buttons
Map Router	Field represents list of addresses and associated google map
Custom HTML Block	Custom HTML, inline JavaScript and CSS to be displayed in the form

Edit each added form widget by clicking the button. The widgets setting page will display with the following list of settings:

		Widget Settings
		Basic Settings	Advanced Settings	Validation and Masking	Help Messages	Options Values	Predefined Logic	Client Side Programming
Forms Widgets	Single-Line Text	ü	ü	ü	ü		ü	ü
	Multi-Line Text	ü	ü	ü	ü		ü	ü
	Checkbox Field	ü	ü		ü	ü	ü	ü
	Radio Group Field	ü	ü		ü	ü	ü	ü
	Select Field	ü	ü		ü	ü	ü	ü
	Section	ü	ü					ü
	Button Group	ü	ü					ü
	Map Router	ü					ü
	Custom HTML Block	ü					ü	ü

To avoid data being truncated, ensure that the FormsBuilder setting attributes do not exceed the ProjectDox User table field lengths.

Make the setting attribute adjustments on the widget setting page by expanding each attribute and applying the required information. The widget settings for each widget will have different setting attributes based on the functionality of the widget. The Advanced Settings should be used by professional service development except for the Empty Selection Label field.

Widget Setting	Setting Attribute	Description
Basic Setting	Label	Display name that appears on the form.
	ID	The ID of the HTML control which can be referenced in JavaScript. This ID does not need to be edited.
	Known Control ID	The ID of the HTML control that is sent to the generic permitting system or permitting system integration. Mappings in the generic permitting system configuration are based on the Known Control ID. Try to keep this under 10 characters.
	Default Value	Value displayed on the form if no value is assigned.
	Placeholder	The text that populates the background of the form text box when no value is present in the text box. An example of this may be “Enter your email” for an email text box form element.
	Required	Assigns the field as required and must be populated.
	Read-only	Assigns the field as read-only on the form.
	Disabled	Assigns the field as disabled on the form.
	Hidden	Assigns the field so it does not display on the form.
Advanced Settings	Name	The name of the HTML control which can be referenced in JavaScript. Usually a duplicate of the ID field under Basic Settings.
	CSS Class	The CSS class to change the design of the specific form control. This can also be referenced in JavaScript.
	Inline Style	The CSS for the form element that will be placed directly within the style attribute of the form control.
	Custom Attributes	The custom attributes that are added directly within the tag of the form control. For example, data-val=”12345”.
	Supplemental Project Column	The project column to map the control to for a supplemental form.
	Rows	Number or rows.
	Columns	Number of columns.
	Options Type	The option types that will be available on the control such as state and country drop downs.
	Allow User Profile Copy Text	Text to display for the checkbox to allow copying of the section data from the user profile.
	Empty Selection Label	Allows you to enter identifying text in a dropdown selection box without being a selection option. i.e. “Please select from the following states”.
Validation and Masking	Validation	How the value in the textbox should be validated.
	Validation Message	The error message that will be displayed if the text entered into the text box does not pass the specified validation. For example, “Please enter a phone number in XXX-XXX-XXXX format”.
	Max Length	The maximum length string that can be entered in the text box.
	Minimum Value	Sets the minimum number you can input into the form.
	Maximum Value	Sets the maximum number you can input into the form.
	Mask	Used to protect data that is being entered into a field.
	Prefix	The prefix if any for the field.
	Thousands Separator	The separator between thousands.
	Cents Separator	The separator between whole and fractional amounts.
	Cents Limit	The limit of fractional digits.
	Allow Negative	Determines if negative numbers are allowed.
	Allow Past Date	Determines if past date is allowed to be entered.
Help Messages	Add New Item	Adds a help message to the form attribute.
Option Values	Add New Item	Adds selection options to the form attribute.
Predefined Logic		The predefined logic section is to be used for predefined functionality that can be setup on form elements. Currently it can be used to configure the form to show additional form elements that are required form fields when a certain form element is selected. For example, the parent control may be a radio box with a label of “Is this a residential building?”. It has two radio buttons “Yes” and “No”. You can configure the child form elements so that if “Yes” is selected then the child form element (i.e. “Square footage of house”) will show and require the user to enter in additional information.
	Parent ID	The ID of the parent control that must be clicked or set to a specific value for the child controls to display. The Parent ID will be set on the child controls so when the parent control has a specific value selected, the child will show itself. Do not use the Known Control ID here. Use the ID from the ID field.
	Add New Item	The value of the parent control that must be set for the child controls to show. The value is set on the child control like the Parent ID.
Client Side Programming	Page	The JavaScript that exists for the overall form. The Page JavaScript is meant to be used for functions, variables, and any custom JavaScript that the form requires.
	Mouseover	The JavaScript to execute when the mouse rolls over the form element.
	Mouseout	The JavaScript to execute when the mouse rolls off the form element.
	Focus	The JavaScript to execute when the cursor gets focus to the form element.
	Blur	The JavaScript to execute when the cursor leaves the form element.
	Keypress	The JavaScript to execute when the cursor is in the form element and a key is pressed.
	Keydown	The JavaScript to execute when the cursor is in the form element and a key is in the down position.
	Keyup	The JavaScript to execute when the cursor is in the form element and a key is released from the down position.
	Click	The JavaScript to execute when the mouse clicks the form element.
	Change	The JavaScript to execute when the value of the form element changes.

3. Click once the settings for the fields are complete. The FormsBuilder page will display with the changes.

4. Repeat previous step for each widget added to the form.

5. Click the Preview tab on the FormsBuilder page to preview the widgets added to the form.

To clear your form at any time, click the button.

6. When the form is complete, click the button to save the form.

7. Click the button to finalize the form. A validation message will display.

8. Click to complete the form or to add more widgets to the form.

a. Single-Line Text

b. Multi-Line Text

c. Checkbox Field

d. Radio Group Field

e. Select Field

f. Section

g. Button Group

h. Map Router

i. Custom HTML Block

Tips and Tricks

It’s important to know that All Content Blocks are created by Avolve development. Content Blocks for the most part are for the framework of Portal and not the forms. FormsBuilder provides all needed fields used to build a form.

Required Applicant

All forms require an applicant so that a project can be created in ProjectDox.

Known Control ID

The KnownControlID must be uniquely renamed. The default naming convention (i.e. ctrl12345) is a unique ID. If you set all the IDs and names to “ctrl” it will cause problems. Best practice is to not change the ID or name of the control unless you have a reason to and limit the character count to around ten characters.

Predefined Logic

The Predefined Logic attribute can be used to make a text field display next to or below a checkbox once it is selected. You can provide an ID for the other checkbox and the text field will display only when the checkbox is selected. Make sure to use the ID attribute field name and not the Known Control ID field name when assigning.

Signature Section

All forms will share the same signature box. If the application has a fee associated with it, use the "FeePaymentAcknowlegementCheck" content block for the checkbox. If there is no payment type associated with the form, use the "SignatureAcknowlegementCheck" content block. The signature section will display in the OAS preview but not the FormsBuilder preview. These sections are customizable in the Content Block section of OAS.

Section Header (optional)

The optional text displays in all headers if there are no fields required for that section. If you want to remove the (optional) in the section header, consider adding a required field. If you use a dropdown list, you can have an initial state of no value and they need to specify "Yes" or "No".

Saving Form Code

It is a good habit to save your form content code in Notepad after the end of every update. Sometimes anomalies occur, and it is always good practice to save your work outside of the system by Navigating to the Manage Application Forms page, selecting Show/Hide Form Code on the Form Content Section, selecting the form code and pasting into Notepad.