2014-10-19 10:32:34 +02:00
title: Tabbed Forms
summary: Find out how CMS interfaces use jQuery UI tabs to provide nested FormFields.
# Tabbed Forms
2017-07-03 03:22:12 +02:00
SilverStripe's [FormScaffolder ](api:SilverStripe\Forms\FormScaffolder ) can automatically generate [Form ](api:SilverStripe\Forms\Form ) instances for certain database models. In the
CMS and other scaffolded interfaces, it will output [TabSet ](api:SilverStripe\Forms\TabSet ) and [Tab ](api:SilverStripe\Forms\Tab ) objects and use jQuery Tabs to split
2014-10-19 10:32:34 +02:00
parts of the data model.
< div class = "notice" markdown = "1" >
2017-07-03 03:22:12 +02:00
All interfaces within the CMS such as [ModelAdmin ](api:SilverStripe\Admin\ModelAdmin ) and [LeftAndMain ](api:SilverStripe\Admin\LeftAndMain ) use tabbed interfaces by default.
2014-10-19 10:32:34 +02:00
< / div >
2017-07-03 03:22:12 +02:00
When dealing with tabbed forms, modifying the fields in the form has a few differences. Each [Tab ](api:SilverStripe\Forms\Tab ) will be given a
name, and normally they all exist under the `Root` [TabSet ](api:SilverStripe\Forms\TabSet ).
2014-10-19 10:32:34 +02:00
< div class = "notice" markdown = "1" >
2017-07-03 03:22:12 +02:00
[TabSet ](api:SilverStripe\Forms\TabSet ) instances can contain child [Tab ](api:SilverStripe\Forms\Tab ) and further [TabSet ](api:SilverStripe\Forms\TabSet ) instances, however the CMS UI will only
2017-08-07 02:09:39 +02:00
display up to two levels of tabs in the interface.
2014-10-19 10:32:34 +02:00
< / div >
2015-05-09 11:47:37 +02:00
## Adding a field to a tab
2014-10-19 10:32:34 +02:00
2017-08-03 02:51:32 +02:00
```php
2017-08-07 05:11:17 +02:00
$fields->addFieldToTab('Root.Main', new TextField(..));
2017-08-03 02:51:32 +02:00
```
2014-10-19 10:32:34 +02:00
## Removing a field from a tab
2017-08-03 02:51:32 +02:00
```php
2017-08-07 05:11:17 +02:00
$fields->removeFieldFromTab('Root.Main', 'Content');
2017-08-03 02:51:32 +02:00
```
2014-10-19 10:32:34 +02:00
## Creating a new tab
2017-08-03 02:51:32 +02:00
```php
2017-08-07 05:11:17 +02:00
$fields->addFieldToTab('Root.MyNewTab', new TextField(..));
2017-08-03 02:51:32 +02:00
```
2014-10-19 10:32:34 +02:00
## Moving a field between tabs
2017-08-03 02:51:32 +02:00
```php
2017-08-07 05:11:17 +02:00
$content = $fields->dataFieldByName('Content');
2014-10-19 10:32:34 +02:00
2017-08-07 05:11:17 +02:00
$fields->removeFieldFromTab('Root.Main', 'Content');
$fields->addFieldToTab('Root.MyContent', $content);
2017-08-03 02:51:32 +02:00
```
2014-10-19 10:32:34 +02:00
## Add multiple fields at once
2017-08-03 02:51:32 +02:00
```php
2017-08-07 05:11:17 +02:00
$fields->addFieldsToTab('Root.Content', [
TextField::create('Name'),
TextField::create('Email')
]);
2017-08-03 05:35:09 +02:00
2017-08-03 02:51:32 +02:00
```
2014-10-19 10:32:34 +02:00
## API Documentation
2017-07-03 03:22:12 +02:00
* [FormScaffolder ](api:SilverStripe\Forms\FormScaffolder )