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.
Design the form layout
Yeeflow gives you the flexibility to custom the form layout the way you'd like. For example, change the background color and the width of content area etc.
Change the background color
From the left controls panel, click "Page" from the top tab bar. In the page section, you can change the background color, or add a background image for your form:
Change the content area settings
From the "Content area" section, you can change the width of the form content area, set the background and padding of contents.
Add controls to the form
Default controls
By default, there are 2 controls have already been added to the blank submission form: the Action panel control, and the Workflow history control. Those 2 controls are usually required as a standard submission form.
Action panel control contains 2 buttons for end users to submit the form or save the form as a draft. You can set the assignment of those buttons to left, center or right.
Workflow history control is used to display the approval history of the workflow. This will help end users to track the status of the approval form after submitted.
Although you can drag to change the position of those 2 controls, or remove those controls from the form, we recommend putting them at the bottom of your form. If you removed any of those control, you could find them from the left controls panel, and drag back to the form:
Pro Tip:
You can add multiple action panel or workflow history controls on the form. For example, if your form contains a lot of contents which make the form very long, you can add 2 action panel control, one on the top, and another at the bottom. This will make it easier for end users to submit the form from 2 positions.
Add header and/or footer
Include a header on the top of your form will guide users to better understand the purpose of your form.
To add a header, from the left controls panel, find the "Title" control under the General section. Drag this control to the top of your form. Change the text as the name of your form and set the text size and alignment. You can also add a line of text as the description and a divider after the header text.
You can also add some text or links at the bottom of your form as the footer.
Add form field controls
Form field controls are used to collect and display dynamic data, which can be simple input controls like Text Box, Number, Date Time, or data picker controls for users to choose users, groups, metadata or business data from data list. You can find the available field controls from the left controls panel. They are categorized to 2 groups: the basic fields and the advanced fields:
To add a field control, click on the control and drag it to the form. When adding a new filed control, a new variable will be created automatically. Each field control will associate with a variable which is the backend data actually be stored. For example, when you add a Text Box field to the form, you will find the "Associated Variable" area from the control's properties panel. The Field ID and Field Name are field_2 and text2.
If you click the "Variables" button from the top-right, you will find this associate variable with the same ID and Name from the variables list dialog.
You can change the variable's ID and Name from the variables list dialog here. Or, back to the form designer, and click the "Edit" button from the control's properties panel, and change those values from the pop-up dialog.
For example, change the Field ID to field_projectname, and the Field Name to Project Name.
Sync Lable: if this option is checked, the Title of this field will also be changed to the same value as the Field Name. Otherwise, the Title's text will not be changed. Below is how it looks like after changed:
Note
You can change the text of Title anytime. The changes of Title will not affect the Field Name and Field ID. For example, you can set the field name as "Project Name", and the Title text as "The name of this project".
Drag other field controls from the controls panel and add to the form as needed. Like adding Dropdown control with name of Category. And User control with name of Project Owner. Then 2 Date Picker control as the Start Date and End Date etc.
You can set the default value and if mandatory or not from the validation settings group.
Display controls with multiple columns
1. Set custom width of each control
By default, each control's width is set to 100%. When you add a new control to the form, it will be placed as a new row. You can select any control, from the control's properties panel, go to the Advanced tab. Then, from the Advanced group, find the Width settings item, and from the dropdown list, select "Custom" to set the width of this control with actual px value or percentage of the outside container.
2. Use Grid control to add multiple columns
Grid control is one of the content container control, which can include multiple columns and rows. You can put controls into the grid to organize the layout of the form elements.
Drag to add a Grid control to the form and place it under the Project Name control. From the Appearance group of the Grid control's properties panel, click "+" after the Columns item to add 1 more column. Then, drag the Category, Project Owner, Start Date and End Date into the Grid control one by one. You can change the number of columns any time.
Toggle off the "Display caption" under the Appearance group to hide the caption of this grid.
Other content container controls you can leverage to arrange the form elements include:
Section: A section has one or multiple columns, and each column can include multiple controls. Use section if you want to have elements been grouped with columns.
Container: The container control support flexbox with directions of display controls. You can group a serial of controls with container and set the styles, like alignment, adjustment, direction etc.
Tab: Use tab control to group controls into different tab. Users can click to switch the tab to view or edit content.
Toggle: Similar like the Tab control, use the toggle control to group controls based on the functions or purpose.
Add multiple items with Sub List
The Sub List control enables users to enter a list of data within a form. The form in which you add a Sub List is referred as the main form.
When to use this field
The Sub List control is best suited for enabling your users to enter data that has a master-detail relationship. Let us take an example of IT Asset Management (ITAM) to understand this.
Imagine that you are building an app to manage the devices - laptops, smartphones, and tablets, in your organization, and as part of it, want to capture the following for each device:
Its date of purchase
The purchase order number is was bought under
Vendor-related data like the name, email address, phone number, and address of the vendor from whom the purchase is made
Device-related data like the name, type, serial number, and price of the device
Well, accomplishing this isn't tough. You just need to create a form (say, Purchase Order Form ), and share it with your asset manager. Imagine if your form allows the asset manager to submit the purchase details of one device per entry. Then, even if your asset manager purchases multiple devices from a vendor on the same date, he/she would have to submit that many entries through the Purchase Order Form. Consequently, the records stored in the Purchase Order Form will look (in its report) as if they represent separate purchases when they are not.
A Sub List can help in this scenario. But let's first answer the question: Is a master-detail relationship present in this above scenario? Yes, it is. Here's how:
First, each devices is purchased from a vendor. This establishes that there is a relationship between a device and a vendor.
Second, does your IT manager purchase (from a vendor) one device at a time? Mostly, no.
As multiple devices may be purchased as part of the same order, the date of purchase, purchase order number and vendor-related data are the Master, with the device-related data being the Detail.
When you add a Sub List control in your form, such that it enables entering the details of devices being purchased, the following will be the benefits:
Each time a purchase is made, your asset manager will be able to enter the details of all devices in one go. (Each purchase record can have multiple devices associated with it)
Consequently, when your asset manager accesses the report, it will look as if the devices have been grouped per purchase.
Add the Sub List control to your form
As a show case about how to use the Sub List control. Let's add a Sub List called Project Plan to the form we are current designing.
Drag a Sub List control from the controls panel, then add it to your form. Change the Title text to Project Plan, and update the associated variables ID and Name to field_projectplan and Project Plan.
Next, go to the List Content group, click the Settings button of Fields area. From the pop-up dialog, click "+ Add Field" button to add 3 fields for this Sub List. Change the ID, Name and Type as below:
Field ID | Field Name | Type |
field_workitem | Work Item | Text |
field_startdate | Start Date | Date/Time |
field_enddate | End Date | Date/Time |
Click the checkbox from the first column to show all 3 fields on the form. Click "OK" button to close this dialog. You can all those 3 fields are added to the form as fields of this Sub List:
You can change each field's control type, style, and properties by clicking each field to expand the settings section. Form the control type dropdown list, change the type of control. Click the "Settings" button of the control properties item to open the control's properties settings dialog.
Save and Preview
The Yeeflow form designer will not save automatically, so please be sure to manually save your changes. You can find the "Save" button from the right of the top header.
To preview the form design, or test the functions, like the dynamic display rule, custom validation etc. find the "Preview" button from the bottom of the left controls panel. Click it to open the preview page.
Customize layout for multiple device
You can customize the layout of your from while accessing it on different devices, like PC, tablet and mobile device. The following are the steps to customize layouts:
From the form designer, click the device icon from the center of the top header to switch to different device's design view.
You can then change the style of each control to suit about the size of different device. Any control's properties with device icon can set different styles for each device, for example, you can set the Title's text size, and alignment. Change the Padding, Radius etc. based on the type of those control.