Embed Xcelsius inside of Salesforce.com

by Ryan Goodman

Salesforce.com Inline S-Control Analytics with Xcelsius
With the Winter 07 release, you now have the ability to assemble your own dashboards using the custom S Control, which serve as an IFRAME on any Salesforce.com page. While testing these new features last October before Dreamforce, I was able to quickly assemble a dashboard that can leverage the Salesforce.com API along with an inline S Control to extract information on the page.

The result was an embedded dashboard inside of every opportunity page that would display a visual history of the account. Though I am not sure how well it resonated because it was visually not that sexy compared to the full dashboard applications, the power of these nested dashboards for SFDC end users is extremely valuable if executed correctly.


Here is an overview of what I did.
1. Decide on a practical business case that would warrant a dashboard on every opportunity page:

In this case I wanted to embed a standard dashboard on every opportunity page that would allow the end user to visually digest the history of all other opportunities for a given account: won, lost, and pending. In addition, it was important to show the current opportunity in relation the historical view. Then the end would need to view high level details and navigate to any other historical opportunity with a single click. The underlying idea was to alleviate the mental juggling and repetitive clicking to access the same valuable information. I counted 10-15 clicks in some cases to obtain the same exact information.

2. Build a SAOP web service to pull down all opportunities and details from a specified account using the SFDC API. There is a good article on the Xcelsius Business Widgets Site outlining best practices.

3. Build a custom S control to expose the current opportunity information as variables, so they can be pushed to dashboard on-load, using Flash Variables. It is this S Control that will supply the information about the current opportunity that and will also define the Account parameter for our SOAP web service. Upon inserting the S control onto the opportunity page, I set the size to 1 pixel to hide it from the end user.
Example: Exposes the Session ID and Opportunity Name as variables.

sforceClient.setLoginUrl("https://www.salesforce.com/services/Soap/u/8.0");
sforceClient.init("{!API.Session_ID}", "{!API.Partner_Server_URL_80}", true);
sforceClient.init("{!Opportunity.Name}", "{!API.Partner_Server_URL_80}", true);

4. Build a custom S control to house the SWF file, and set the Flash Variables. You will also upload the SWF file to SFDC as part of the S Control.
Example: This example will load the SWF file, and define the Flash Variables (Param#). I also set the SWF background color to match SFDC.

‹html›
‹body›
‹object type="application/x-shockwave-flash" data="{!Scontrol.JavaArchive}" class="movie" width="100%" height="100%"›

‹param name="movie" value="{!Scontrol.JavaArchive}" /›
‹param name="bgcolor" value="F3F3EC" /›
‹PARAM NAME=FlashVars VALUE="salesforcesession={!API.Session_ID}&param1={!Opportunity.Name}&param2={!Opportunity.StageName}&param3={!Opportunity.Amount}&param4={!Opportunity.CloseDate}&param5={!Opportunity.Account}&param6={!Opportunity.Link}"›

‹img src="http://path-to/noflash.gif" width="100%" height="100%" alt="No flash installed" title="No flash installed" class="image" /›
‹/object›
‹/body›
‹/html›

5. In your Xcelsius dashboard, bind the Flash Variables based on the naming convention you used. In my case, I named them param1, param2, etc.


Hopefully, this has left you with some good ideas, of how a simple dashboard can really add value to your end users, specifically for SFDC.

I do have to give some credit to the guys at Salesforce.com, for helping me get my syntax correct for the first Inline S Control. Sorry guys, I can’t post the source files for the web service or Xcelsius file for this one. I can only help you along with how to build it.