# 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.

{% hint style="warning" %}
Tabs links are visible only if there are at least two tabs.
{% endhint %}

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

```php
$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 | <p>The tab's icon. Uccello uses Material icons.</p><p>You can chose an icon here: <a href="https://material.io/tools/icons"><https://material.io/tools/icons></a></p> |
| **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:

```php
$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 | <p>The block's icon. Uccello uses Material icons. </p><p>You can chose an icon here: <a href="https://material.io/tools/icons"><https://material.io/tools/icons></a></p> |
| **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.                                                                                                                                                 |

{% hint style="warning" %}
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.
{% endhint %}

## 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:

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

```php
$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.                                  |

{% hint style="warning" %}
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.
{% endhint %}

### 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](https://laravel.com/docs/5.8/validation).            |              |

As each uitype is autonomous, it can use other options. To see all uitypes options, please go to the [Default Uitypes ](https://uccello.gitbook.io/doc/uitypes-displaytypes/default-uitypes)page or to the documentation of the custom uitype you are using.

### Example of settings

```php
$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
]);
```