Monthly Archives: January 2013

18Jan

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.

image

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.

image

 

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…

I also went ahead and included an ownership attribute.  This would allow you to use some JavaScript to show or hide the ticker symbol field.  Additionally you can create a view called “Public Companies without a Stock Symbol” to help find newly created companies without stock symbols more easily.  Or you could require the ticker symbol for public companies.  That’s what I love about CRM – wicked flexibility.

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”.

image

Inside of my solution, I’m using jQuery and JCL.  I also created a listing.html web resource to get started working with.

So far, here is what I have (the final code is available for direct download at the end of the post):

image

 

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…

To query the data, we’re using Fetch.  Since I based this query off of the “My Active Companies” view, I went to the advanced find from the view and clicked “Download Fetch”.  This allowed me to mostly copy and paste this fetch into my JavaScript.  I had to add the tickersymbol filter line, but most of my work was already done for me.

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.

image

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:

image

At this point the widget looks ugly.  Let’s apply some CSS to make this look like it’s a native CRM add-on.

image

Putting it all together, we end up with the following control on our dashboard:

image

 

Going Forward

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.

I hope you enjoy!

© Copyright 2012-2014, All Rights Reserved