Skip to main content

Overview of creating dynamic input fields

info
1️⃣
Write Questions
Write questions in a simple JSON
2️⃣
When to ask
Easily configure the settings like when to ask and what would be the flow
3️⃣
Saving in database
The user answers will automatically be saved in database
4️⃣
View Mode
The saved answers are optimized for costs, view mode maps answers back to questions JSON to display nicely
5️⃣
Edit Mode
All questions are displayed in a list, user can select a question to edit
6️⃣
Search Mode
If a dating profile is created using dynamic fields, what questions to display while searching profiles, configurable easily

A question JSON looks like this:

{
  "id": "first_name",
  "type": "InputType.Text",
  "placeholder": "Enter your first name",
  "label": "First Name",
  "icon": "Icons.text_fields",
  "editOrder": 1,
  "viewOrder": 1,
  "required": true,
  "searchable": "None",
  "isMultiSelect": false,
  "isRangeSelect": false,
  "isSearchable": false
}

For complex fields and having more control over input fields, you can define styles, source display options from a static file or from an API.

InputType.Text​

A simple text field

InputType.Age​

Displays 3 different dropdowns for easily selecting Year, Month, and Date

InputType.Radio​

Nicely displays radio buttons

InputType.Dropdown​

Displays a dropdown

InputType.Date​

Displays a date input control

InputType.Guardian​

This is an example of a custom input field. The requirement is either the Guardian's email should be there, or the user must select the checkbox saying they don't have a guardian.

InputType.Tags​

Nicely displays tags, easily set to select one or multiple

InputType.List​

Displays a list. You can set which field should show on UI and which field should be saved in the database.

"options": [
  {"name": "Yes", "value": 1},
  {"name": "No", "value": 2},
  {"name": "Maybe", "value": 3}
]

Here the display value should be name, and the value should be saved in the database. For a field like showing a countries list, you can configure it to show flag + country name on UI and save the country code in the database.

InputType.ListSearchable​

A list that will display a search field allowing users to search items in the list

InputType.ListMultiselect​

User can select multiple options

InputType.ListMultiselectSearchable​

Multi-select + searchable

InputType.NumberIncrementable​

Incrementable numbers field

InputType.GridMultiSelect​

Displays a grid, and the user can select multiple items

InputType.Timeline​

Displays data in a timeline view

InputType.Location​

Displays an input field, but when the user types, it displays options from Google API and saves longitude and latitude along with the location name.

InputType.Document​

Allows users to upload documents. You can easily configure which document types are allowed for uploading, what should be the max size per document, min/max number of documents, etc.