How to design a submission form?

The Submission form the one for users to submit a new request. So after the form is published, the users with submission permission can fill in the information based on the fields you set in this form.

Add controls to the form

Adding a control is very easy. Just pick up the control from the left control palette, and drag it to the form. 

Configure Control Properties

Click a control from the form, the control will be displayed as selected, and you can set the properties related to this control from the left panel. Most of the controls on the form have 3 main sections on the properties panel.   

1. Basic Settings

 Set the basic information of the control. Mostly like 2 parts, the label and the field associated variable.

(1) Label - The text displayed before the control. 

(2) Associated Variable - Identify the field that's binding to this control. By default, when you add a new control to the form, we will create a related field based on the type of the control. You can edit the Field ID and Field Name by clicking the edit button. You can also click the "Reset" button to bind to another field. (For example, if you have 2 controls to bind to the same field). 

2. Appearance

Here is the place where you can set how would you like to display this control on the form.

(1) Display Title - If turn this OFF, the label you set for this control will be hidden. for the case above, the text of "Currency" will not display.

(2) Placeholder - Set some description to help users better understand what kind of values should be fill in. 

(3) Dynamic Display Rules - If you want to control when/how to display the control on the form, you can click "Create Rule" button to set the display rules. You can set multiple rules based on the conditions. You can set Hide/Show, Editable/Read-only, Color of background and font etc. 

(4) Allow Comment - Turn this ON if you want to allow users to add comments specifically for this control. Adding comments will only be available after a form is submitted. For some case, you might have a form which needs the participants to review the content and share comments. You can turn is ON to make the comments functions available.

If you turn the "Allow Comments" ON. the end users will see the chat icon after the control, and then add comments by clicking the icon. 

3. Validation

Do more validations for this control based on your business needs with the functions included in this section.

(1) Readonly - Turn is ON if you do not allow the users to edit the content of this control.

(2) Required - Turn is ON, if the users are required to fill in data to this control. Only all the required controls are filled in properly, the form are allowed to be submitted.

(3) Custom Validation - Set the custom validation rule and the custom error message. 

Set the form layouts

You can use the controls under "General" section from the left control palette. 

1. Use the Grid control to group the controls on your form

Drag the Grid control to the form. 

(1) Number of columns - Set how many columns you want to add the controls. As an example, the Section 1 from the above screenshot includes 2 columns, and the Section 2 includes 1 column. 

(2) Dynamic Display Rules - If you want to control when/how to display Grid on the form, you can click "Dynamic Display Rules" button to set the display rules. This will be the easy way to set all the controls under this Grid to show/hide.

(3) Display Title - Decide if show or hide the title of the Grid.

(4) Collapse - Turn is ON to allow users to collapse the Grid.

Use the workflow related Controls

1. Use the Applicant Info control to display the user profile info of the submitter

(1) Drag the Applicant Info control to the form.

(2) You will see all the default fields included in the control.

(3) If you want to change the display fields, you can go to here, and click the "Settings" button to add or remove the fields. You can also set your updates as the default for the Applicant Info control. Then you can use it for all the forms.  

 2. Use the Workflow history control to display the workflow tracking info

 (1) Drag to add the Workflow History control to the form.

(2) You can see the default layout of this control on the form.

(3) Set the appearance settings from here.

Other tips

1. Click the "Save"  on the top-right  to save your changes of the form.

2. Lick the "Preview" button on the top-left to preview your design at anytime.