mirror of
https://github.com/silverstripe/silverstripe-framework
synced 2024-09-06 09:41:36 +02:00
6888901468
* First cut * Temporarily disable composer.json for netlify build * POC * New recursive directory query, various refinements * Fix flexbox * new styled components plugin * Apply frontmatter delimiters * Mobile styles, animation * Search * Redesign, clean up * Nuke the cache, try again * fix file casing * Remove production env file * ID headers * Move app to new repo * Add frontmatter universally * Hide children changelogs * Add how to title * New callout tags * Revert inline code block change * Replace note callouts * Fix icons * Repalce images * Fix icon * Fix image links * Use proper SQL icon
68 lines
1.9 KiB
Markdown
68 lines
1.9 KiB
Markdown
---
|
|
title: Tabbed Forms
|
|
summary: Find out how CMS interfaces use jQuery UI tabs to provide nested FormFields.
|
|
---
|
|
|
|
# Tabbed Forms
|
|
|
|
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
|
|
parts of the data model.
|
|
|
|
[notice]
|
|
All interfaces within the CMS such as [ModelAdmin](api:SilverStripe\Admin\ModelAdmin) and [LeftAndMain](api:SilverStripe\Admin\LeftAndMain) use tabbed interfaces by default.
|
|
[/notice]
|
|
|
|
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).
|
|
|
|
[notice]
|
|
[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
|
|
display up to two levels of tabs in the interface.
|
|
[/notice]
|
|
|
|
## Adding a field to a tab
|
|
|
|
|
|
```php
|
|
$fields->addFieldToTab('Root.Main', new TextField(..));
|
|
```
|
|
|
|
## Removing a field from a tab
|
|
|
|
|
|
```php
|
|
$fields->removeFieldFromTab('Root.Main', 'Content');
|
|
```
|
|
|
|
## Creating a new tab
|
|
|
|
|
|
```php
|
|
$fields->addFieldToTab('Root.MyNewTab', new TextField(..));
|
|
```
|
|
|
|
## Moving a field between tabs
|
|
|
|
|
|
```php
|
|
$content = $fields->dataFieldByName('Content');
|
|
|
|
$fields->removeFieldFromTab('Root.Main', 'Content');
|
|
$fields->addFieldToTab('Root.MyContent', $content);
|
|
```
|
|
|
|
## Add multiple fields at once
|
|
|
|
|
|
```php
|
|
$fields->addFieldsToTab('Root.Content', [
|
|
TextField::create('Name'),
|
|
TextField::create('Email')
|
|
]);
|
|
```
|
|
|
|
## API Documentation
|
|
|
|
* [FormScaffolder](api:SilverStripe\Forms\FormScaffolder)
|