Creating Layouts

Overview

This example explains how to create a custom layout to define the various components that load on a page. 

Creating the Layout

This example creates a component named "my-layout", which will render a custom view named "my-view".

./custom/clients/base/layouts/my-layout/my-layout.php

<?php
    $viewdefs['base']['layout']['my-layout'] = array(
        'type' => 'simple',
        'components' => array(
            array(
                'view' => 'my-view',
            ),
        ),
    );

Creating a View

The view component will render the actual content we want to see on the page. The view below will display a clickable cube icon that will spin when clicked by the user.

./custom/clients/base/views/my-view/my-view.js

({
    className: 'my-view tcenter',
    cubeOptions: {
        spin: false
    },
    events: {
        'click .sugar-cube': 'spinCube'
    },
    spinCube: function() {
        this.cubeOptions.spin = !this.cubeOptions.spin;
        this.render();
    }
})

./custom/clients/base/views/my-view/my-view.hbs

<style>
    div.my-view
    {
        padding-top: 5%;
    }
    div.my-view .sugar-cube
    {
        fill:#bbbbbb;
        height:200px;
        width:200px;
        display: inline;
    }

</style>

<h1>My View</h1>

{{{subFieldTemplate 'sugar-cube' 'detail' cubeOptions}}}

<p>Click to spin the cube!</p>

Once the files are in place, navigate to Admin > Repair and perform a Quick Repair and Rebuild.

Navigating to the Layout

To see this new layout and view, navigate to http://{site url}/#<module>/layout/my-layout.