Skip navigation
All Places > Developer > Blog > 2015 > October
2015

Global Partner Summit 2015

 

This year's SugarCRM Global Partner Summit took place over the course of 2 days last week in Cascais, Portugal.  Partner Summit is an annual opportunity for SugarCRM and our valued business partners (Resellers, Technology partners, Systems Integrators, and OEMs) to get together to share experiences and learn from each other.

 

https://twitter.com/AnkiSugarCRM/status/656387917443694592

 

Tech Track @ GPS 2015

 

A few (lucky) engineers and managers from SugarCRM Engineering team and other tech teams such as Support, Operations, Alliances, and Professional Services were on hand to run the GPS Tech Track.  Tech Track provided 2 half days worth of technical presentations and special topic breakout sessions designed specifically for Sugar Developers that work for our partners.

 

Ultimately, since our Partner Community is so diverse our goal was to create a technical event that helps align everyone on best practices for tooling, dev methodology, quality assurance, and continuous integration/DevOps.  We also included plenty of special topic breakout sessions that allowed partner developers to get deeper on topics that are interesting to them.

 

Tech Track Presentations

 

We gave several presentations focused on helping partners identify the skills they need to level up their Sugar development. We covered the full spread; tools that every developer should have installed on their laptop, walk thru of real Sugar projects completed by our internal PS organization, and everything in between.

 

We also gave partners an exclusive look at some of the back-end platform changes planned for upcoming Sugar releases. Being a Sugar Partner is sweet indeed!

 

https://twitter.com/jenny_gonsalves/status/656458651008434177/

 

Special Topic Breakout Sessions

 

No coder is happy sitting through high level presentations. So we provided plenty of different breakout topics that allowed our technical team on-site in Cascais to dive deep.  Some of the technical topics with breakouts included: Elasticsearch, Advanced Workflow (Process Author), Performance, Sugar 7 Unit Tests, and many more!

 

https://twitter.com/jenny_gonsalves/status/656470687192895488/

 

Partner access to Presentations

 

Initial feedback on the Tech Track has been very positive.  We look forward to building bigger and better events for our partner developers in the years to come!

 

The plan is to post materials presented or shown at Tech Track to the SugarCRM Partner Portal shortly.  Stay tuned!

What are Sugar Integration Building Blocks?

 

This is a new effort to create an open source library of re-usable common components that can be easily adapted by developers interested in integrating applications with Sugar 7.  This project is focused on the needs of SugarCRM ISVs and Technology partners that want to build integrations and get them listed on Sugar Exchange quickly and painlessly so they can be offered to Sugar customers.

 

This new open source project is hosted on Github at https://github.com/sugarcrm/BuildingBlocks and is accepting contributions from the Sugar Developer community.

 

Watch this project because more and more components and examples will be added in the coming months.

 

Contextual Frame Dashlet Package

 

One of the first building blocks is an easy to use iframe dashlet that passes contextual information about the current page to the iframe using URL parameters.  In the current package, the context that is passed is the record id (when there is one) and the module name.  The external endpoint can then use that context to create an appropriate UI to present in the iframe.

 

This dashlet can be easily used to create a lightweight UI integration with an external application.  It can be deployed as-is for a Proof of Concept or demonstrations or it can be easily customized for additional tailored capability.

 



 

It also happens to be a good example of a Dashlet that uses a configuration page in order to manage settings such as the base URL and the frame's height.

 



 

Out of the box, we've used httpbin.org  and the //httpbin.org/get endpoint to conveniently show you precisely what arguments get passed via the iframe as part of the request.  In this case, you can see from these details that the request came from a user viewing an Opportunity record.

 

Building the Dashlet Configuration Page

 

We will now deconstruct this dashlet a bit in order to better understand how the configuration page shown above works. Note that we have added a namespace prefix to the dashlet which is a good practice for custom packages and custom views installed into base platform to avoid name conflicts.

 

Dashlet Metadata

 

xyz_contextual-iframe.php

<?php
/**
* Copyright 2015 SugarCRM Inc.  Licensed by SugarCRM under the Apache 2.0 license.
*/
$viewdefs['base']['view']['xyz_contextual-iframe'] = array(
//Dashlet metadata
'dashlets' => array(
array(
'label' => 'LBL_XYZ_IFRAME_DASHLET_LABEL',
'description' => 'LBL_XYZ_IFRAME_DASHLET_DESCRIPTION',
'config' => array(
// Default config values
'url' => '//httpbin.org/get',
'frameHeight' => '100%',
            ),
'preview' => array(),
'filter' => array(),
        ),
    ),
//View metadata for Dashlet Config page
'config' => array(
'fields' => array(
array(
'name' => 'url',
'label' => 'LBL_XYZ_IFRAME_DASHLET_URL_LABEL',
'type' => 'text',
            ),
array(
'name' => 'frameHeight',
'label' => 'LBL_XYZ_IFRAME_DASHLET_IFRAME_HEIGHT_LABEL',
'type' => 'text',
            ),
        ),
    ),
);

 

Our dashlet metadata now contains two different sections.  One part is the Dashlet metadata and the other is the View metadata that we will specifically use for our configuration page.

 

The dashlet config array above is used to define our configuration values as well as their defaults.  This will be used to populate each dashlet's settings.  Each dashlet instance has and maintains it's own settings object that is derived from the config defined in metadata.

 

The config view metadata contains a standard Sugar fields array that will make it easier for us to define the configuration user interface.

 

Dashlet JavaScript

 

xyz_contextual-iframe.js

({
/**
     * Copyright 2015 SugarCRM Inc.  Licensed by SugarCRM under the Apache 2.0 license.
*/
    plugins: ['Dashlet'],

/**
     * Record ID that is in context
*/
    record: undefined,

/**
     * Module used
*/
    moduleName: undefined,

/**
     * Base URL for iFrame (retrieved via config)
*/
    url: undefined,

/**
     * Height for iFrame element
*/
    frameHeight: undefined,

/**
     * Overriding initDashlet to setup values needed to render our contextual dashlet
*/
initDashlet: function(view) {
var ctx = this.context;
var model = ctx.get("model");
if (!_.isEmpty(model)) {
this.record = ctx.get("model").get("id");
        }
this.moduleName = ctx.get("module");
this.url = this.settings.get("url");
this.frameHeight = this.settings.get("frameHeight");
    }

});

 

The controller here is quite straight forward.  It reads the current context and settings and sets them on the current view object as a convenience for the Handlebars template that we will use to render the iframe.

 

Multiple Dashlet Templates

 

dashlet-config.hbs

{{!--
Copyright 2015 SugarCRM Inc.  Licensed by SugarCRM under the Apache 2.0 license.
--}}
<div class="record">
{{#each dashletConfig.config.fields}}
        <div class="row-fluid panel_body">
            <div class="record-cell">
                <div class="record-label">{{str label}}</div>
{{field ../this model=../this.settings template=../this.action}}
            </div>
        </div>
{{/each}}
</div>

xyz_contextual-iframe.hbs
{{!--
Copyright 2015 SugarCRM Inc.  Licensed by SugarCRM under the Apache 2.0 license.
--}}
<iframe frameborder="0" width="100%" height="{{frameHeight}}" src="{{url}}?{{#if record}}&record={{record}}{{/if}}&{{#if moduleName}}moduleName={{moduleName}}{{/if}}"></iframe>

xyz_contextual-iframe.hbs is clearly what you would expect it to be but you may be surprised to see dashlet-config.hbs. When you define a config in your metadata then the Sugar Dashlet framework will rely on the dashlet-config that you provide for your user interface. In this case, our config template relies on Sugar 7 Record CSS and the Handlebars helper called the field helper (defined within sidecar/src/view/hbs-helpers.js) in order to build the Sidecar fields for our user interface seen above. All we need to do is pass it our fields array from the view's metadata and provide it the settings as the base model that these Sidecar fields manipulate. This pattern is handy because it allows you to create a configuration interface that is consistent with core parts of the Sugar 7 UI like the Record view, core dashlets, etc.Click here to access the code and deployable package manifest

Sugar Engineering is proud to announce the Beta release of the open source Sidecar Debugger Tools project!

 

Sidecar Debugger Tools

This project was developed as part of the recent Partner hack week where it was a crowd favorite.  Not only is this a great developer tool for debugging and building Sugar Sidecar components, it is also useful as a learning tool for understanding the components on each page and how views, fields, and layouts work together.

It is a Chrome Developer Tools extension that adds a SugarDebug tab into your Developer Tools panel.  And it's loaded with features that will help you build Sidecar components faster and make debugging issues easier!

It's easy to install!  Just follow the steps on the project README.

 

 

Features

 

Application Stream

 



 

A timeline of what is happening in the app. It shows the methods that are called and the events that are triggered. For each of them, you have access to the passed arguments and the component object.  This is great for debugging interactions between Sidecar components.

 

Structure

 



 

A hierarchical tree representing the Sugar components of the current page.  A great way to get a visual summary of the relationships between different Sidecar Layouts, Views, and Fields.

 

Render times

 



 

Allows you to measure the render duration of the different fields.  Render performance is key to a snappy Sugar user interface.

 

Generate records

 



 

An easy way to generate records in your Sugar instance for testing purposes.  Super convenient when working with a fresh Sugar database.

 

Developer Tooltips

 



 

You don't need to be restricted to working with the SugarDebug tab open when you enable the developer tooltips.  Access to loads of detailed field information is always at your fingertips!

 

Seeking More Collaborators

 

This project is open sourced under the Apache 2.0 License.  We are also actively seeking contributions from the Sugar Developer community!  The great thing about these tools is they're all written in JavaScript/HTML using Backbone.js, Handlebars, and jQuery.  Sounds familiar, right?  Any Sugar Developer should have no problems customizing these tools.

 

We welcome new Pull Requests that meet the project's contributing guidelines.  We are also tracking all bugs and feature requests using the built-in Github project issue tracker.Fork this project today!

Here is another guest post from Cédric Mourizard from Synolia, an Elite SugarCRM Partner, and long-time member of the Sugar Developer community.  Are you interested in posting on the Sugar Developer Blog?  Contact developers@sugarcrm.com with your idea.

 

Many years after a post about how to use Sugar on the DotCloud PaaS, it is time to continue with the same company and to speak a little bit about Docker.

 

Docker is one of the hottest topics in the DevOps world for the past two years and most of people in the Sugar Community probably already use Docker as their development platform. We will present a quick intro about how to start to use Docker with Sugar. You can also find many great resources for other ways to setup your Sugar development environment on the Sugar Developer Guide or from stalwart Sugar Community members like Enrico Simonetti or Jeff Bickart.

 

Quick introduction to Docker & Sugar

Docker allows you to package an application with all of its dependencies into a standardized unit for software development.https://www.docker.com/whatisdocker

 

Docker uses container technology to provide you a quick and easy way to launch an application and execution stack.

 

Sugar needs at least a web server with PHP, a database server, and an Elasticsearch server.  Following the currently recommended stack described on the Sugar Supported Platforms page, we will assume that the web server will be Apache with PHP 5.4, that the database server will be Percona Server 5.6, and that we will be using Elasticsearch 1.4.

 

The best way to set up docker on your development environment is to follow the official documentation.  For Windows and OSX users, you will need to additionally use Docker Machine as Docker only runs on Linux natively.

 

After that you also need to install Docker Compose which is a tool for launching multiple containers using a single description file usually named docker-compose.yml

 

For Windows users, docker-compose is not yet available as a native tool.  However Docker itself solves this problem!

Windows users, you can use a docker container to launch the docker-compose tool with this image: https://hub.docker.com/r/dduportal/docker-compose/

 

Our example implementation will follow this architecture:

 



Download the example files above from this Github project.

 

Step 1) Build your containers

 

Sugar needs a set of additional PHP modules to be fully functional, so we cannot just use the official docker image. We need to build our own images.  To do that we create a docker file based on the official docker image that we customize by adding additional modules and PHP configuration changes.images/php5.4-apache/Dockerfile

 

FROM php:5.4-apache

 

MAINTAINER cedric.mourizard@gmail.com

 

RUN    apt-get -qqy update \

 

    && apt-get install -y libpng12-dev libjpeg-dev \

 

    && apt-get -y install re2c libmcrypt-dev \

 

    && apt-get -y install zlib1g-dev \

 

    && apt-get -y install libssl-dev libc-client2007e-dev libkrb5-dev \

 

    && apt-get -y install libcurl4-gnutls-dev \

 

    && apt-get -y install libxml2-dev libxslt-dev \

 

    && apt-get -y install libssl-dev \

 

    && apt-get -y install libcurl4-openssl-dev

 

RUN    docker-php-ext-install bcmath \

 

    && docker-php-ext-configure gd --with-jpeg-dir=/usr/lib \

 

    && docker-php-ext-install gd \

 

    && docker-php-ext-configure imap --with-imap-ssl --with-kerberos \

 

    && docker-php-ext-install imap \

 

    && docker-php-ext-install mbstring \

 

    && docker-php-ext-install mcrypt \

 

    && docker-php-ext-install mysqli \

 

    && docker-php-ext-install pdo_mysql \

 

    && docker-php-ext-install zip

 

COPY config/crm.php.ini /usr/local/etc/php/conf.d/

 

RUN a2enmod headers expires deflate rewrite

 

EXPOSE 80

 

VOLUME ["/var/www"]

 

For Percona and Elasticsearch server, we can just use the official images.  The docker-compose.yml is used to describe our full stack.docker-compose.yml

 

web:

 

    container_name: web

 

    build: ./images/php5.4-apache

 

    ports:

 

        - 80:80

 

    links:

 

        - db

 

        - search       

 

    volumes:

 

        - /Users/cedric/sugar-docker-example/data/web:/var/www/html

 

db:

 

    container_name: db

 

    image: percona:5.6

 

    environment:

 

        - MYSQL_ROOT_PASSWORD=root

 

    ports:

 

        - 3306:3306

 

search:

 

    container_name: search

 

    image: elasticsearch:1.4

 

    ports:

 

        - 9200:9200

 

        - 9300:9300

 

We can see in this file:

  • Our 3 server applications
  • The web server has LINKS to the database server and the search server
  • Each application use a shared directory with the VOLUME setting. It allows you to keep the code visible on your computer and share it with your containers
  • All of them expose PORTS to provide an easy way to connect your tools into each piece of the stack. For example, you will be able to connect your MySQL Workbench to browse your database server.

 

Step 2) Launch the platform and install Sugar

 

Now we can launch the platform and start all containers in background.

$ docker-compose up -d

 

.

 

.

 

Starting search...

 

Starting db...

 

Starting web...

 

The first launch will take a few minutes because docker retrieves and build all necessary data to setup the platform. This only happens the first time you launch docker-compose or after you modify the stack.

 

Now that your stack is launched then you can visit your Sugar instance with your browser.  For example, http://localhost/mysugar/ or http://DOCKER_MACHINE_IP/mysugar/.  If using Docker Machine, then you can easily find your running machine's IP using the docker-machine ip <name> command.

 

During the setup process, you can change the NAME settings used in the docker-compose.yml file to whatever necessary. For example, the database host name is “db” and the Elasticsearch host name is “search”.

 

That’s it, you’re done!

 

A few more things

 

If you need to interact with the Sugar Scheduler or the Job Queue, then you will need to call cron.php manually.  So if you want to run PHP CLI scripts like cron.php, you can go inside your web container and obtain the bash prompt with this command.

$ docker exec -it web bash

 

root@xxxxx:/var/www/html# php -f PATH_TO_SUGAR/cron.php

 

Conclusion

 

Now you can start to play with docker and Sugar to:

  • Develop your Sugar customizations
  • Try the Sugar 7 unit test suite
  • Try configuring an advanced stack with multiple database servers

 

This post provided an introduction for setting up Sugar on docker. You will need to adapt these steps to your own context or development processes.

 

This Docker stack is best used as a development platform and not for production use where you need to take care of performance and security aspects which aren’t addressed in this post.