Element types

We have 6 different element types: label, button, field, block, record and form. Each of them have their own place in the structure with form on the top, block in the middle and label, button and field at the bottom of the tree.

A short description of the different elements and how they fit in:

Form

This is the top level element. There is only one in a form. The definition is data-elementtype="form". This should be set in the outer div for any form defined. When in form editor we add a f_fillschim class the always is min-hight the part of the view port that is usable for the editor. This mean that if you click outside any other element the form element will get the hit. When clicked without any element set for insert, the form will reset all selections. You can never insert a form element your self, this is only added when creating a new form.

Record

This is the element that defines the table to use and how to behave when loading the form. The first record is added when creating a new form. This will be the main record. Later you can add a new record. This will always be added before or after the one already in there. If none exists (you have manually deleted it) it will be added as the first element in the form element. In the gui, you will find new record as subform under Visual elements. A record can have different width from fluid (100% of the width) to container that gives it a fixed width based on the screen size and center it in that or only as part of the with by col-1 to col-12. A record is inserted as a container if not the existing record not is a column type record. Then all subsequent records will be col records as well.

Block

A block element is one that can contain others. A block are always contained in a record. There are two main types of blocks, the row type and the column. The row type will always be the outer type of a column block, but you can add as many column blocks as you want in a row block. A column block can take from 1 to 12 parts of the with. So if you add more than 12 column parts in a row it will start a new row to add the new columns.

Blocks can also be the visual container of other elements inserted in one go. This can be card,

Label

This is a element that is contained inside a block and give some visual output to the users. This can be text or images. You can edit a text label by clicking on it edit the content direct where it is.

A label can be dropped inside a column and take its place or i a row and be it's own element in the row. How it acts depend on the type, a h1 will take the row, a label will take the column and create one if none there.

Field

This is a element that is contained in a block and connected to data on the server. It can be a field alone or connected to a label element that will focus the field if clicked.

The rules for inserting a field depend on the field type and where it is dropped. A lone field can be dropped into a column and take it's place. A field with a label needs to be dropped in a row and add it's own columns.

Button

This is a element that will do a action. This can be a form action, a link or a custom command. A button will be added to any block if empty and to the start or the end of existing elements if they are there.