...
Form
...
Build forms with Form builder
Form builder Overview
Builder
The Form Builder feature of Phpfox Native app allows us to create any new form via API. Ideally, the API response responds the form structure in JSON format and the Native Mobile App will render to the native UI element for usersthen.
Check out the following tutorial to get an overview on how to implements implement 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 such as Blog, Event, Music...
- Link edit Edit action to an edit Edit form
Each For each form, we create a class extends from extended the class GeneralForm GeneralForm class. This parent class already has many methods to manage the form's fields and control business rule, validation, handle submission.
Form Components
Layout Form components are a list of pre-defined components use to render form element on mobile used for rendering Form elements and controlled by form 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
...
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: | ||
|
|
|
|
|
...