Support (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.
    More From This Author
    Terry Ureche
    Developer at UpCurve Cloud