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
.