Geckoboard – Salesforce Integration

Geckoboard has an online development environment, Widget Editor that can be used for integration. Custom Widgets API is used to create custom charts and widgets for dashboards, visualizing the data on Geckoboard.

There are two ways to get data into custom widgets. We can either expose data through a HTTP endpoint that Geckoboard polls or you can push data through an API. We have used geckoboard-push library for pushing widgets updated to Geckoboard.

There are various widget types in Geckoboard which are given below:

  • Number and Secondary Stat
  • RAG Numbers only
  • RAG column and numbers
  • Text
  • Map
  • Highcharts
  • Pie Charts
  • Line Charts
  • Geck-o-meter
  • Bullet Graph
  • Funnel Graph

For displaying the Salesforce data to Geckoboard, the user needs to create an account in Geckoboard (www.geckoboard.com). After Login in the Geckoboard Account, user can find the API (Account -> API), this API allows data to be pushed to widgets.

For displaying the Salesforce data into the dashboard of Geckoboard, following points need to be followed:

1)     Configure a new custom widget on Geckoboard status to display the Salesforce data.

Add widget >> Custom Widget >> Select any Widget Type (e.g.- Number & Secondary Stat)

And configure as follows for Push API:

  • Method : Polling or Push (Choose Polling if you expose the data through an API and Use push if you want to push the data to the Geckoboard )
  • Push URL: Unique URL to push the data to this Widget
  • Widget Key: Unique key for this Widget
  • Label (Optional): Label for the widget which displayed at the top of the widget. (Max size -30 characters)
  • Select Widget Size: Select the widget of any size as per your requirement.

2)     The Push API uses JSON exclusively. XML is not supported. To push data to the widget all we need to do is a POST with the correct payload to the URL specified in the widget configuration. The payload should be in the correct format (payload format is different for different widget type).

Example 1 - The payload should be in the following format (this example is for a Number & Secondary Stat widget):

{ “item” : [ { "text" : "",
"value" : 123
},
{ "text" : "",
"value" : 238
}
] }

Use the following code in Apex Class to push the Salesforce data into the widget of Geckoboard:-

HTTPRequest req = new HTTPRequest();
req.setEndpoint(‘Push URL of Widget’);
Blob headerValue = Blob.valueOf(‘UserName of Salesforce Account’+ ‘:’ + ‘Password of Salesforce Account’);
string jsonData = ‘{“api_key”:”Geckoboard API Key”,”data”: { “item” : [ { "text" : "", "value" : 14},{ "text" : "","value" : 0}] }}’;
req.setBodyAsBlob(Blob.valueof(jsondata));
String authorizationHeader = ‘BASIC ‘ + EncodingUtil.base64Encode(headerValue);
req.setHeader(‘Authorization’, authorizationHeader);
req.setHeader(‘Content-Type’, ‘application/json’);
req.setMethod(‘POST’);
Http http = new Http();
HTTPResponse res = http.send(req);

Set the Push URL of Widget (in which Salesforce data needs to display) as the End Point in the request. Please make sure Push URL of widget should be added into Remote Site settings in the Salesforce account.

After executing the Apex Class, the widget (See below Snapshot) of dash board will display the data of Salesforce which is passed in the body of request.

Image

Example 2- Create a new widget of Widget Type as Funnel Graph in Geckoboard.The payload should be in the following format (this example is for a Funnel Graph Widget Type):

{
“type”: “reverse”,
“percentage”: “hide”,
“item”: [

{
"value": "23232",
"label": "Step 6"
},
{
"value": "12232",
"label": "Step 7"
},
{
"value": "2323",
"label": "Step 8"
}
]
}

Use the following code in Apex Class to push the Salesforce data into the widget (Funnel Graph) of Geckoboard:-

HTTPRequest req = new HTTPRequest();
req.setEndpoint(‘Push URL of Widget’);
Blob headerValue = Blob.valueOf(‘UserName of Salesforce Account’+ ‘:’ + ‘Password of Salesforce Account’);

string jsonData = ‘{“api_key”:”Geckoboard API Key”,”data”: {“type”: “reverse”,”item”:[{"value": "10","label": "Top Member"},{"value": "29", "label": "Member"},{"value": "1234","label": "Signatory"}]}}’;

req.setBodyAsBlob(Blob.valueof(jsondata));
String authorizationHeader = ‘BASIC ‘ + EncodingUtil.base64Encode(headerValue);
req.setHeader(‘Authorization’, authorizationHeader);
req.setHeader(‘Content-Type’, ‘application/json’);
req.setMethod(‘POST’);
Http http = new Http();
HTTPResponse res = http.send(req);

After executing the class, the widget will show the values (in the funnel) like given below:

image1