Let the platform do the work

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.

rest/v11/doc_PagesFiles/3ba9fa8f-b78d-402a-9d35-550287326851/file/uploadfile?force_download=0&platform=base

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:

rest/v11/doc_PagesFiles/e4799a73-fee7-2d0f-0999-550287530a6a/file/uploadfile?force_download=0&platform=base

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:

Behavior URL Format
Route the user to the list layout for a module http://{site url}/#<module>/
Route the user to the record layout for a specific record http://{site url}/#<module>/f82d09cb-48cd-a1fb-beae-521cf39247b5
Route the user to a custom layout for the module http://{site url}/#<module>/layout/<layout>

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.

Topics

This example explains how to create a custom layout to define the various components that load on a page. 
This page explains how to override a stock layout component. For this example, we will extend the stock record view and create a custom view named "my-record" that will be used in our record layout's override. This example involves two steps: