Fake Media

Tag: GridField

  • Silverstripe 3.0 Grid Fields with Thumbnails

    Silverstripe 3 has been out for a few months now, and most the big bugs have been fixed… This tutorial describes the code required to set up a grid field to manage ‘Has Many’ relations. Eg – a staff page that lists many staff members.

    Also, we’ll add in some code that will make the table list in the CMS display a wee thumbnail of each staff member – making it much easier for CMS users to manage the content.

    Create the Staff Page

    Create StaffPage.php

    This is the page on your site that contains all the staff page. Eg, one ‘staff page’ -> ‘has many’ -> ‘staff members’

    class StaffPage extends Page
{
    public static $has_many = ['StaffMembers' => 'StaffMember'];

    public function getCMSFields()
    {
        $fields = parent::getCMSFields();

        $gridFieldConfig = GridFieldConfig_RecordEditor::create();
        $gridfield = new GridField("StaffMembers", "StaffMember", $this->StaffMembers, $gridFieldConfig);
        $fields->addFieldToTab('Root.Staff', $gridfield);
        return $fields;
    }
}

class StaffPage_Controller extends Page_Controller
{
}

    Create the Staff Member Object

    Create StaffMember.php

    class StaffMember extends DataObject
{
    public static $db = ['Name' => 'Varchar', 'Details' => 'HTMLText'];
    public static $has_one = [
        'Image' => 'Image',
        'Page'  => 'Page',
    ];
}

    This is the object that contains data about each staff member. They belong to a Staff Page

    In the code above, we simple create a DataObject, and define two feilds, a name, and a details.

    We also attach the DataObject to an image object (allowing us to add an image) and to a page – this forms the connection with the Staff page it belongs to

    At this stage, upload the files, run a dev/build and create a ‘staffPage’ in your CMS. You should be able to see a datagrid and start adding staff members and photos.

    Displaying Thumbnails in your Grid Field in the CMS

    // Summary fields
public static $summary_fields = ['Thumbnail' => 'Thumbnail', 'Name' => 'Name'];

public function getThumbnail()
{
    return $this->Image()->CMSThumbnail();
}

    However, the grid field will probably just list your items by their ID – which is a bit meaningless.

    By adding the code above into the StaffMember.php file,  we can define the fields (summary_fields) that are shown on the summary table in the CMS.

    The function getThumbnail takes the attached Image, and creates a thumbnail to use in the summary fields.

  • Silverstripe 3 Grid Field Config Options

    The grid field system in Silverstripe 3 has a number of preset config options – here’s what they do, and what they look like:

    No Config

    If we don’t add any config options, the grid field just displays a list of items…  We can’t view the record details, or edit anything though…

    $gridfield =newGridField("RegisterEvents","RegisterEvent", $this->RegisterEvents());
$fields->addFieldToTab('Root.Events', $gridfield);

    grid1

    $gridfield = new GridField(“RegisterEvents”, “RegisterEvent”, $this->RegisterEvents());
    $fields->addFieldToTab(‘Root.Events’, $gridfield);

    GridFieldConfig_RecordViewer

    $gridFieldConfig =GridFieldConfig_RecordViewer::create();
$gridfield =newGridField("RegisterEvents","RegisterEvent", $this->RegisterEvents(), $gridFieldConfig);
$fields->addFieldToTab('Root.Events', $gridfield);

     

    This option just adds in the ability to click the magnifying glass and view the details of each item – but not edit anything.

    grid2

    GridFieldConfig_RecordEditor

    $gridFieldConfig =GridFieldConfig_RecordEditor::create();
$gridfield =newGridField("RegisterEvents","RegisterEvent", $this->RegisterEvents(), $gridFieldConfig);
$fields->addFieldToTab('Root.Events', $gridfield);

     

    Now we’re starting to get something useful – a list that lets us Add, View, and Remove records…

    grid3

    GridFieldConfig_RelationEditor

    The final option is the Relation Edition set up. This adds features to work with ‘has-many’ and ‘many-many’ relationships.

    See our article about Many_Many relations for more details

    Custom Config

    Or, you can just create an empty configuration, and add the bits you need….

    $gridFieldConfig =GridFieldConfig::create()->addComponents(
newGridFieldToolbarHeader(),
newGridFieldAddNewButton('toolbar-header-right'),
newGridFieldSortableHeader(),
newGridFieldDataColumns(),
newGridFieldPaginator(15),
newGridFieldEditButton(),
newGridFieldDeleteAction(),
newGridFieldDetailForm(),newGridFieldFilterHeader(),
);