Mobile Form Builder

The Form Builder lets you create User forms, for instance a Form for entering contact information. It can be used as a simple User Form, but it is also implemented with dbExpress (SQLite),the Firebase Plugin and the JSON Api Plugin for adding CRUD functionalities (Create, Read, Update)

User Form Example

Form Data

The Field List implemented in the user Form.

Use + and - buttons to add or remove List Items.
You can also reorder the items by drag&drop within the list.

• Field Name. The Internal name for the selected field. (attribute “name” in HTML)
  

• Field Type.
  

  • Text Input: a single line text.

  • Long Text: a multi-line text (eg. Comments)

  • List: a list of value, with one selection possible.

  • Radio Buttons: a set of buttons with one possible choice.

  • Switch (checkbox): a widget with only Yes/No Possibility.

  • Range Slider: a slider with possibility to choose a value between 0 and 100.

  • File Input: a Picture or another File Type. (Firebase Plugin only)

  NOTE

  List type input can be display as a “Smart Select” and can be populated from an external Json File
  

  The accepted JSON Structure is the following:
  [ { “item": “Item 1"}, { “item": “Item2”},….]
  (With this example, you have to set the “root” property to “item”.)
  

• Label. The label displayed to the User near the field.
  

• Help Text. The help text displayed to the User below the field.
  

• Icon. An optional Icon displayed at the beginning of the line.
  

• Icon Color. Icon Color for the selected line.
  

• Data Type. Only for Text Input, you can choose the type of text the field is designed for (email, password, date….)
  

• Required. The field can’t be empty
  

• Place Holder. An Help text displayed within the field when it is empty. eg. “Enter your email"
  

• Pattern. A validation formula. You can allow only a set of values for a field. For instance, if you set the Patten to apple|banana , then the user will only be able to enter apple or banana. If you want to allow only numbers to the field, use the following pattern: [0-9]* 
  

• Error Message. The message displayed to the user if the field validation failed
  

• Read Only. The field is Read-Only
  

• Clear Button. The field has a Clear button (Text Inputs only)
  

• Hidden Field. The field is hidden
  

Exemple of Smart Select Mode

Form Workflow

When a user submit a form, by default it will send an email with all the entered fields to an administrator of the WebApp.
Since the 1.1 version, it is also possible to define an API address that will be called automatically when the user submit the form.
This API can be local (for example your own PHP code added to the project) or a remote API.
The Form data will be automatically sent to the API and can be processed by your own code.

• initialization. Select the behavior of the Form when it is loaded.
  

  Before Send. optional Java script function that is called before sending data to the server. 
  

  The function will receive 2 parameters, the Form Element object and an object containing some parameters  (headers…) that you can modify within the function: 

  

  The object received in the second parameter contains all the request parameters, the data sent to the server, an optional user-password, and the headers added to the request. You can change all of them at this step, and simply return the object at the end of the function.

  Submit Form. Select the behavior of the Form when the user select the Submit button:
  

• Form Success. you can setup here what’s happening when the Form has been succesfully sent,  and you can also set a default message to display to the user.
  

• Form Error. you can set a default message to display to the user in case of error.