Build forms with Form builder
Build forms with Form builder
Form builder Overview
The Form Builder feature of Phpfox Native app allows us to create any new form via API. Ideally, the API response the form structure in JSON format and the Native App will render to the native UI element for users.
Check out the following tutorial to get an overview on how to implements form: Tutorial 3: Add new Create Button and connect to create a new post Form
Some common use cases of Form:
- Build Create or Edit form for an item like create Blog, Event, Music...
- Link edit action to an edit form
Each form we create a class extends from the class GeneralForm to manage the form's fields and control business rule, validation, handle submission.
Form Components
Layout components are a list of pre-defined components use to render form element on mobile controlled by form API.
General parameters for all form component
Key |
Type |
Description |
Example |
|
name |
String |
The unique id of this form component in this section |
'postal_code', 'email', 'password',...... |
|
label |
String |
The label of the form component |
'Postal Code', 'Email', 'Password', 'Number', .... |
|
inline |
Bool |
Adjust the label and the form component in one line |
|
|
required |
Bool |
Show the red Asterisk (*) next to the label to remind the user to have to fill in this field |
|
|
value |
String |
Array |
The initial value is used to set into form component (common-case use in edit form) |
|
returnKeyType |
String |
Determines how the return key behavior. Currently supported:
|
|
|
placeholder |
String |
The placeholder text of the text input if this form component has related to the text input field |
|
|
description |
String |
Description of this form component. This will show under this form component |
|
Supported form field components
The current version of the Native App has supported the following components
Basic Form Field Components
Component Name |
Render on Mobile App |
Specific Parameters |
Associated class |
Description |
||
Text |
|
Parameters:
|
\Apps\Core_MobileApi\Api\Form\Type\TextType |
The TextInput always show in 1 line |
||
|
Parameters:
|
\Apps\Core_MobileApi\Api\Form\Type\EmailType |
Device Keyboard Input type will be fixed in 'email-address' |
|||
Password |
|
Parameters:
|
\Apps\Core_MobileApi\Api\Form\Type\PasswordType |
|
||
Number |
|
Parameters:
|
\Apps\Core_MobileApi\Api\Form\Type\IntegerType |
Device Keyboard Input type will be fixed in 'numeric' |
||
Radio |
|
Parameters:
|
int) the selected value |
\Apps\Core_MobileApi\Api\Form\Type\RadioType |
|
|
PhoneNumber |
|
Parameters:
|
\Apps\Core_MobileApi\Api\Form\Type\PhoneNumberType |
Device Keyboard Input type will be fixed in 'phone-pad' |
||
Privacy |
|
Parameters:
|
array) |
\Apps\Core_MobileApi\Api\Form\Type\PrivacyType |
Device Keyboard Input type will be fixed in 'numeric' |
|
File |
Upload single file or photo |
Parameters:
|
\Apps\Core_MobileApi\Api\Form\Type\FileType |
The file upload was used in upload Photo in create form list Photo, Blog, Marketplace |
||
MultipleFile |
Upload multiple files or Photos |
Parameters:
|
|
This field type used in a form supported multiple photo uploads |
||
VideoUpload |
Extends from file type but limit file type to Video only |
Parameters:
|
\Apps\Core_MobileApi\Api\Form\Type\VideoUploadType |
This form field used in the Video Upload form of Video App. |
||
Attachment |
|
|
|
Use to upload & manage attachment for an item |
||
Price |
|
Parameters:
|
\Apps\Core_MobileApi\Api\Form\Type\PriceType |
Device Keyboard Input type will be fixed in numeric' |
||
TextArea |
|
Parameters:
|
\Apps\Core_MobileApi\Api\Form\Type\TextareaType |
The TextInput can show content in many lines |
||
Slider |
|
Parameters:
|
\Apps\Core_MobileApi\Api\Form\Type\SliderType |
|
||
Checkbox |
|
|
\Apps\Core_MobileApi\Api\Form\Type\CheckboxType |
|
||
Choice |
|
Parameters:
|
\Apps\Core_MobileApi\Api\Form\Type\ChoiceType |
|
||
MultiChoice |
Create multi-select |
Parameters:
|
\Apps\Core_MobileApi\Api\Form\Type\MultiChoiceType |
Sample Usage: |
||
Date |
|
Parameters:
|
\Apps\Core_MobileApi\Api\Form\Type\DateType |
|
||
Birthday |
|
Parameters:
|
\Apps\Core_MobileApi\Api\Form\Type\BirthdayType |
Sample Usage: |
||
Time |
|
Parameters:
|
\Apps\Core_MobileApi\Api\Form\Type\TimeType |
|
||
DateTime |
|
Parameters:
|
\Apps\Core_MobileApi\Api\Form\Type\DateTimeType |
Sample Usage: |
||
FriendPicker |
|
Parameters:
|
\Apps\Core_MobileApi\Api\Form\Type\FriendPickerType |
Sample Usage: |
||
RelationshipPicker |
Similar to Friend Picker |
Parameters:
|
\Apps\Core_MobileApi\Api\Form\Type\RelationshipPickerType |
Sample Usage: |
||
Range |
|
Parameters:
|
\Apps\Core_MobileApi\Api\Form\Type\RangeType |
|
||
Button |
Create a button |
Parameters:
|
\Apps\Core_MobileApi\Api\Form\Type\ButtonType |
|
||
Submit |
Create a form submit button |
Parameters:
|
\Apps\Core_MobileApi\Api\Form\Type\SubmitType |
Sample Usage: |
||
Tags |
Create an input tags field |
Parameters:
|
\Apps\Core_MobileApi\Api\Form\Type\TagsType |
Sample Usage: |
||
Url |
Create a URL input field |
Parameters:
|
\Apps\Core_MobileApi\Api\Form\Type\UrlType |
Sample Usage: |
||
Hierarchy |
Multi level selectbox |
Parameters:
|
\Apps\Core_MobileApi\Api\Form\Type\HierarchyType |
Sample Usage: |
||
Hidden |
Hidden field |
Parameters:
|
string) |
string) |
\Apps\Core_MobileApi\Api\Form\Type\HidenType |
Sample Usage: |
CountryState |
Build a Country state select |
Parameters:
|
\Apps\Core_MobileApi\Api\Form\Type\CountryStateType |
Sample Usage: |
||
|
|
|
|
|
Some special form components
Component Name |
Image Example |
Class |
Note |
QuizQuestion |
|
\Apps\Core_MobileApi\Api\Form\Type\QuizQuestionType |
This is a special component type used in create and edit Quiz Form |
PollAnswer |
|
\Apps\Core_MobileApi\Api\Form\Type\PollAnswerType |
The special component type use as a form field in creating and edit Poll |
RelationshipPicker |
|
\Apps\Core_MobileApi\Api\Form\Type\RelationshipPickerType |
|