Components

The Components section is made up of 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, Static 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 to initiate events. Select sequence of blocks to be executed in Item Properties section:
  • Before server event
  • Server event
  • After server event
Static Text The Static text is an element that describes some predefined text. Once it is added to the webpage, double-click on it to open the editor where you add the text needed. You can also add the translation of the text. It is also possible to add custom HTML using Static text.
Separator 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 existing tab container.
Widget This is custom element with 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, Links, Emails, Phone numbers, Select, Tables, Yes/No, Date and time, and Upload file.


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 multiline height text without the possibility to set and edit different language versions.

  • Translatable multiline text: This is input for multiline height text 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: This is input for a multiline text that is highly customizable with the possibility to set and edit different language versions. It is also possible to add custom HTML.

Note that 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 Link option gives users the possibility to add links to the webpage. Once you drag and drop it on the webpage editor, you will be able to 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 4 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 Yes/No (Boolean) option gives users the possibility to add switches or checkboxes to the webpage.

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

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 type of file to the webpage

  • Image: For uploading only images.

  • Video: For uploading only videos.

  • YouTube video: For uploading only YouTube videos.

  • Documents: For uploading only documents.


Existing Fields subsection


Here, you will find fields created but not yet added to the webpage. You can also create fields from this subsection by clicking the blue plus sign. Now, select the type of field you want to create (Regular, Collection, or Dynamic). They are the same options provided when creating a field in the type details page. This will open a new window for you to name the field and select the field’s data type. Once this is done, click the Create button. Note that the fields that are created here will also be added to the list of fields on the data types page.

The Properties section is mainly divided into three subsections - General, Appearance, and Advanced. There are also additional subsections like Validation and Actions when a field UI element is selected.