silverstripe LeftAndMain 3. The Template (HelloWorldLeftAndMain_Content.ss)

Example

The expected structure of this template can be a bit convoluted but it all boils down to this:

1. There are 3 sections worth noting for this guide:

   • .north
   • .center
   • .south

2. It must be wrapped entirely within an element that has the data-pjax-fragment="Content" attribute. This is so the AJAX calls generated from the sidemenu, know where the "Content" is so that it may display it appropriately:

<div class="cms-content center $BaseCSSClasses" data-layout-type="border" data-pjax-fragment="Content">

</div>

I won't go into detail about template functionality, I have included comments where relevant but you shouldn't be reading this guide if you don't understand template syntax for SilverStripe

Complete Code

The only thing from below; that you should expect to come out already styled is the <% include CMSBreadcrumbs %> everything else you must cater for yourself in the CSS file that was included earlier

<div class="cms-content center $BaseCSSClasses" data-layout-type="border" data-pjax-fragment="Content">
    <%-- This will add the breadcrumb that you see on every other menu item --%>
    <div class="cms-content-header north">
        <div class="cms-content-header-info">
            <% include CMSBreadcrumbs %>
        </div>
    </div>
    
    <div class="center">
        <%-- Our function in HelloWorldLeftAndMain.php --%>
        $Hello('USER');
        <%-- ^ outputs "Hello USER" --%>
    </div>

    <div class='south'>
        Some footer-worthy content
    </div>
</div>

Now all thats left to do is for you to /dev/build and ?flush=1 then you can check out our useless little module in the Administration Panel!