Tab, block and field

A module consists of tabs, blocks and fields to easily classify the data.

Tab

A tab contains blocks. They are useful for segmenting information in a module that contains a large number of fields. Using the tabs, you can also create multi-step forms.

Tabs links are visible only if there are at least two tabs.

For creating a tab, add the following code into your migration file:

$tab = Tab::create([
       'label' => 'tab.detail',
       'icon' => 'info',
       'data' => null,
       'sequence' => 0,
       'module_id' => $module->id
 ]);

Attribute	Type	Description
label	string	This label will be translated thanks to the localization file.
icon	string	The tab's icon. Uccello uses Material icons. You can chose an icon here: https://material.io/tools/icons
data	array	Useful to pass some settings params.
sequence	int	The display sequence for ordering tabs.
module_id	int	The related module's id.

Block

A block contains fields. They are useful for grouping fields. For creating a block, add the following code into your migration file:

$block = Block::create([
    'label' => 'block.general',
    'icon' => 'info',
    'data' => null,
    'sequence' => 0,
    'tab_id' => $tab->id,
    'module_id' => $module->id
]);

Attribute	Type	Description
label	string	This label will be translated thanks to the language file.
icon	string	The block's icon. Uccello uses Material icons. You can chose an icon here: https://material.io/tools/icons
data	array	Useful to pass some settings params.
sequence	int	The display sequence for ordering blocks.
tab_id	int	The related tab's id.
module_id	int	The related module's id.

Even if it is possible to find the module linked to a block thanks to its related tab ($block->tab->module_id), we prefer to add an attribute module_id to improve queries performances.

Field

A field is linked to an attribute of the module's table. You can easily create several type of fields thanks to Uitypes. For creating a field, add the following code into your migration file:

Schema::create('people', function (Blueprint $table) {
    ...
    $table->string('field_name');
    ...
});

$field = Field::create([
    'name' => 'field_name',
    'uitype_id' => uitype('text')->id,
    'displaytype_id' => displaytype('everywhere')->id,
    'data' => [ 'rules' => 'required' ],
    'sequence' => 0,
    'block_id' => $block->id,
    'module_id' => $module->id
]);

Attribute	Type	Description
name	string	The field's name
uitype_id	int	The type of field.
displaytype_id	int	Useful to choose in which pages the field will be visible
data	array	Useful to pass some settings params.
sequence	int	The display sequence for ordering fields.
block_id	int	The related block's id.
module_id	int	The related module's id.

Even if it is possible to find the module linked to a field thanks to its related tab ($field->block->tab->module_id), we prefer to add an attribute module_id to improve queries performances.

Field settings

You can specify a lot of settings params into the data attribute. This params are linked to the field's uitype. However, here is the list of default settings params common to all uitypes:

Param	Description	Default
column	Name of the associated column in the module's table	Field's name
default	Default value
icon	The field's icon. Uccello uses Material icons. You can chose an icon here: https://material.io/tools/icons
label	This label will be translated thanks to the language file.	Field's name
large	Useful for displaying the field over the full width.	false
rules	Form validation rules. See the Official documentation.

As each uitype is autonomous, it can use other options. To see all uitypes options, please go to the Default Uitypes page or to the documentation of the custom uitype you are using.

Example of settings

$field = Field::create([
    'name' => 'age',
    'uitype_id' => uitype('integer')->id,
    'displaytype_id' => displaytype('everywhere')->id,
    'data' => [ 'rules' => 'required', 'label' => 'field.person_age', 'column' => 'person_age', 'min' => 18, 'max' => 99, 'step' => 1 ],
    'sequence' => 0,
    'block_id' => $block->id,
    'module_id' => $module->id
]);