One of the core concepts for building form applications in BEEKAI is composing. Form module is the first place to start your building journey.
Component Setting
Let's start with a focus on the component level. Each form will be composed of components. The following table will example each attribute and help you create your component.
General
Name
Description
Example
Type
What type of component to render for the user interface.
Label
A caption for an item in a user interface.
Name
This is the unique key to host your input data.
Placeholder
A string that provides a brief hint to the user
Tooltip
A short description to support your question.
Default value
This is the initial value
Autocomplete
It will recall previous values entered in the same input.
Options/Lists
Name
Description
Example
Label
Display label
Value
Data value to submit when that option is selected.
Validation
Name
Description
Required
If the input value is required.
Min
It defines the minimum value that is acceptable and valid
Max
It defines the maximum value that is acceptable and valid
Min length
It defines the minimum number of characters.
Max length
It defines the maximum number of characters.
Pattern
A regular expression the form control's value should match.
Validate
A custom validation logic.
Service
Name
Description
Example
Type
Different request types.
URL
The service request URL.
https://dog.ceo/api/breeds/list/all
Headers
Configure request headers.
Value path
Provide a path to retrieve object data.
Response data: { message: ['dogName'] }
Value path: message
Result: dogName
Store selected object
Enabled this option will store a separate field value with selected object data.
Display
Name
Description
Column width
Component display width on a large screen.
Field width
Field width within the column width
Visible
Custom logic to show and hide a component.
Setting
The following section explains what are the form options provided.
Name
Description
Title
To be displayed at the form header.
Description
A brief description of the form.
Stage
Set your form to the public or under development.
User interface
Watermark: remove the watermark under the form
Header Bar: show or hide the header bar
File upload: upload a logo image
Image URL: provide an image URL
Logo destination URL: click on the logo to open your business site in another tab
Tracking
Google analytic: insert your tracking ID to integrate with Google analytic
Validation Strategy
This section gives you the ability to control when to trigger the form validation.
Submit validation mode: before the user click on the submit button
Change event: each time user press their keyboard
Blur event: when the user leaves the input
Submit event: only validate when the user clicks on the submit button
Touch event: input has value and leave the input
After submit validation mode
Change event: each time user press their keyboard
Blur event: when the user leave the input
Submission
You will have the option to take action based on successful or failed submissions.
Display custom message
Successful Message: display message when submission is successful.
Successful Message: display message when submission is failed.
Redirect user: redirect the user to another site after successful submission.
Form Builder