Creating a Bing Directions Contact tab in Sugar

by Ionut Tonita on March 3, 2013

One of Sugar’s core capabilities is openness and ease of integration. Just how easy would it be to add integration to an external resource in a custom tab in SugarCRM? We’ll test that in this tutorial, which will add a directions tab to the Contacts Detail View.  The directions tab will generate a Bing directions page taking the current SugarCRM’s user address and routing to the current viewed contact’s address details.

While it is true that you can modify just about anything in Sugar, as commercial developers of SugarCRM solutions we place special care to follow SugarCRM guidelines to ensure that our changes are upgrade safe and are deployable on SugarOnDemand instances. We will demonstrate an upgrade-safe way of including and executing java script code into the SugarCRM Contacts Detail View. The method you are most likely to find on an internet search for examples will suggest accomplishing this by overwriting the custom/modules/Contacts/views/view.detail.php.   This method has its drawbacks, and you can easily run into conflict with existing or future modifications that deal with the view detail file.

A different, safer way to do this, is to create a custom after_ui_frame logic hook.  This logic hook will load the necessary .js or .css resources and execute the initialization functions.

We start by creating the logic_hooks.php file in the custom/modules/Contacts directory, if it already exists, just add the line that deals with the after_ui_frame hook insertion:

We then create a wBingDirections.php file which contains the function that gets executed by the logic hook. Just loading and initializing the java script code won’t be enough in our case, we also need to transmit a few important arguments, namely the source and target addresses. Luckily enough we have access to both the current user and the current record in the hook function through global $current_user and $contact = $GLOBALS['app']->controller->bean.

We create something like this:

Notice we’ve composed full address values for both the user and the contact. We also need to make sure to properly encode them when passing them to the Init function as parameters.

We will need to create a Bing maps object once we’re on our Contact Detail View and for that we need a Bing  Maps API key. Go to http://www.bingmapsportal.com/ and create an account which you can use to register a basic key. In the getMap function below, replace the placeholder text your_secret_bing_api_key with your own secret Bing key.

Let’s have a look at the wBingDirections.js file:

It’s preferable that we keep our environment organized instead of littering the window object with all kinds of variables, so for that purpose I’ve chosen to create one object to deal with all the modifications we’re going to apply to the Details View.

Note that SugarCRM uses the YUI (Yahoo UserInterface) open source library prevalently across its pages. The tabbing control used in the view is one from this Yahoo library, which fortunately makes our life easier when adding a custom tab.  We create the tab by simply using new YAHOO.widget.Tab({ label: 'Bing Directions', content: barebone_html }) and then adding it to the current parent control with Contacts_detailview_tabs.addTab(map_tab). The file barebone_html contains the html structure of the new tab, meaning the map div, the itinerary div, and three radio buttons that I selected to include to select routing modes.

As for the rest of the javascript files, the functions createDirections, createRoute and createDirectionsManager are sourced from the Bing API SDK documentation with slight modifications to support the encapsulation I created and to support the different route modes.

After placing the code into a SugarCRM loadable module and uploading to your SugarCRM instance, the last step is to do a Quick Repair & Rebuild in SugarCRM. After this is completed, we should have a new “Bing Directions” tab added at the end of our Contacts Detail View.

So to recap, we integrated Bing Maps Directions with our SugarOnDemand system by using about 60 lines of mostly boiler plate php code and about 60 lines of stock Bing API Documentation copied java script code.

Not bad Sugar, not bad at all. 

Find similar articles in these categories:

PRODUCT: SugarCRM

AUDIENCE: Developers

Ionut Tonita
Director of Development at UpCurve Cloud
More From This Author »