Questions? (800) 775-8378 Contact Us

Extending App Functionality with SugarCRM Mobile’s SDK

By Terry Ureche | November 28th, 2017
Audiences: Developers

The SugarCRM Mobile SDK was showcased at this year’s SugarCon. The SDK enables customers and developers to extend Sugar's mobile app capabilities greatly. Both iOS and Android platforms are supported, and customized SugarCRM mobile apps may be distributed through the App Store, Google Play, or internal websites.

While the SugarCRM Mobile Application Configuration Service (MACS) allows users to customize the standard Sugar app’s branding, with the mobile SDK, more customizations can be made to SugarCRM Mobile, such as:

  • Custom menus
  • Custom app name and icon
  • Custom logo
  • Custom field types
  • Custom actions
  • Custom dashlets
  • Custom views
  • Plug-ins

Also of note, the SDK includes the live reload feature, which allows developers to instantly view any changes in the code reflected in the app’s UI. Future Mobile SDK enhancements include the ability to load mobile SDK extensions in MACS for more streamlined development and deployment.

SugarCRM Mobile’s Application Stack

The mobile app’s stack is a mix of Javascript frameworks and native code:

  • The Sidecar and Backbone are custom metadata-driven frameworks that provide API for object extension, URL routing, view rendering, etc.
  • Zepto will replace the Jquery for touch-based devices
  • HandleBars is the template engine
  • Cordova Plugins offer a useful set of plug-ins for SugarCRM Mobile, such as geolocation, camera access or barcode scanning
  • Cordova is a bridge between native code and Javascript
  • With the iOS and Android SDK, developers are allowed to write native code.

Creating an app with the SugarCRM Mobile SDK

Creating a mobile app with the SugarCRM Mobile SDK involves a complex process:

The SDK generates a custom app with this structure:

.gitignore
 get-sdk-path.js
 cordova
 package.json
 sdk
 build/
 config/
   app.json
   app-dev.json
   branding assets
   binary signing assets
 custom/
 native/
   platforms/
     android/
     ios/

The SDK build tools include series of line-based commands that are executed from the terminal:

  • Run a web application debug server:

./sdk debug

  • Build a native application

./sdk build [--platform ios|android|native] [--scheme debug|qa|store]

  • Generate a web bundle

./sdk bundle-web [--platform ios|android|native] [--scheme debug|qa|store]

  • Recreate native project

./sdk init-native

  • Update native project

./sdk update-native

There are many methods to extend or customize Sugar’s mobile app to your needs, such as modifying the configuration, implementing new functionality using JavaScript and Handlebars, or integrating a custom plug-in for Cordova to add native functions.

The background color of the splash screen (the application’s launch screen) or status bar can be changed from the app.json configuration file:

//…/config/app.json

    "defaults": {
        "jsConfig": {
			....
            },
            "ui": {
				...
            }
        },
        "native": {
            "ios": {
                ...
            },
            "android": {
                ...
            },
            "statusBarBackgroundColor": "#0043fc",
            "splashscreenBackgroundColor": "#ffffff"
        }
    },

The custom code must reside in the application’s custom folder. While there are no restrictions or rules on how the JavaScript file should be organized, we recommended you split the custom JavaScript code into multiple .js files and keep them organized into folders and subfolders.

Example:

custom/
 fields/
	field-one-folder
		field-one.js
	field-two-folder
		field-two.js
      …
 views/
	view-one-folder
		data-view-one.js
		data-one.hbs
	view-two-folder
		data-view-two.js
		data-two.hbs
	…
 actions/
	action-one-folder
		action-on.js
	…

The SDK’s API enables users to extend or completely modify the app’s standard functionality. Below, we will focus extending views using customization.extend.

Extending fields:

...
const customization = require('%app.core%/customization.js');
const TextField     = require('%app.fields%/text-field');

// Extend custom location field the base text field
let CompanyField = customization.extend(TextField, {
  
  events() {
      return {
          // Register our event
          click: '__OnTouch',
      };
  },
  
  initialize(options) {
      this._super(options);
	...
  },

  format() {
    // Override to implement custom formatting of the field value
  },
  
  __OnTouch(e) {
    // Create a custom method
  },    
});

// Register location field class as location-type field
customization.register(CompanyField, { metadataType: 'company' });

Extending views:

.......

const customization     = require('%app.core%/customization.js');
const dialog            = require('%app.core%/dialog');
const ListView          = require('%app.views%/list/list-view');

.......

// Register list item for data provider.
customization.registerListItemDataProvider({
  //The name is used in the extension of the ListView
  name: 'company-list-item',

  // Override prepareItemData for the list item
  prepareItemData(model) {

      // The items that the HBS template will receive
      return {
        // return an item model
        ...
      };
  },

  // Provied the value for "data-id" HTML attribute 
  buildId(model) {
      ...
  },

  // Converts "data-id" HTML attribute value to the ID of a model instance.
  extractId(id) {
      ...
  },
});

let CompanyList = customization.extend(ListView, {
  template: 'company-list',

  listItemDataProvider: 'company-list-item',

  listItemTpl: 'company-list-item',


  // Override "loadData" method to implement custom logic for fetching data.
  loadData(options) {
    ...
  },
})

.......

//Register the new router
customization.registerRoutes([{
  name: 'company-list',

  steps: 'company',
  handler() {
    app.controller.loadScreen(CompanyList);
  }
}])

That concludes our brief walkthrough of the SugarCRM Mobile. For more information on Sugar or its mobile app, feel free to contact us.

Slide Deck Presentation from SugarCon 2017


This post is part of our SugarCon 2017 Spotlight series. Take a look at all the articles from SugarCon 2017 here.