{"id":4784,"date":"2017-03-17T18:36:32","date_gmt":"2017-03-17T13:06:32","guid":{"rendered":"https:\/\/www.inogic.com\/blog\/?p=4784"},"modified":"2017-03-17T18:36:32","modified_gmt":"2017-03-17T13:06:32","slug":"show-html-webresources-in-charts-within-microsoft-dynamics-365crm","status":"publish","type":"post","link":"https:\/\/www.inogic.com\/blog\/2017\/03\/show-html-webresources-in-charts-within-microsoft-dynamics-365crm\/","title":{"rendered":"Show HTML Webresources in Charts within Microsoft Dynamics 365\/CRM"},"content":{"rendered":"<p style=\"text-align: justify;\"><strong>Introduction<\/strong>:<\/p>\n<p style=\"text-align: justify;\">For a long time now, perhaps from version 2011 of Microsoft Dynamics CRM, we could design charts and these charts are displayed as a contextual pane beside the views that display the requested charts using the data currently being displayed in the View.<\/p>\n<p style=\"text-align: justify;\">It is only recently that we discovered a hidden gem, the ability to use the Chart Area and Charts to display custom web resources. And that also means we can display HTML web resources as Charts \ud83d\ude42<\/p>\n<p style=\"text-align: justify;\"><strong>How to display web resources in Charts?<\/strong><\/p>\n<p style=\"text-align: justify;\">Charts have traditionally been visualized to be graphic visualization to support Bar graphs, columns graphs, and the likes. The Chart is represented in an XML format and it is possible to export the chart XML, edit is outside of CRM and import it back. This has been used as an accepted way, especially to represent data in a specific format that is not possible through the Chart designer UI made available in CRM.<\/p>\n<p style=\"text-align: justify;\"><strong>Chart XML structure to support custom visualizations:<\/strong><\/p>\n<pre class=\"lang:default decode:true \">&lt;visualization&gt;\n  &lt;name&gt;visualization name&lt;\/name&gt;\n  &lt;description&gt;description&lt;\/description&gt;\n  &lt;webresourcename&gt;name of webresource&lt;\/webresourcename&gt;\n  &lt;primaryentitytypecode&gt;entity logical name&lt;\/primaryentitytypecode&gt;\n  &lt;isdefault&gt;true or false&lt;\/isdefault&gt;\n&lt;\/visualization&gt;\n<\/pre>\n<p><strong>Steps to add your own visualization:<\/strong><\/p>\n<p style=\"padding-left: 30px;\">1. One of the ways to create web resource visualization is to create an XML file in the following format.<\/p>\n<pre class=\"lang:default decode:true\" style=\"padding-left: 30px;\">&lt;visualization&gt;\n  &lt;name&gt;Show accounts on map&lt;\/name&gt;\n  &lt;description&gt;Used to show the account on map&lt;\/description&gt;\n  &lt;webresourcename&gt;ikl_\/showMap.html&lt;\/webresourcename&gt;\n  &lt;primaryentitytypecode&gt;account&lt;\/primaryentitytypecode&gt;\n  &lt;isdefault&gt;false&lt;\/isdefault&gt;\n&lt;\/visualization&gt;\n<\/pre>\n<p style=\"padding-left: 30px;\">The usual chart XML parameters<\/p>\n<pre class=\"lang:default decode:true \">&lt;datadescription&gt;&lt;\/datadescription&gt;\n&lt;presentationdescription&gt;&lt;\/presentationdescription&gt;\n<\/pre>\n<p style=\"padding-left: 30px;\">\u00a0that were used in traditional charts to represent the chart layout and data series can be used to pass any custom parameters that may be required by the web resource being displayed in the chart.<\/p>\n<p style=\"padding-left: 30px; text-align: justify;\">2. Use Import Chart button as shown in the below screenshot to import the visualization;<\/p>\n<p style=\"padding-left: 30px; text-align: left;\"><a href=\"https:\/\/www.inogic.com\/blog\/wp-content\/uploads\/2017\/03\/Show-HTML-Webresources-in-Charts-within-Microsoft-Dynamics-CRM-11.jpg\"><img decoding=\"async\" class=\"size-full wp-image-4785 aligncenter\" src=\"https:\/\/www.inogic.com\/blog\/wp-content\/uploads\/2017\/03\/Show-HTML-Webresources-in-Charts-within-Microsoft-Dynamics-CRM-11.jpg\" alt=\"HTML Webresources in Charts within Microsoft Dynamics CRM\" width=\"533\" height=\"246\" \/><\/a><\/p>\n<p style=\"padding-left: 30px; text-align: justify;\">3. If you want to programmatically create it, <strong>savedqueryvisualization<\/strong> is the entity that stores the details of the chart.<\/p>\n<pre class=\"lang:default decode:true \">\/\/create entity object\n               Entity webResVisualization = new Entity(\"savedqueryvisualization\");\n                \n                \/\/set the properties\n\n                webResVisualization[\"name\"] = \"Show Accounts on map\";\n\n                webResVisualization[\"description\"] = \"Show Accounts on map.When user select the view\";\n\n                webResVisualization[\"primaryentitytypecode\"] = \"account\";\n\n                webResVisualization[\"webresourceid\"] = new EntityReference(\"webresource\", new Guid(\"5568E744-B2B0-E211-B3D8-D0B0350F4F16\"));\n\n                \/\/create web resource visualization record\n                _service.Create(webResVisualization);\n<\/pre>\n<p style=\"padding-left: 30px; text-align: justify;\">\u00a0When it executes successfully, it creates the Charts Record as shown in the below screenshot;<\/p>\n<p style=\"padding-left: 30px;\"><a href=\"https:\/\/www.inogic.com\/blog\/wp-content\/uploads\/2017\/03\/Show-HTML-Webresources-in-Charts-within-Microsoft-Dynamics-CRM-2.jpg\"><img decoding=\"async\" class=\"wp-image-4782 size-full aligncenter\" src=\"https:\/\/www.inogic.com\/blog\/wp-content\/uploads\/2017\/03\/Show-HTML-Webresources-in-Charts-within-Microsoft-Dynamics-CRM-2.jpg\" alt=\"HTML Webresources in Charts within Microsoft Dynamics CRM\" width=\"625\" height=\"216\" \/><\/a><\/p>\n<p style=\"padding-left: 30px;\">4. When you open the Account entity home page grid and select any view and then select the chart that we have created, it will display the HTML web resource with all accounts plotted on Map;<\/p>\n<p style=\"padding-left: 30px;\"><a href=\"https:\/\/www.inogic.com\/blog\/wp-content\/uploads\/2017\/03\/Show-HTML-Webresources-in-Charts-within-Microsoft-Dynamics-CRM-3.jpg\"><img decoding=\"async\" class=\"size-full wp-image-4783 aligncenter\" src=\"https:\/\/www.inogic.com\/blog\/wp-content\/uploads\/2017\/03\/Show-HTML-Webresources-in-Charts-within-Microsoft-Dynamics-CRM-3.jpg\" alt=\"HTML Webresources in Charts within Microsoft Dynamics CRM\/365\" width=\"625\" height=\"257\" \/><\/a><\/p>\n<blockquote><p><em><strong>Note:<\/strong> The webresource will receive the selected chart id and view id as a query string parameter that can be parsed to execute the view and read the records that need to be processed by the HTML web resource for visualization.\u00a0<\/em><\/p><\/blockquote>\n<p><strong>Conclusion:<\/strong><\/p>\n<p>Use the web resource visualization to display custom content in the context of the view.<\/p>\n<p><strong>Resources<\/strong>:<\/p>\n<p>The following links from the SDK helped us to get this working!<\/p>\n<p><a href=\"https:\/\/msdn.microsoft.com\/en-us\/library\/gg328492.aspx\" target=\"_blank\" rel=\"noopener noreferrer\">https:\/\/msdn.microsoft.com\/en-us\/library\/gg328492.aspx<\/a><\/p>\n<p><a href=\"http:\/\/www.inogic.com\/product\/integrations\/inolink-quickbooks-microsoft-dynamics-crm\" target=\"_blank\" rel=\"noopener noreferrer\"><img decoding=\"async\" class=\"aligncenter wp-image-4797\" src=\"https:\/\/www.inogic.com\/blog\/wp-content\/uploads\/2017\/03\/InoLink.jpg\" alt=\"InoLink: QuickBooks integration with Dynamics CRM \/ Dynamics 365\" width=\"792\" height=\"98\" \/><\/a><\/p>\n","protected":false},"excerpt":{"rendered":"<p>Introduction: For a long time now, perhaps from version 2011 of Microsoft Dynamics CRM, we could design charts and these charts are displayed as a contextual pane beside the views that display the requested charts using the data currently being displayed in the View. It is only recently that we discovered a hidden gem, the\u2026 <span class=\"read-more\"><a href=\"https:\/\/www.inogic.com\/blog\/2017\/03\/show-html-webresources-in-charts-within-microsoft-dynamics-365crm\/\">Read More &raquo;<\/a><\/span><\/p>\n","protected":false},"author":13,"featured_media":4794,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"om_disable_all_campaigns":false,"_monsterinsights_skip_tracking":false,"_monsterinsights_sitenote_active":false,"_monsterinsights_sitenote_note":"","_monsterinsights_sitenote_category":0,"footnotes":""},"categories":[16,19,66],"tags":[896,1147,1833],"class_list":["post-4784","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-dynamics-365","category-dynamics-crm","category-web-resources-2","tag-html-web-resources-in-dynamics-crm","tag-microsoft-dynamics-crm-web-resources","tag-web-resources-for-microsoft-dynamics-365"],"aioseo_notices":[],"_links":{"self":[{"href":"https:\/\/www.inogic.com\/blog\/wp-json\/wp\/v2\/posts\/4784","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.inogic.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.inogic.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.inogic.com\/blog\/wp-json\/wp\/v2\/users\/13"}],"replies":[{"embeddable":true,"href":"https:\/\/www.inogic.com\/blog\/wp-json\/wp\/v2\/comments?post=4784"}],"version-history":[{"count":0,"href":"https:\/\/www.inogic.com\/blog\/wp-json\/wp\/v2\/posts\/4784\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.inogic.com\/blog\/wp-json\/wp\/v2\/media\/4794"}],"wp:attachment":[{"href":"https:\/\/www.inogic.com\/blog\/wp-json\/wp\/v2\/media?parent=4784"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.inogic.com\/blog\/wp-json\/wp\/v2\/categories?post=4784"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.inogic.com\/blog\/wp-json\/wp\/v2\/tags?post=4784"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}