SugarCRM SupportDocumentationSugar DeveloperSugar Developer Guide 7.7User Interface

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 the Enterprise and Ultimate editions of Sugar. 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

    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.

  • Routes

    Routes determine where users are directed based on patterns in the URL.

  • Handlebars

    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

    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

    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 (.hbt).

  • Fields

    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 Fields documentation.

  • Dashlets

    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 (.hbt).

  • Drawers

    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.

  • Alerts

    The alert view widget, located in ./clients/base/views/alert/, displays helpful information such as loading messages, notices, and confirmation messages to the user.

  • Language

    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.

  • MegaMenu

    The MegaMenu is the navigation bar located at the top of every Sugar page. It is the primary tool used to navigate the front end of the Sugar Application.

  • Administration Links

    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.

  • Legacy MVC

    The legacy MVC Architecture.

Last modified: 03/16/2016 07:16pm

Back to top Contents