Components panel

The Components panel comprises three subsections - Layout, Add New Field, and Existing Fields.


Layout subsection


Under the Layout subsection, users can add to the webpage UI elements such as Buttons, HTML text, Separators, Tabs, Widgets, and Group Boxes.

Component Usage
Button Adding a button to the web page is basic. Just drag and drop it in the desired location. It is used for actions initiation. Select sequence of blocks to be executed in Item Properties section:
  • Before server action
  • Server action
  • After server action
HTML Text The HTML text is an element that describes some predefined text. Once it is added to the webpage, double-click on it to open the HTML editor to add the text needed. You can also add the translation of the text. It is also possible to add custom HTML markup.
Separator It helps to divide the webpage horizontally. The horizontal line will be used to separate any part of the page where the separator is placed.
Tab Creates tabbed container where other UI elements can be added. To add new tabs drag and drop Tab into the existing tab container.
Widget This is a custom element with an icon and text.
Group Box Group box is also a container to hold other UI elements. Once a group box is added to the web page, you can easily add others by clicking on the plus sign that appears when the group box is highlighted. Also, the group box can be divided into rows by clicking the double-sided arrow in the middle of the box or the down arrow that appears next to the plus sign when the box is highlighted.

Add New Field subsection



The Add New Field subsection allows users to add fields for Text input, Numbers, Yes/No, Date and time, Links, Emails, Phone numbers, Select, Tables, Card grids, Subform, Upload files and define your custom Fields.


The Text input option has several types of text fields that can be added to the webpage. Click on the right arrow next to the text to view the different fields:


  • Translatable text: This is input for one-line height text with the possibility to set and edit different language versions.

  • Non-translatable text: This is input for one-line height text (without the possibility to set and edit different language versions).

  • Multiline text: This is input for text with more than one line in height (without the possibility to set and edit different language versions).

  • Translatable multiline text: This is input for text with more than one line in height with the possibility to set and edit different language versions.

  • Rich text: This is input for multiline height text that is highly customizable. It is also possible to add custom HTML.

  • Translatable rich text: TThis is input for text with more than one line in height that is highly customizable with the possibility to set and edit different language versions. It is also possible to add custom HTML.

Note: dropping a Field option with multiple subfields on the web page editor will automatically add the first subfield under that option.



The Number option has two subfields:

  • Integer: This field holds only integer values. For example, age.

  • Decimal: This field can hold values with up to 2 decimals.

The Yes/No (Boolean) option allows users to add switches or checkboxes to the webpage.

The Date and time option allows you to add a Date, Time, and Date and time field to the webpage.

The Link option gives users the possibility to add links to the webpage. Once you drag and drop it on the webpage editor, you will make other changes in the Properties section.

The Email option is used to add an email field to the webpage. The field is added with a placeholder indicating that it is for emails. The generic placeholder can be modified or changed in the Properties section.

The Phone number option is used to add a field for phone numbers. It is also added with a generic placeholder indicating that the field is for phone numbers. This placeholder can be changed in the Properties section.

The Select option has four subfields:

  • Select: This field gets input for complex data types. The data type for this field is created when the field is added to the webpage. Here, only one instance can be selected at a time. For example, the field for sex.

  • Multiselect: This field gets input for a created or defined data type. The data type for this field is created when the field is added to the webpage. Here, more than one instance can be selected at a time. For example, the field for permissions.

  • Lookup: This field gets input for an existing data type. When creating a lookup field, the Data type is selected from existing ones.  Here, only one instance can be selected at a time.

  • Multilookup: This field gets input for an existing data type. When creating this field, the Data type is selected from existing ones. Here, more than one instance can be selected at a time.

To add a Table to your webpage, drag and drop the Table option to the page. Once this is done, the Add field window will be opened where you need to specify the name and data type of the table. This will add a field with a collection field kind with the selected data type. Columns can be added to the table by dragging and dropping fields from the Add New Field subsection.

The Lookup card grid allows you to import a Data type represented in a special Card view.

The Subform is more like a web page rendered inside a web page. The option has two subfields:
  • Subform: create and add to a web page view a new embedded data type.

  • Lookup subform: import already existing Embedded data type. Show it in the Web page view.

The Upload file option is used to upload files to the webpage. It has four subfields:

  • Any file: This field allows users to upload any file to the webpage

  • Image: For uploading only images.

  • Video: For uploading only videos.

  • YouTube video: For uploading only YouTube videos.

  • Document: For uploading only documents.

Define option has three subfields:
  • Regular: create a new field. You need to specify the name and a data type. A field will be added to the Working area in the form of a Select.

  • Collection: create a new field that will be added in the form of a table. You need to specify the name and a data type.

  • Dynamic: create a new Select field containing different data entries of different data types at once.

Existing Fields subsection



Here, you will find fields created but not yet added to the webpage. If you remove the element from the working area, it is not deleted from the data type. Still, it is now located in the Existing fields section. For every element here, you can:

  1. Attach field: the field will store the information but will not be rendered on the web page. The attached fields are used mainly in the Code Blocks.

  2. Open field type: go to the field's data type details page.

  3. Delete: completely delete a field from a data type. This operation can not be redone.

  4. Rename: rename a field.