SugarCRM gives various possibilities to extend to functionality as well as user interface. Sidecar is a library that processes the clients request either by rendering the elements on the user interface or by interacting with the server and updating the data. Sidecar is built as a Model-View-Controller (MVC) framework on top of the Backbone JavaScript library and works as a Single Page Application (SPA).
How is a sidecar built?
Having understood the concept behind sidecar, let us look at building a new one. Before we go into th details, it is important to understand the components it is made of. We will list the components and get into the details of the each of them.
Backbone JS
Backbone JS is a lightweight JavaScript framework that provides structure to the web applications with binding, Events, Collections, Models, Rest API’s. It is developed by using JQuery and Underscore JS. Below is the brief description on the components of backbone JS.
- Backbone.Router: Router identifies and calls the respective views
- Backbone.Model: Model holds the data and business logic
- Backbone.Collection: Collection contains group of Backbone Models
- Backbone.Views: View renders the data from collection or model by using templates on the UI
- Underscore Templates: Backbone by default uses underscore templating engine
Components
Components consist of fields, views and Layouts. Layouts define the structure of the page like the Views, Fields, sub-layouts to be shown on the UI by grouping them into rows and columns. Fields render the data for different values defined for the entity from the models. Views render the data from context which may or may not have the collections or model loaded.
Below is the sample structure of the page.
Context:
Context consists of the data which will be used by the page. It mainly consists of Collections, Models and Module.
How is Sidecar consumed in SugarCRM?
Source code of Sidecar is placed under the sidecar folder in the root of the SugarCRM directory. Components for the sidecar are defined in the clients folder. Below is a file structure of the clients folder.
Base is a default platform used by SugarCRM. If multiple platforms are used in SugarCRM then create a new folder with platform name under clients folder and can have the same folder structure as base. If a platform specific user is logged in to SugarCRM then platform specific code is executed and if platform specific code is not found then uses the base.
- Sidecar consumes Views, Layouts and Fields folder for rendering the elements on the UI and API folder is used to retrieve the data from the server.
- Sidecar allows the extending of the core functional views, layouts and fields at application and module level.
- Below is the hierarchy on how the components are loaded in the UI by sidecar for layouts and the same is applied for the views and fields as well.
How to Extend a sidecar component
Let us take an example on how to validate the format for the phone number in Contacts. So when a number is entered while creating the contact and saved then the validation is triggered.
To do so, the developer has to extend the createView component. The default createView component can be found at clients\base\views\create\create.js
Implementation
Create a JavaScript file in custom\modules\Contacts\clients\base\views\create\create.js and add the below code
- Extends is the attribute that inherits the parent class properties. Here properties of CreateView are inherited to the extended Contacts Create view.
- Then the validation method has to be registered on the model to trigger the validation on save.
- The same code should be written in record view to have the validation while updating the contact.
Advantages of Sidecar:
- Provide inheritance for the views at module and application level
- Ability to add plugins for the views
- Due to of its extension properties, development of plug-gable interfaces for the SugarCRM will be independent of the existing logic
- Upgrade safe for the latest releases of SugarCRM
- Load on the server will be decreased drastically as it is a SPA
Sidecar is the core of the SugarCRM and is the best extension framework to implement the business logic. The user experience will be seamless and responsive on the different devices. And increases the overall performance of the server.
Evaluating SugarCRM for your business – We can help
Reach out to us so that we can assess and plan a road-map for your CRM implementation. Let’s build a system, which you will use for years to come.
