Skip navigation
All Places > Developer > Blog > 2016 > June
As promised, slides and code from UnCon are now available.  Video editing is still being worked on but videos of UnCon general sessions will be posted as soon as they are available. My Suga colleagues really outdid themselves this year!


UnCon 2016 Slides


All the slides from each of the general and breakout sessions have been posted in the UnCon community.


This is a great opportunity to refresh your memory or review any of the presentations that you happened to have missed this year. There are 28 presentations to go through.


Use these presentations as an aide to help you present what you learned at UnCon to your own colleagues!


UnCon 2016 Code


All example code shown at UnCon is available in the UnCon Github repository in the 2016 branch.  All the example code in this repository is licensed under Apache 2.0 unless otherwise noted.


There are a ton of code examples to learn and try out for yourselves. We presented and shared at least 2X more code than last year!


SLOC for UnCon 2016 Branch (as of June 28th)



We also showed open source projects that exist in other Github repositories such as and Sidecar Debugger Tool.

Matt Marum

UnCon 2016 Recap!

Posted by Matt Marum Employee Jun 20, 2016
Thanks to everyone who attended the UnCon! It was a whirlwind for all of us but I think we have put on the best iteration of this event we have ever had.


In brief, it went so well that there is wide agreement across the company for a significantly expanded event for Sugar Developers at SugarCon next year. So we look forward to seeing you all again for SugarCon in September 2017.


This Year's Highlights


It was standing room only for our UnCon general sessions, especially for the Platform Update on Tuesday and the Architecting Successful Projects panel on Wednesday.


Some of the most popular breakout topics led by Sugar Engineers were on Sugar tools that can be leveraged for Sugar development and deployment.  These topics included the Sugar Unit Test framework, Performance Test framework, as well as our soon to be released Sugar command line interface and Mobile SDK.


Other popular breakout topics included our deep dive into Advanced Workflow, Sidecar, and our two different sessions on Elasticsearch.


[gallery ids="16087,16084,16083,16086,16085" type="rectangular"]


Example code, presentations, and recordings will be available to everyone!


The real value of UnCon is being able to get face to face with the Sugar Engineers and other Sugar Developers. It is a shame if you missed it. But take comfort, even if you did not make it you will still get access to all the UnCon presentations, example code, and video recordings for our UnCon general sessions.


All example code shown at UnCon is already available in the UnCon Github repository.


The slides for all the presentations shown at this year's UnCon will be posted in the UnCon community over the next couple of weeks.


Video recordings will be edited and then posted as soon as they are available.

There are so many possible approaches for integrating with Sugar that selecting the best one can be tricky.


When deciding to add new components into the Sugar user interface, the number of possibilities to consider is dizzying.Should I build a new component or override an existing one?Am I building a View, Layout, or custom Fields?Will a Dashlet give me enough screen real estate or will I need to create a new layout?


The goal of the Sugar Integration Building Blocks open source project is to provide sample code and most importantly the underlying design patterns that makes it easy to build best practice integrations.


Some integration use cases mean that a primary action has to be added to a Record or List view. For example, you may need to launch a wizard interface such one used with a Configure Price Quote (CPQ) solution on an Opportunity record.


A common CPQ flow would be to have a custom "Create Quote" action on an Opportunity record. This would launch an expansive Configurator wizard that, when complete, will need to push the new Quote, new Revenue Line Items, etc, back to the original Opportunity record.


The standard approach for this would be to add a button to the Record View or List View that launches a Drawer.


In order to make this design approach easier, we have added an HTML iframe drawer action as a new Building Block!  Now it is very easy to build a complete integration or proof of concept that utilizes a drawer!



Read more below to learn how it works.  It was designed in an upgrade safe way that does not interfere with any existing customizations that may exist on Record views or List views.




The Integration Flow


This building block contributes an action to the Opportunities Record layout but can be easily adapted to make a contribution to any other application screen (or Sidecar route).



Clicking the "Open Drawer" button will launch a configurable IframeDrawerLayout. This action uses our standard Drawer API.{


    layout: 'iframe-drawer',


    context: {


        model: model,


        url: "//"+model.get("id")+"&module=Opportunities",


        title: "IFrame Drawer"




}, function(){


    // ... on close callback ...





Of course, for the example we just use the service to make it easy to show what the request looks like to a downstream web application. This context can give the downstream application what it needs to appropriately configure the interface appearing in the HTML iframe.  Passing the module name and the record ID would also allow this external application to push changes back into the original Opportunity record in Sugar via the REST API.


Open drawers are placed on to the foreground, which means that when the drawer is closed by hitting the "Cancel" button that the control returns to the Opportunity record. You can still see the Opportunity at the bottom of the screenshot above. You can also close the drawer programmatically by calling the following function.



Adding the button and event handling code


It is very common for Sugar instances to have significant customizations on Record or List view controllers. So for this approach, we want to maximize our compatibility since we may not always know when such customizations exist ahead of time in a particular Sugar instance. So we have intentionally avoided overriding a Sidecar controller in this implementation.


Adding a button that triggers a Sidecar event can be accomplished entirely using a Sidecar metadata extension, such as the one below.





* Copyright 2016 SugarCRM Inc.  Licensed by SugarCRM under the Apache 2.0 license.




//Insert our custom button definition into existing Record View Buttons array for Opportunities module






        'name' => 'custom_button',


        'type' => 'button',


        'label' => 'Open Drawer',


        'css_class' => 'btn-primary',


        //Set target object for Sidecar Event.


        //By default, button events are triggered on current Context but can optionally set target to 'view' or 'layout'


        //'target' => 'context'


        'events' => array(


            // custom Sidecar Event to trigger on click.  Event name can be anything you want.


            'click' => 'button:open_drawer:click',








We then add the following JavaScript code into the Sugar page using a JSGroupings extension.





     * Copyright 2016 SugarCRM Inc.  Licensed by SugarCRM under the Apache 2.0 license.




    //Run callback when Sidecar metadata is fully initialized'app:sync:complete', function(){


        var openDrawerCallback = function(model){...};


        //When a record layout is loaded...


        app.router.on('route:record', function(module){


            //AND the module is Opportunities...


            if(module === 'Opportunities') {


                //AND the 'button:open_drawer:click' event occurs on the current Context


                app.controller.context.once('button:open_drawer:click', openDrawerCallback);










Our custom JavaScript waits until login and metadata sync is complete and then attaches a listener to Sidecar's Router.  This listener is used to determine when the desired layout is being displayed and add a listener to the current Context object for our button's click event.


Get the entire example in Github!

The full example is available in Github as a complete package!  For more information on how to work with these Module Loadable packages in this repository, check out the Packages README.