phpFox 4 Developer Document
Page tree
Skip to end of metadata
Go to start of metadata

Form Builder

The Form Builder feature allows us to create any new form via API. Ideally, the API responds the form structure in JSON format and the Native Mobile App will render the native UI element then.
Check out the following tutorial to get an overview on how to implement form: Tutorial 3: Add new Create Button and connect to create a new post Form

 Some common use cases of Form:

  • Create or Edit form for an item such as Blog, Event, Music...
  • Link Edit action to an Edit form

For each form, we create a class extended the GeneralForm class. This parent class already has many methods to manage the form's fields and control business rule, validation, handle submission.

Form Components

Form components are pre-defined components used for rendering Form elements and 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:

  • 'default'. Default value. Close keyboard and unfocus field after press 'return' or 'ok'
  • 'next' . Go to the next field after press 'return' or 'ok'

 

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:

  • value: (string)

    Submit value format: (string)
     

\Apps\Core_MobileApi\Api\Form\Type\TextType

The TextInput always show in 1 line

Email

Parameters:

  • value: (string)
    Submit value format: (email as string)

\Apps\Core_MobileApi\Api\Form\Type\EmailType

Device Keyboard Input type will be fixed in 'email-address'

Password

Parameters:

  • value: (string)
    Submit value format: (string)

\Apps\Core_MobileApi\Api\Form\Type\PasswordType

 

Number

Parameters:

  • value: (string)
    Submit value format: (int)

 \Apps\Core_MobileApi\Api\Form\Type\IntegerType

Device Keyboard Input type will be fixed in 'numeric'

Radio

Parameters:

  • value: (string)
  • options: (array) Each option has value and label fields

    Submit value format: (string

int) the selected value
API response example:

 

 \Apps\Core_MobileApi\Api\Form\Type\RadioType

 

PhoneNumber

Parameters:

  • value: (string)
    Submit value format: (string)

 \Apps\Core_MobileApi\Api\Form\Type\PhoneNumberType

Device Keyboard Input type will be fixed in 'phone-pad'

Privacy

 

Parameters:

  • value: (string)
    Submit value format: (int

array)

 \Apps\Core_MobileApi\Api\Form\Type\PrivacyType

Device Keyboard Input type will be fixed in 'numeric'
Sample Usage:
 \Apps\Core_MobileApi\Api\Form\Blog\BlogForm

File

Upload single file or photo

 

Parameters:

  • file_type: (string), (photo, video, file) which file type allows to upload
  • preview_url: (string) use in edit case for preview purpose
  • item_type: module id of app alias use for callback in server
  • upload_endpoint: (string) defines pre-upload URL

    Submit value format: (array)
    [ status : 'new' , temp_file : '{num}']
    Purpose of each field:
  • status: can new, change, unchanged, remove, base in this flag let us know the state of the file
  • temp_file: the temp file id was uploaded

     
     

 \Apps\Core_MobileApi\Api\Form\Type\FileType

The file upload was used in upload Photo in create form list Photo, Blog, Marketplace
The sample code in:
 \Apps\Core_MobileApi\Api\Form\Blog\BlogForm
 \Apps\Core_MobileApi\Api\Form\Event\EventForm

MultipleFile

Upload multiple files or Photos

 

Parameters:

  • file_type: (string)
  • item_type: module id of app alias use for callback in server
  • multiple: (bool)
  • min_files: (int)
  • max_files: (int)
  • current_files: (array of file with fields [id, url, default])
  • upload_endpoint: (string)

    Submit value format: (array) with format
    {'new' : [4,5,6], 'remove' : [1,2,3], 'order' : [3,2,1], 'default' : 2}
    Purpose of each flat:
  • new: List of new temp file ida that were pre-uploaded
  • remove: List of removed temp field id
  • order: The ordering of each file
  • default: the ID of file use as default

 

This field type used in a form supported multiple photo uploads
Example usage:
 \Apps\Core_MobileApi\Api\Form\Marketplace\MarketplacePhotoForm
 \Apps\Core_MobileApi\Api\Form\Photo\PhotoForm

VideoUpload

Extends from file type but limit file type to Video only

 

Parameters:

  • file_type: (string)
  • item_type: (string) module alias
  • upload_endpoint: (string)

    Submit value format: (array) with format
    [status : 'new' ,temp_file : '{num}']
     

 \Apps\Core_MobileApi\Api\Form\Type\VideoUploadType

This form field used in the Video Upload form of Video App.
Reference code:
 \Apps\Core_MobileApi\Api\Form\Video\VideoForm

Attachment

 

 
Parameters:

  • file_type: (string)
  • upload_endpoint: (string)
  • current_attachments: (array)
  • item_type: (string) module alias
  • item_id: (int) ID of the attachment is belong to
    Submit value format: (array) array of attachment IDs that were reuploaded to the site

 

Use to upload & manage attachment for an item
Reference code:
\Apps\Core_MobileApi\Api\Form\Blog\BlogForm

Price

Parameters:

  • value: (string)
    Submit value format: (string)

 \Apps\Core_MobileApi\Api\Form\Type\PriceType

Device Keyboard Input type will be fixed in numeric'

TextArea

Parameters:

  • value: (string)
    Submit value format: (string)

\Apps\Core_MobileApi\Api\Form\Type\TextareaType

The TextInput can show content in many lines

Slider

Parameters:

  • value: (string)
  • minimumValue: (int)
  • maximumValue: (int)

    Submit value format: (array)
     

 \Apps\Core_MobileApi\Api\Form\Type\SliderType

 

Checkbox

 

 \Apps\Core_MobileApi\Api\Form\Type\CheckboxType

 

Choice

Parameters:

  • value: (string)
  • options: (array)

    Submit value format: (string)
     

     

 \Apps\Core_MobileApi\Api\Form\Type\ChoiceType

 

MultiChoice

Create multi-select

Parameters:

  • value: (string)
  • options: (array)
    Submit value format: (array) array of selected option

 \Apps\Core_MobileApi\Api\Form\Type\MultiChoiceType

Sample Usage:
 \Apps\Core_MobileApi\Api\Form\User\UserRegisterForm

Date

Parameters:

  • value: (string)
    Submit value format: (string) format yyyy-mm-dd

 \Apps\Core_MobileApi\Api\Form\Type\DateType

 

Birthday

Parameters:

  • value: (string)
    Submit value format: (string) format yyyy-mm-dd

 \Apps\Core_MobileApi\Api\Form\Type\BirthdayType

Sample Usage:
\Apps\Core_MobileApi\Api\Form\User\UserRegisterForm

Time

Parameters:

  • value: (string)
    Submit value format: (string) format H:i:s

 \Apps\Core_MobileApi\Api\Form\Type\TimeType

 

DateTime

Parameters:

  • value: (string)
    Submit value format: (string) format yyyy-mm-dd H:i:s

 \Apps\Core_MobileApi\Api\Form\Type\DateTimeType

Sample Usage:
\Apps\Core_MobileApi\Api\Form\Event\EventForm

FriendPicker

Parameters:

  • value: (array)
  • api_endpoint: (string)
  • item_type: (string)
  • item_id: (int)
    Submit value format: (array) array of selected friend user IDs

 \Apps\Core_MobileApi\Api\Form\Type\FriendPickerType

Sample Usage:
\Apps\Core_MobileApi\Api\Form\Marketplace\MarketplaceInviteForm

RelationshipPicker

Similar to Friend Picker

Parameters:

  • value: (array)
  • api_endpoint: (string)
  • item_type: (string)
  • item_id: (int)
    Submit value format: (array) array of selected user IDs

 \Apps\Core_MobileApi\Api\Form\Type\RelationshipPickerType

Sample Usage:
\Apps\Core_MobileApi\Api\Form\User\EditProfileForm

Range

Parameters:

  • value: (string)
  • minimumValue: (int)
  • maximumValue: (int)

    Submit value format: (array)
     

 \Apps\Core_MobileApi\Api\Form\Type\RangeType

 

Button

Create a button

Parameters:

  • label: (string)

 \Apps\Core_MobileApi\Api\Form\Type\ButtonType

 

Submit

Create a form submit button

Parameters:

  • label: (string)

 \Apps\Core_MobileApi\Api\Form\Type\SubmitType

Sample Usage:
 \Apps\Core_MobileApi\Api\Form\Blog\BlogForm

Tags

Create an input tags field

Parameters:

  • value: (array)
    Submit value format: (array)

 \Apps\Core_MobileApi\Api\Form\Type\TagsType

Sample Usage:
 \Apps\Core_MobileApi\Api\Form\Blog\BlogForm

Url

Create a URL input field

Parameters:

  • value: (string)
  • preview_endpoint: (string)
    Submit value format: (array)

 \Apps\Core_MobileApi\Api\Form\Type\UrlType

Sample Usage:
 \Apps\Core_MobileApi\Api\Form\Blog\VideoForm

Hierarchy

Multi level selectbox

Parameters:

  • options: (array)
  • suboptions: (array)
    Submit value format: (array)

 \Apps\Core_MobileApi\Api\Form\Type\HierarchyType

Sample Usage:
 \Apps\Core_MobileApi\Api\Form\Blog\BlogForm

Hidden

Hidden field

Parameters:

  • value: (int

string)
Submit value format: (int

string)

 \Apps\Core_MobileApi\Api\Form\Type\HidenType

Sample Usage:
 \Apps\Core_MobileApi\Api\Form\Blog\BlogForm

CountryState

Build a Country state select

Parameters:

  • value: (array)
  • options: (array)
  • suboptions: (array)
    Submit value format: (array)

 \Apps\Core_MobileApi\Api\Form\Type\CountryStateType

Sample Usage:
\Apps\Core_MobileApi\Api\Form\User\EditProfileForm

 

 

 

 

 

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

 

  • No labels