Extending the LeftAndMain class to create custom page in the CMS

SilverStripe 3 has a pretty nice looking admin area, but sometimes you may want to create a totally custom page within the admin area.

A good example is the 'Help' button - clicking on it brings up SilverStripes own user help page, which is fine, but it's very generic, and often not much use to site owners wanting information about how to use their own site.

So I replace the 'help' menu with my own custom help page.

Instead of writing all the code here, I've packaged up the files as a module, which you can download here.

You should see the following files/folders

> customHelp
     > code
          customHelp.php
     > css
          customHelp.css
     > templates
          customHelp.ss
     _config.php

CustomeHelp.php 

Firstly, the php file, customHelp.php. This code simply extends basic CMS class, LeftAndMain, adds a link into the menu, and tells this page to use our custom template. Simple.

<?php

class customHelp extends LeftAndMain  {
	
	static $url_segment = "customHelp";
	static $menu_title = "Site Help";	
	
	public function index() {
		return $this->renderWith('customHelp');
	}
	
	public function init() {
		parent::init();
	}	
}

customHelp.ss

Our custom template can really include anything you want. Here I have just created a couple of DIVs to link to CSS styles

<div id="CustomPageFrame">
   <div id="CustomPageFrameInner">
      <p>custom html content</p>
   </div>
</div>

customHelp.css

Our custom CSS file simple positions the custom page to the right place and allows the left menu to expand/hide and not overlap our content

#CustomPageFrame { position:absolute; top:0px; left:0px; right:0px; bottom:0px; overflow:auto }
#CustomPageFrameInner { padding:10px} 

_config.php

Finally, our _config file tell the CMS to load in our extra CSS file

<?php

LeftAndMain::require_css("customHelp/css/customHelp.css"); 

In Summary

What we've got here is a pretty quick and crude system. Here we're simply entering some html ourselves, but it is of course possible to create all sorts of other functions, load in custom jQuery to achieve almost anything.

You could use an IFRAME to bring in a page, or site built entirely outside SilverStripe (just replace the html in your custom template with <iframe id="CustomPageFrame" src="http://news.bbc.co.uk"></iframe> )

The download of this simple method is that SilverStripe loads the content into the main area of the CMS, leaving the menu on the left. However, if you go directly to the URL /admin/customHelp/ you'll just see your custom page outside of the CMS, with no menu, no stying, or no menu.

An example loading the BBC news site website into a custom CMS page