# 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 ](/doc/uitypes-displaytypes/default-uitypes.md)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
]);
```


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://uccello.gitbook.io/doc/the-basics/tab-block-and-field.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.