Write a dashlet that uses an external data source: the Football World Cup dashlet

Olivier Nepomiachty —  June 27, 2014 — 5 Comments

During the Sugar 7 Developer training sessions, the attendees often asked for more code samples to get up to speed writing dashlets. This blog provides a good template that could be used when writing a dashlet that will pull data from an external source.

Quick start
The dashlet is available for free on Github https://github.com/tortugacrm/sugar7_football_wc2014_dashlet
This code is published under the GPL 3 license.
For a quick installation in your Sugar 7 instance, please follow the guidances in §Installation.
The dashlet comes in English, French, German, Swedish and Russian.

Football WC14 dashlet

Introduction
This blog post is a straightforward example how to consume an external service and render the data into a dashlet. The service will be the World Cup in JSON! http://worldcup.sfg.io
This is a free REST API that returns the scores for the games played the current day or the scores for your favorite team.

JSON example:
http://worldcup.sfg.io/matches/today

Remark: if the response is empty, there is no match scheduled for the day. Please try the other call: http://worldcup.sfg.io/matches/country?fifa_code=USA

[{
    "match_number": 45,
    "location": "Arena Pernambuco",
    "datetime": "2014-06-26T13:00:00.000-03:00",
    "status": "in progress",
    "home_team": {
        "country": "USA",
        "code": "USA",
        "goals": 0
    },
    "away_team": {
        "country": "Germany",
        "code": "GER",
        "goals": 0
    },
    "winner": null,
},
ETC...

It looks like another News dashlet? Not at all! If you ever tweak the out of the box News dashlet, you probably noticed that the data source was tough to change. Why? The reason is browser security: a default behavior prevents JavaScript cross-scripting. In short, JavaScript can only call services located on the same server unless they are over https.

Assuming you start with a clone of the News dashlet, the JQuery call to the World Cup service will return a 401 error (unauthorized). How to fix this? All you have is to make the call with a PHP script located on the same web server. The best practice will be extending Sugar REST services by adding a custom endpoint. Then, your JavaScript controller will call the service that will call the external World Cup service and then will receive the data in a JSON format and will send it back to the JS controller.

The code

Edit: 30th June 12:45AM CET. blog & github had been updated. The web service call is made through a custom endpoint.

Now let’s have a look to the code.

The PHP script that calls the service. We implement two calls. The first to retrieve the games for the day, the other one to return all the games for a specific team. If the first call does not return any data, it is because no game is scheduled on that day.

You might already be familiar with the function call_service (it was already published on this blog). I added one parameter at the end that lets the user decide if he wants to receive a JSON string or the data in a structured PHP array.

And a last important remark: the name of the class and the php file has to be the same. I recommend to end this name with “Api”.

./custom/clients/base/api/WorldCup14Api.php

Now the dashlet:
1) The metadata
./worldcup14/worldcup14.php

2) The controller

./worldcup14/worldcup14.js

Easy to understand. the loadData function builds the parameters to provide to the PHP script depending the settings (shall we show today’s matches live scores or my favorite team’s scores?)
Then, this mysterious loop modifies on the fly the date value in order to be shown according to the user’s timezone, based on his settings in Sugar:

$.each(data, function (idx, obj) {
    obj.datetime = formatDateUser(obj.datetime);
});

Note these two functions:
– app.api.buildURL will build the url to call our custom web service.
– app.api.call will call our custom web service.

3) The Handlebar template
./worldcup14/worldcup14.hbs

Remark: as the JSON data do not come with item names, the loop is built on “this” (good to know).

4) The language files
./language.worldcup14/en_us.lang.php

5) And finally the manifest.php
./manifest.php

Installation

This section describes how to install the dashlet. It does not required any technical knowledge. However, please be aware that you will follow the exact steps.

1) Download the module (Zip file) from the Github repository
https://github.com/tortugacrm/sugar7_football_wc2014_dashlet
Click on the ‘Download ZIP‘ button located on the bottom right.
2) Log in your Sugar 7 instance as the admin.
3) Go to the menu located next to the profile picture on the top right. Click on ‘Admin’.
4) Scroll down to the 5th section called ‘Developer Tools’. Click on ’Module Loader’.
5) In the lower section of the page, click on the ‘Choose file’ button, select the wc14.zip archive included in the file you downloaded during step 1. Click on ‘Upload’.
6) Now the module is in the list below. Click on the install button.
7) Accept the license.
8) Wait for the browser to complete the installation. This step might take a couple of minutes, be patient. For some unknown reasons, some instances might finish the installation with a blank screen. It should not, but it’s ok. The installation is finished when your browser stops loading the page.
9) On the top bar, click on ‘Administration
10) Scroll down to the 3rd section called ‘System’. Click on ’Repair’.
11) Click on ‘Quick Repair and Rebuild
12) Wait for the browser to complete the repair. The repair is finished when your browser stops loading the page.
13) Log out
14) Clear your browser cache
15) Log in as Jim
16) Edit the Dashboard
17) Select the area where you want to see you dashlet. Click on the Plus image
18) Chose the ‘Football’ dashlet in the list. You might want to preview it clicking on the preview button (with the eye).
19) Configure the dashlet: chose to view the games for the current day or your fav team’s games
20) Save the dashboard
21) Be a happy user of the Football dashlet!

Acknowledgements
I would like to thank my colleagues: Abhijeet who found out the World Cup Json web site, Harald for reviewing the code, Alena, Anki, Evi for the translations.
Special thank to Jeff Bickart who suggested that I added a custom endpoint in order to provide the best practices in this tutorial.

Olivier Nepomiachty

Posts

Pre-Sales Engineer & Evangelist Emea working at SugarCRM. Dad, geek, ultrarunner and fan of Stream of Passion, a Dutch progressive metal band!

5 responses to Write a dashlet that uses an external data source: the Football World Cup dashlet

  1. 

    Thanks for the great article. Can you explain why you choose not to create a Sugar REST endpoint and you are using custom/clients/base/views/worldcup14/services/worldcup14_rest.php instead?

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s