Silverstripe - Repeating / Reusable grouped fields

Question

I would like to implement a layout in which a column is repeated several times and can be specified as dynamic content in the CMS. However, I cannot find an object type that would fit for this. Do I have to specify the input fields individually for each column?

private static $db = [
    'Intro_Headline' => 'Varchar',
    'Intro_Subheadline' => 'Varchar',
    'Intro_Text' => 'HTMLText',
    'Intro_Headline2' => 'Varchar',
    'Intro_Subheadline2' => 'Varchar',
    'Intro_Text2' => 'HTMLText',
    ...
];

--

$fields = parent::getCMSFields();

//Intro Field 1
$fields->addFieldToTab('Root.Intro', TextField::create('Intro_Headline', 'Headline'), 'Content');
$fields->addFieldtoTab('Root.Intro', TextField::create('Intro_Subheadline', 'Subheadline'), 'Content');
$fields->addFieldToTab('Root.Intro', HTMLEditorField::create('Intro_Text', 'Text'), 'Content');

//Intro Field 2
$fields->addFieldToTab('Root.Intro', TextField::create('Intro_Headline2', 'Headline'), 'Content');
$fields->addFieldtoTab('Root.Intro', TextField::create('Intro_Subheadline2', 'Subheadline'), 'Content');
$fields->addFieldToTab('Root.Intro', HTMLEditorField::create('Intro_Text2', 'Text'), 'Content');

...

Or can someone tell me which field type I can't find?

Update: Now I have a $has_many variable in addition to my $db variable in my page-model:

private static $has_many = [
    'Intro_Columns' => IntroColumn::class,
];

In the getCMSFields() function I add them like this:

$fields->addFieldToTab('Root.Columns', GridField::create('Intro_Columns', 'Columns', IntroColumn::get()), 'Content');

And my data object looks like this:

class IntroColumn extends DataObject
{
    private static $db = [
        'img_url' => 'Text',
        'headline' => 'Varchar',
        'subheadline' => 'Varchar',
        'text' => 'Text',
        'link' => 'Text'
    ];
}

But the fields are not yet displayed in the CMS. How do I output the data fields from a data object?

Answer 1

For things to be repeatable, you will have to put them into a different object, and then link multiple of those objects to your current object/page.

1. GridFIeld
   The default way of doing this in SilverStripe 4 is using the built in Database Relation ($has_many or $many_many instead of $db) and GridField` as the form field.

   I'd recommend you go through this tutorial: https://docs.silverstripe.org/en/4/developer_guides/model/relations/
   In paticular the section about $has_many will apply to your usecase. (Example where 1 Team has multiple Players or 1 Company multiple People)

   $has_many/$many_many is a very generic option and can be used for any number of possible database relation (linking Categories, Images, Pages, ...)

2. elemental module
   Another option is an officially supported module called elemental. This is very specifically built for repeatable content.
   https://github.com/silverstripe/silverstripe-elemental

3. serialized-dataobject module
   Probably not ideal for your usecase, but I maintain a module that provides an alternative to GridField, but it's more suitable for small form fields. The HTMLEditor is to large to be useful in this module.
   https://github.com/Zauberfisch/silverstripe-serialized-dataobject

PS: regardless of what way you go, I highly recommend you go through the tutorial from (1.). It's a pretty important fundamental functionality of SilverStripe.

---

EDIT: response to your updated question:

If you are using GridField, I'd recommend the following:

class Page extends SiteTree {
  private static $has_many = [
    'Intro_Columns' => IntroColumn::class,
  ];
  public function getCMSFields() {
    $fields = parent::getCMSFields();
    $fields->addFieldToTab('Root.Columns', new GridField(
      'Intro_Columns', 
      'My Columns', 
      $this->Intro_Columns(),
      new GridFieldConfig_RecordEditor()
    ), 'Content');
    return $fields;
  }
}

class IntroColumn extends DataObject {
    private static $db = [
        'headline' => 'Varchar',
        'subheadline' => 'Varchar',
        'text' => 'Text',
        'link' => 'Text'
    ];
    private static $has_one = [
      'Image' => 'Image',
    ]

    public function getCMSFields() {
      $fields = new FieldList();
      $fields->push(new TextField('headline', 'My Headline'));
      $fields->push(new TextField('subheadline', 'My Subheadline'));
      // ... and so on
      $fields->push(new UploadField('Image', 'Upload an image'));
      return $fields;
    }
}

Note that I am using $this->Intro_Columns() as the Value for the GridField and not IntroColumn::get(). Because $this->Intro_Columns() is a automatically generated Method that returns all IntroColumn objects linked to the current page. But $this->Intro_Columns() would return all IntroColumns from all Pages

In the template, you cal also access this automatically generated method:

<!-- Page.ss -->
<h1>Page Title: $Title</h1>
<div class="intro-columns">
  <% loop $Intro_Columns %>
    <div class="intro-column">
      <!-- here we are scoped into a single IntroColumn, so you can use all DB fields and methods of that object -->
      <h2>$headline <br> $subheadline</h2>
      $Image.URL <br>
      ...
    </div>
  <% end_loop %>
</div>