Layouts

Overview

Layouts are component plugins that define the overall layout and positioning of the page. Layouts replace the previous concept of MVC views and are used system-wide to generate rows, columns, bootstrap fluid layouts, and pop-ups by wrapping and placing multiple views or nested layouts on a page.

Layout components are typically made up of a controller JavaScript file (.js) and a PHP file (.php), however, layout types vary and are not dependent on having both files.

Hierarchy Diagram

The layout components are loaded in the following manner:

Note: The Sugar application client type is "base". For more information on the various client types, please refer to the User Interface page.

Sidecar Layout Routing

Sidecar uses routing to determine where to direct the user. To route the user to a specific page in Sugar, refer to the following default URL formats:

Layout Example

The list layout, located in ./clients/base/layouts/list/, handles the layout for the list view. The sections below outline the various files that render this view.

JavaScript

The file list.js, shown below, contains the JavaScript used to place the layout content.

./clients/base/layouts/list/list.js

  /**
* Layout that places components using bootstrap fluid layout divs
* @class View.Layouts.ListLayout
* @extends View.FluidLayout
*/

({
    /**
     * Places a view's element on the page. 
     * @param {View.View} comp
     * @protected
     * @method
     */

    _placeComponent: function(comp, def) {
        var size = def.size || 12;

        // Helper to create boiler plate layout containers
        function createLayoutContainers(self) {
            // Only creates the containers once
            if (!self.$el.children()[0]) {
                comp.$el.addClass('list');
            }
        }
        createLayoutContainers(this);
        // All components of this layout will be placed within the
        // innermost container div.
        this.$el.append(comp.el);
    }
})

Layout Definition

The layout definition is contained as an array in list.php. This layout definition contains four views:

• massupdate
• massaddtolist
• recordlist
• list-bottom

./clients/base/layouts/list/list.php

  <?php

$viewdefs['base']['layout']['list'] = array(
    'components' =>
    array(
        array(
            'view' => 'massupdate',
        ),
        array(
            'view' => 'massaddtolist',
        ),
        array(
            'view' => 'recordlist',
            'primary' => true,
        ),
        array(
            'view' => 'list-bottom',
        ),
    ),
    'type' => 'simple',
    'name' => 'list',
    'span' => 12,
);

Application

For information on working with layouts, please refer to the Creating Layouts and Overriding Layouts pages for practical examples.