CRM 2011 – Creating a 3rd-Party Dashboard Widget
The “snapshot view” of Dashboards within CRM 2011 is a phenomenal feature that many organizations neglect. If in your environment people seem to disregard your dashboard needs, then this should hopefully help add some spice.
Today, we’re going to create a widget for a customizable list of stocks.[responsive][/responsive]
Although stocks may not apply to your needs specifically, I hope the concept of bringing in data from outside CRM into a dashboard widget will be something you’ll see the need for.
Preparing our Entity
To start, we’re going to use the account entity. Luckily for us, the account entity already contains an attribute for us to use called “Ticker Symbol”. (Microsoft knew I’d want something cool to blog about in 2013). So, our first step is to add this stock symbol attribute to our form so we can update any of our publicly traded accounts.[responsive][/responsive]
If you notice, the “Ticker Symbol” field includes a hyperlink. When the user double clicks the link it will take them directly into the MSN money page for the symbol, which is a pretty cool feature.
Taking this further…
Once we have added the field to the form, let’s update a few companies with their appropriate stock symbols.
Getting the Stock Symbols out of CRM
Now that our form configuration is done, let’s do a little development work. I began by building a new Solution called “Stock Widget”.[responsive][/responsive]
So far, here is what I have (the final code is available for direct download at the end of the post):[responsive][/responsive]
This is pulling our related companies and creating a URL to query the JSONP service. The window.open command (line 38) should prompt you to download a text file. You can then copy and paste the text file into a JSON formatter (e.g. http://jsonformatter.curiousconcept.com/).
A quick aside…
Notice also in this file, I’ve established paths within my web resources. This is good practice for keeping your web resources organized within your environment.
Getting the Stock Data
Now, we need to handle the stock results we’re getting back. From our previous step, we were able to get a nicely formatted JSON set of data. This step is about calling the JSONP stock service and actually do something with the results.[responsive][/responsive]
There are three changes in this step we need to make:
- Add the callback parameter (Line 24).
- Add our “processStockInfo” function (Lines 43-52).
- Replace the window.open line with an AJAX call to the JSONP stock service (Line 39).
These changes collectively convert the JSON results into a table with specific stock information.
Cleaning up the Widget
Once we have this updated inside our solution, let’s add our widget into a dashboard. Here’s what we get:[responsive][/responsive]
At this point the widget looks ugly. Let’s apply some CSS to make this look like it’s a native CRM add-on.[responsive][/responsive]
Putting it all together, we end up with the following control on our dashboard:
This post focused on creating a 3rd party widget; however, you could create your own JSONP service to display any kind of data just as easily.
All of the code can be downloaded here: https://github.com/paul-way/JCL/tree/master/Examples/Stock%20Listing
If you made it this far, I’m sure you’re well versed with knowing CRM stands for Customer Relationship Management. I’m sure you’re also familiar with the term XRM. However, instead of thinking about “eXtensible Relationship Management”, I want you to start thinking “eXtensible Relationship Mash-up”. If that’s too cheesy for you, I at least hope this little demo is a reminder that data doesn’t have to live in CRM for data to be used inside of CRM.
As always follow me on twitter (@paul_way) and let me know if you like it or hate it. Also, throw some comments out there (please make sure it’s on the blog.customereffective.com site).
I hope you enjoy!