SugarCRM SupportDocumentationSugar DeveloperSugar Developer Guide 7.7User InterfaceSidecar

Sidecar

Overview

Sidecar is a platform that moves processing to the client side to render pages as single-page web apps. Sidecar contains a complete Model-View-Controller (MVC) framework based on the Backbone.js library.

By creating a single-page web app, server load drastically decreases while the client's performance increases because the application is sending pure JSON data in place of HTML. The JSON data, returned by the v10 API, defines the application's modules, records, and ACLs, allowing UI processing to happen on the client side and significantly reducing the amount of data to transfer. 

Architecture_BootstrapChart

 

Composition

Sidecar contains the following parts, which are briefly explained in the sections below:

Backbone.js

Backbone.js is a lightweight JavaScript framework based on MVP (model–view–presenter) application design. It allows developers to easily interact with a RESTful JSON API to fetch models and collections for use within their user interface.

For more information about Backbone.js, please refer to their documentation at Backbone.js.

Components

Everything that is renderable on the page is a component. A layout is a component that serves as a canvas for one or more views and other layouts. All pages will have at least one master layout, and that master layout can contain multiple nested layouts.

Layouts

Layouts are components that render the overall page. They define the rows, columns, and fluid layouts of content that gets delivered to the end user.

Example layouts include:

  • Rows
  • Columns
  • Bootstrap fluid layouts
  • Drawers and dropdowns

ExampleLayout_FirstImage

For more information about the various layouts, please refer to the Layouts page of this documentation.

Views

Views are components that render data from a context and may or may not include field components. Example views include not only record and list views but also widgets such as:

  • Graphs or other data visualizations
  • External data views such as Twitter, LinkedIn, or other web service integrations
  • The global header

For more information about views, please refer to the Views page of this documentation.

Fields

Fields render widgets for individual values that have been pulled from the models and also handle formatting (or stripping the formatting of) field values. Like layouts and views, fields extend Backbone views. 

For more information about the various layouts, please refer to the Fields page of this documentation.

Context

A Context is a container for the relevant data for a page, and it has three major attributes:

  • Module : The name of the module this context is based on
  • Model : The primary or selected model for this context
  • Collection : The set of models currently loaded in this context

Contexts are used to retrieve related data and to paginate through lists of data.

 

Last modified: 03/31/2016 11:19pm