Microsoft Dynamics CRM Team Blog: Custom Charting Capabilities in Microsoft Dynamics CRM 2011

[Blog bot]

Источник: http://blogs.msdn.com/b/crm/archive/...-crm-2011.aspx
==============

Microsoft Dynamics CRM 2011 comes with in-built visual analytics. You can create charts to view aggregations of your CRM data over various dimensions, providing nice visual and interactive tools to analyze data. But, there is more to it.

It also provides you with some space alongside the records-grid. While this space is generally used for the built-in charts, it can potentially be used for well, anything. CRM 2011 also goes a long way in defining an extensibility story – a way to deploy your own custom pages on the server. Yes, you’ve got it right – I am referring to web resources. Would it not be great if you could get your web resource to show up alongside the grid? Well, that is precisely what we let you do.

Create your own custom chart

Let us start by creating a simple “Hello World” page, and making it show up alongside the Accounts grid.

1. Open your favorite text-editor, and type in the following HTML:

Hello World Page
A 'Hello World' web resource for the Accounts grid

This is an elementary HTML page that shows a line of bold text centered horizontally as well as vertically.

2. Create an HTML Web Resource on CRM Server by uploading the above page. In case you are not familiar with web resources, you will need to do the following:

a. Navigate to Settings → Customizations. Click on Customize the System to open up the Default Solution.

b. Click on New → Web Resource on the grid tool-bar to launch the Web Resource form.

c. Upload the file created in (1) above. Give the web resource a name, say new_helloWorld.

d. Click Save.

3. Now we will create a custom chart that uses this web resource. We can do so easily by using the Import Chart feature:

a. Navigate to Accounts grid and open the chart pane.

b. Click on Import Chart in the Charts tab of the ribbon.

Here’s the XML we want to import:

account Hello World new_helloWorld

Note that the XML definition above contains a reference to the web resource created in (2).

Once the chart is successfully imported, we will see the following:



That was pretty easy, wasn’t it? But that was not a very useful chart though. Let us move on to something better.

Multiple charts sharing the same web resource

Consider a hypothetical problem. Let us say, I have accounts spread across different countries in the world and I would like to see their locations on a map beside the accounts grid. I would not want one map cluttered with all the accounts – rather I would want to focus on one country/region at a time, and see accounts located in only that country. To solve this problem, I would want to create different charts – each centering the map on a particular country (with a zoom factor according to the size of the country) and displaying only accounts from that country.

It would be possible to create multiple web resources addressing different map regions – however, that is not a very scalable solution. Creation of a web resource is generally a system customizer’s job – we would not want a system-customization for every new country/region that we would want to include.

Instead, what we will do is create a single ‘parameterized’ web resource. The web resource will contain the general logic for plotting accounts on a map – however, this logic would be driven by certain parameters which would be provided at runtime by the chart that is being rendered.

How does a web resource know which chart is being rendered?

If you have worked with web resources placed on forms/dashboards, you would be aware of the data query-string parameter. This parameter essentially lets the same web resource render differently in different contexts – you specify the value of this parameter (if required) at the time of adding the web resource to a particular form/dashboard.

For web resources rendering as charts, we do not let you explicitly specify a value for this parameter. Instead this parameter is always set to (a URL-encoded form of) the following format:

visid=&vistype=&viewid=&viewtype=

Therefore, we can get the ID and type of the chart being rendered by parsing the data query-string parameter.

Data and Presentation Descriptions of the Chart

Both System and User Charts have the following two fields.

• DataDescription: This defines the data that is to be shown in the chart.
• PresentationDescription: This defines the presentation and formatting of the chart.

For charts that use the in-built charting capabilities of CRM 2011, the values of the above fields have well-defined syntax and semantics. For our custom set of charts, we will continue using these fields to represent the data and presentation properties of the chart – however, we will define our own syntax and semantics for these fields based on our needs.

• DataDescription: The country/region whose accounts are to be shown on the map.
• PresentationDescription: This will need to convey two things: the coordinates of the center of the map, and the zoom factor. Let this be a comma-separated list of three numbers – a latitude, a longitude, and a zoom factor.

So here’s the basic idea – the web resource first figures out which chart is being rendered, then it reads the data and presentation descriptions of that chart, and parses them appropriately to extract the parameters that it needs to render the map at runtime.

Going into more detail, we will be doing the following in sequence.

• Parse the query-string to extract the value of the data parameter. Parse this value again to obtain the ID and type of the visualization being rendered.
• Retrieve DataDescription and PresentationDescription fields of the visualization using CRM oData end-point.
• Parse the PresentationDescription to obtain the values of latitude, longitude and zoom-factor. Use Bing Map APIs to load a map with these values.
• Get the country/region specified in DataDescription. Retrieve all Accounts from this country/region by making a GET request to a CRM oData URI with appropriate filters.
• Geocode each of the retrieved account locations using Bing Map APIs, and plot them on the map.

Here’s one way you may write the web resource.

Accounts on Bing Maps  

The code-snippet above uses a bunch of asynchronous callbacks – however, the basic sequence of invocation of functions is the following.

• loadMap: Handler for the body.onload event.
• loadChartFromCrm: Retrieve DataDescription and PresentationDescription of the current chart from the CRM 2011 oData end-point. Note the double-call to a function that parses a query-string.

var parameters = getParametersFromQuery(window.location.search.substring(1)); parameters = getParametersFromQuery(parameters["data"]);

[The value of the “data” parameter is essentially a query-string within a query-string.]

• getMap: Use Bing Map APIs to load a map with the center and zoom-factor specified in presentation-description.
• loadAccountsFromCrm: Retrieve account records from CRM 2011 oData end-point, filtered by the country specified in data-description.
• plotAccountLocations: Add push-pins on the map to represent each of the account records retrieved above.

Now let us go ahead and create a web resource on CRM Server with the above HTML. Let us call it new_accountsOnMap. It would now be pretty simple to create various charts using it. Let us start with Accounts in the U.S.

Import the following chart Xml:

account Account Locations in U.S. U.S. 39.8,-98.5,4 new_accountsOnMap

This is what you will see:





Similarly, the following chart Xml gives you Accounts in India.

account Account Locations in India India 21,78,4 new_accountsOnMap

Essentially, you have created your own parallel charting infrastructure for CRM 2011 that others can use to create system or user charts as appropriate. Like any other chart, such charts will automatically show up in the chart selector beside the records grid. And yes, they can also be placed on dashboards if so desired.

I have made available for you a Microsoft Dynamics CRM 2011 Managed solution containing the web resource and two system charts based on it.

Cheers!

Arko Nasipuri




Источник: http://blogs.msdn.com/b/crm/archive/...-crm-2011.aspx