User Interface
Overview
Sugar's user interface is dependent on the client (i.e. base, mobile, or portal) being used to access the system. Clients are the various platforms that use Sugar's APIs to render the user interface. Each platform type will have a specific path for its components. While the Developer Guide mainly covers the base client type, the following sections will outline the various metadata locations.
Clients
Clients are the various platforms that access and use Sidecar to render content. Depending on the platform you are using, the layout, view, and metadata will be driven based on its client type. The following sections describe the client types.
base
The base client is the Sugar application that you use to access your data from a web browser. The framework's specific views, layouts, and fields are rendered using Sidecar. Files specific to this client type can be found in the following directories:
./clients/base/./custom/clients/base/./modules/<module>/clients/base/./custom/modules/<module>/clients/base/
mobile
The mobile client is the SugarCRM mobile application that you use to access data from your mobile device. The framework-specific views, layouts, and fields for this application are found in the following directories:
./clients/mobile/./custom/clients/mobile/./modules/<module>/clients/mobile/./custom/modules/<module>/clients/mobile/
portal
The portal client is the customer self-service portal application that comes with Sugar Enterprise and Sugar Ultimate. The framework-specific views, layouts, and fields for this application are found in the following directories:
./clients/portal/./custom/clients/portal/./modules/<module>/clients/portal/./custom/modules/<module>/clients/portal/
Topics
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.
The Backbone events module is a lightweight pub-sub pattern that gets mixed into each Backbone class (Model, View, Collection, Router, etc.). This means that you can listen to or dispatch custom named events from any Backbone object.
Routes determine where users are directed based on patterns in the URL.
The Handlebars library, located in ./sidecar/lib/handlebars/, is a JavaScript library that lets Sugar create semantic templates. Handlebars help render content for layouts, views, and fields for Sidecar. Using Handlebars, you can make modifications to the display of content such as adding HTML or CSS.
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.
Views are component plugins that render data from a context. View components may contain field components and are typically made up of a controller JavaScript file (.js) and at least one Handlebars template (.hbs).
Fields are component plugins that render and format field values. They are made up of a controller JavaScript file (.js) and at least one Handlebars template (.hbt). For more information regarding the data handling of a field, please refer the data framework fields documentation. For information on creating custom field types, please refer the Creating Custom Field Types cookbook example.
For Sidecar, Sugar's subpanel layouts have been modified to work as simplified metadata. This page is an overview of the metadata framework for subpanels.
Dashlets are special view-component plugins that render data from a context and make use of the Dashlet plugin. They are typically made up of a controller JavaScript file (.js) and at least one Handlebars template (.hbs).
The drawer layout widget, located in ./clients/base/layouts/drawer/, is used to display a window of additional content to the user. This window can then be closed to display the content the user was previously viewing.
The alert view widget, located in ./clients/base/views/alert/, displays helpful information such as loading messages, notices, and confirmation messages to the user.
The language library, located in ./sidecar/src/core/language.js, is used to manage the user's display language as well as fetch labels and lists. For more information on customizing languages, please visit the language framework documentation.
Sugar's Main navigation is split into two components: Top-Header and Sidebar. The Top-Header is primarily used for search, notifications, and user actions and the Sidebar is the primary tool used to navigate the front end of the Sugar application.
Administration links are the shortcut URLs found on the Administration page in the Sugar application. Developers can create additional administration links using the extension framework.
The legacy MVC Architecture.