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.
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
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 write a PHP script located on the same web server. JQuery will call this PHP script that will call the World Cup service and then will receive the data in a JSON format and will send it back to JQuery.
The code
Now let’s have a look to the code.
The PHP script that calls the service.
We manage 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 this function (that 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. We need a JSON string so this parameter is set to false.
The header has to be application/json, otherwise the script will return a text stream that JQuery will not understand.
header('Content-Type: application/json; charset=utf-8');
And a last important remark: you don’t want to put this PHP at the same level as the dashlet files. No, you don’t! Otherwise during the installation Sugar will consider this file being a part of the dashlet and will try to execute it. As it changes the HTTP header, your instance might stalled.
./worldcup14/services/worldcup14_rest.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:
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 zip 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.
