Component demo​

Purposes of the component

• Collect data;

• ​Edit objects;

• Interact with the user via online result processing.

Component Settings sections

• ​General. Settings like header, description, buttons text, etc.

• ​Fields. Configuring inputs for form fields.

• ​Result. On-line submission processing.

General form settings

• ​API-endpoint. That defines the fields available for writing.

• Form title;

• Form description;

• Submit button text (Submit by default);

• Re-submit button text (Submit again by default);

• Labels or placeholders. Switches the view of inputs—field names can be displayed above the field or as a placeholder;

• Form max width in pixels.

Fields settings

Each field (available for writing—POST-requesting in API-endpoint) has a specific data type. You can find configure the form input field, according to the field type.

string

General text data. For example, name

• Include into form (true by default)

• Required field (false by default)

• ​Hidden field (false by default)

• Show as a text area (false by default)

  • Text area rows (4 by default)

• Show as a Markdown text (false by default)

• Set default value (false by default)

• Add description (false by default)

number

Integer number (positive or negative). For example, age

• Include into form (true by default)

• Required field (false by default)

• Only positive numbers (false by default)

• Add units name (false by default)

• Set default value (false by default)

• Add description (false by default)

decimal

Decimal number. For example, height

• Include into form (true by default)

• Required field (false by default)

• Add units name (false by default)

• Set default value (false by default)

• Add description (false by default)

boolean

Yes/No (True/False). For example: Is valid?

• Include into form (true by default)

• Required field (false by default)

• True label (Yes by default)

• False label (No by default)

• Add description (false by default)

email

Field with email format verification

• Include into form (true by default)

• Required field (false by default)

• Set default value (false by default)

• Add description (false by default)

json

This is complex data entity, such as ranges, multiple questionaries, etc. For example Fields of interest

• Include into form (true by default)

• Required field (false by default)

• Display json-field as (Text input by default)

  • Text input

  • Slider (one value)

    • Unit name

    • Step

    • Min value (0 by default)

    • Max value (100by default)

    • Default value

  • Range Slider (two values)

    • Unit name

    • Step

    • Min value (0 by default)

    • Max value (100by default)

    • Left default value

    • Right default value

  • Multiple choice (checkboxes)

    • Options (several)

      • key + value

    • Add custom option (false by default)

      • Custom option label (My option by default)

      • Custom option type (String by default)

        • String

        • Textarea

        • Number

        • Decimal number

        • Email

        • Date

        • Date and time

      • Custom option placeholder (Describe your option by default)

  • One choice (radio buttons)

    • Options (several)

      • key + value

    • Add custom option (false by default)

      • Custom option label (My option by default)

      • Custom option type (String by default)

        • String

        • Textarea

        • Number

        • Decimal number

        • Email

        • Date

        • Date and time

      • Custom option placeholder (Describe your option by default)

• Add description (false by default)

date

Date or date + time. For example, birth date

• Include into form (true by default)

• Required field (false by default)

• Date format (Date and time by default)

  • Date and time

  • Date only

• Set default value (false by default)

• Add description (false by default)

link

Link to other data structure. For example, City of birth

• Include into form (true by default)

• Required field (false by default)

• Turn on quick search (true by default)

• ​Hidden field (false by default)

• Add description (false by default)

arrayLink

Multiple links to other data structure. For example, Friends

• Include into form (true by default)

• Required field (false by default)

• Turn on quick search (true by default)

• ​Hidden field (false by default)

• Add description (false by default)

file

The field is not supported in the current Form Component version.

phone

The field is not supported in the current Form Component version.

operator

The field is not supported in the current Form Component version.

* Link and arrayLink quick search option

If the option Quick search is ON (it is by default), objects from the linked structure will be displayed as options in selects (the visible name will be displayed, if there is no such, the id field will be displayed). Max quantity of options is 1000.

* Hidden fields

If you marked field as a hidden one (that is possible for string and link fields), they will be get from URL query params. That looks like (fieldOne and fieldTwo are hidden fields):

yourapp.directual.app/FormPage?fieldOne=value&fieldTwo=1984

Here we will get in the submitted object:

fieldOne = value

fieldTwo = 1984

Personalisation

You can include hidden field for User ID, which will be filled automatically if the user is logged in.

First, you need to have a field type of link to WebUser data structure available for posing in your API-endpoint.

Find section in Personalisation section in Fields settings:

The user's ID will be posted in this field automatically. If the user isn't logged in, the field will be empty.

Editing existing objects

If you want to edit existing object plus to creating new you can turn on that option in Fields settings section:

There are two ways to get id of the object to edit:

1. From query param @editObject=_id_ form URL, where_id_ is id of the object you would like to edit.

2. Use user's id as an id of object to edit. You could edit App user (WebUser) object that way. Also any other object with such an id.

Online result processing

Submitted object can be processed in sync scenario, and then the result is to be displayed to the user. There three fields of the object for interpreting the result of object processing:

• Result: success/fail. Boolean field. If the field is true, the Success block is showed. If that field is false, the error block is showed.

• Result message title. String field. The title of the result block.

• Result message text. String field. The text of the result block.