[1] Design Form

Last modified by admin on 2023/09/18 18:02

1. Create a new form in Process Designer menu

To create a new form in Process Designer menu, users choose Form tab, then click Create New button.

image-20230312194846-1.png

A window will show up, user enter the name of form in Name (is required) and enter a brief description in Description (optional), then click OK.

image-20230312194846-2.png

2. Components of the Form in Form Designer

Components which create a form in Form Designer provide users the ability to collect user data

1695034818758-663.png

UI components are divided into 5 main groups, based on their functions:

GroupsDescriptionComponents
BasicInclude frequently used components
  • Text field
  • Text area
  • Number
  • Password
  • Checkbox
  • Select boxes
  • Select
  • Radio
  • Button
  • File download
  • File upload
AdvancedInclude personal information or date/time components
  • Email
  • URL
  • Phone number
  • Tags
  • Address
  • Date/Time
  • Day
  • Time
  • Currency
  • Survey
  • Signature
LayoutInclude elements changing form’s layout
  • HTML element
  • Content
  • Columns
  • Field set
  • Panel
  • Table
  • Tabs
  • Well
DataInclude components used to collect data
  • Hidden
  • Container
  • Data map
  • Data grid
  • Edit grid
  • Tree
PremiumInclude components used for business level
  • ReCAPTCHA
  • Resource
  • File
  • Nested form
  • Custom
OthersFile Preview 

To create an adjustable form, user drag components in the left of the page and drop them in the form designer in the the right in the order you want.

3 Configure each component in Form Designer

After choosing the needed components, a window with lots of configs will show up for you to fill in.

image-20230312194846-4.png

Then click Save when you are done.

image-20230312194846-5.png

The below table describes frequently used configure:

ConfigureDescriptionNote
DisplayShow components’ display in the form. 
DataDefault value which user can see in form. 
ValidationAuthentication request to show components on the screen. 
APIAdjust components based on “Key” and “Value. 
ConditionalPlace conditions for components. 
LogicLogic to activate conditions in the form. 
LayoutAdjust layout of the form. 

Một số thành phần tạo biểu mẫu trên Form Designer có các mục khác nhau, ví dụ như:

Other components which create form in Form Designer have various configure:

ComponentConfigureDescription
Date/TimeDateConfig available min and max options.
 TimeConfig up and down button to adjust.
DayDayConfig enter value dropdown list, or up/down button to adjust.
 MonthConfig enter value dropdown list, or up/down button to adjust.
 YearConfig enter value dropdown list, or up/down button to adjust (there are min and max options for you to choose).
Edit GridTemplatesCustomize headers and rows of grid data

4. Manage components in Form Designer

image-20230312194846-6.png

To reopen the configuration wizard, hover over the form element and select Edit.

To rearrange form components, select Move and drag components to another location within the created form.

To edit the form components by using the JSON settings, select Edit JSON. It will open the JSON component and display all available settings.

To copy a component inside the form, select Copy and then select Paste below to paste the copied component into the created form.

To remove a component from the form, select Remove.

5. Manage form in Form Designer

a. Manage list of form

image-20230312194846-7.png

To find a specific form in the list, enter the name of form in Search bar.

To copy a specific form in the list, click image-20230312194846-8.png , choose Clone, change the name of form in Name (required) and enter a brief description in Description (optional), then choose Clone.

To delete a form, clickimage-20230312194846-9.png , then choose Delete, reconfirm it in the pop-up window by choosing Delete button.

b. Manage after creating/editing a form

image-20230312195356-10.png

To delete components in the created form, choose Clear form then click OK.

To save the created form, click Save.

  
Navigation