Extend SilverStripe CMS page list

SilverStripe's site tree is the core of a website. Site tree is the component which lets you to manage your pages and the order of these. But when there are a lot of pages (thousands of pages) it become cumbersome to manage pages in a tree view. And it can be slow to load too. In order to solve this SilverStripe gives you another view called list view. This silverstripe cms tutorial walks you through how we updated the list view of a site we did.

The following is a screenshot of the pages list view.

A website we did had thousands of pages in the CMS and we had to use the list view rather than the site tree. One of the major issues we had with the list view is that the pages cant be drag and drop re-ordered. Also we wanted to give more information in the rows for the user about the pages.

This is the result. The rest of the article explains how we did this.

We decorated the CMSMain controller class, which is called CMSMainExtension. To decorate the CMSMain controller 

class CMSMainExtension extends Extension {
      function updateListView(CMSForm $form){

      }
}

In the updateListView function added code to add in the "GridFieldSortableRows" component, which is an awesome module that allows drag and drop re-ordering on SilverStripe grid fields. 

The following code is added to add new components and customise the columns as needed.

class CMSMainExtension extends Extension {
     function updateListView(CMSForm $form){
     
         if($gridField = $form->Fields()->fieldByName('Page')){
             $configs = $gridField->getConfig();
             
             // update the number of items which shows up in one page
             if($paginator = $configs->getComponentByType('GridFieldPaginator'))
                 $paginator->setItemsPerPage(200);
                 
             if($columns = $configs->getComponentByType('GridFieldDataColumns')){

                 $arr = array(
                     'getTreeTitle'        => 'Title',
                     'MenuTitle'            => 'MenuTitle',
                     'LastEdited'        => 'LastEdited',
                     'getMediumText'        => 'Medium', // custom function in Page.php
                     'getIsPrivateText'    => 'Is Private' // customer function in Page.php
                 );
                 $columns->setDisplayFields($arr);
                 // define the field casting so it knows how to render the values
                 $columns->setFieldCasting(array(
                     'Created'             => 'Datetime->Ago',
                     'LastEdited'         => 'Datetime->FormatFromSettings',
                     'getTreeTitle'         => 'HTMLText',
                     'getMediumText'        => 'Varchar',
                     'getIsPrivateText'    => 'Varchar'
                 ));
             }

             $configs->addComponent(new GridFieldSortableRows('Sort'));
             $configs->addComponent($filter = new GridFieldFilterHeader());
             $filter->setThrowExceptionOnBadDataType(false);

         }
     }
 }

After this it is only to let the configs know that we need the CMSMain to be decorated by our new extension. To do this add the following in to the config.yml in the <project folder>/config/config.yml file.

CMSMain:
    extensions:
        - CMSMainExtension

All set, just to a flush all now and the site is ready to use. 

Hope this small tutorial helps you to change the views on sites with lots of pages. Enjoy!