Microsoft Dynamics 365, a popular enterprise business solution designed to manage business processes, has a plethora of features that fulfill most business needs. But because every business is different, each enterprise generally requires customization. Fortunately, the customizations are straightforward, and can be done through plugins, actions, and web resources.
If you'd like to watch a video for this process, skip to the bottom.
Here are a few things we can do with Wijmo 5 and Dynamics 365:
- Display entity records in FlexGrid and perform Excel-like filtering, sorting, and grouping and display hierarchical data.
- Represent data in pie chart, bar chart, radar or a linear/radial/bullet graph
- Analyze and drill down data using Wijmo OLAP control
- Use custom input elements like calendar, autocomplete, multi-select, and drop-down
Let's get started.
First we'll create a basic accounts dashboard using FlexGrid and FlexChart. As always, we'll start with a list of requirements. The dashboard needs to:
- Fetch data from an account entity and display it in the FlexGrid. Features include:
- Represent data from account records in a pie chart so we can see a pie graph of countries and their accounts
- Users should be able to update records on FlexGrid, which should update the entity record in the CRM.
Step 1: Creating the HTML Page
Since our HTML page is going to need a FlexGrid and FlexChart to display the data. We are going to add them First and then move to add the JS code later. We have also added FlexGrid filter directive and Group Panel to provide Filtering and Grouping features.
We're using Dynamic CRM’s Web API to read and write data on Accounts Entity. Data fetched from Web API will be displayed in the FlexGrid, and any edits in the FlexGrid will be updated back to Dynamics 365. We're also creating a function to analyze data and show the resulting data in a FlexChart.
This is all the code we need to create our Account Dashboard with Wijmo 5 controls!
Note: we need to provide relative URLs for our dependencies in the HTML page, as they also need to be uploaded as Web Resources. Uploading the dependencies is a one-time process, and once done, we can re-use the dependencies in other Web Resources as well.
Now we'll look into the second half of the process: deploying the code to Dynamics 365. Once we publish the files to the CRM, our Account Dashboard will be nearly complete.
Step 3: Deploying Code & Dependencies to CRM
The best practice is to create a new solution and upload the files there. (You can read about how to create a new solution here.)
We've already created a new solution and have uploaded the mentioned files as Web Resources. Here are the steps:
3.1 Navigate to the Settings Page
3.2 Select the Solution to Upload Resources
3.3 Upload the Files as Web Resources.
If you would like to know how to upload Web Resources, then please visit here.
Step 4: The Entry Point
Take note of the URL field of AccountDetailsWijmoView.html. This serves as the entry point for the Account Dashboard. In our sample, the entry point is: https://demojs.crm8.dynamics.com//WebResources/gc_AccountDetailsWijmoView.html
Step 5: Adding a Ribbon Button using Ribbon Workbench & Ribbon Set Up
Let's add an Analyze Ribbon Button on the accounts home page. When we click it, we'll see the Account Dashboard. It's recommended to use the Ribbon Workbench to add ribbon buttons and associate commands with them. (If we wanted, we could open the entry point URL directly in our Dynamics 365 instance, and it would work just fine.)
5.1 Set up Ribbon Button
5.2 Set up Ribbon Button Command
Here are the property names and corresponding values:
Step 6: Open the Accounts Dashboard
Navigate to Accounts Home Page and click on the Analyze Accounts button. It should open the Account Dashboard as a Modal Dialog.
Account Dashboard in Action: Group, Sort, Filter, Edit Data
Lastly, we'll look at the interactivity that makes FlexGrid such a powerful grid tool.
Grouping: Drag any column to the section that reads “Drag columns here to create groups” and your groups will be created. We can create multiple groups as well.
Filtering: Each column has a filter icon built-in. Click the icon and we can filter based on value or conditions.
Sorting: Clicking on any of the columns sorts the data based on that column.
Data Operations: Try editing any of the cells. Once the edit is complete, click on update to update records in the CRM. The data refreshes, updating FlexGrid and pie chart automatically.
- Source Code Project: This project contains all the source files for Account Dashboard
- MSCRM Solution: We also created a MSCRM solution which can be directly imported into your CRM Instance and you can see the Dashboard in action at your end.
- WijmoSampleSolution_Without Ribbon Button: Can be imported to MSCRM and Dynamics 365. Does not contain the Ribbon Button. The View page would have to opened as a URL
- WijmoSampleSolution_With Ribbon Button: Can be imported to Dynamics 365 only and contains “Analyze Account” Ribbon Button, visible on the Accounts Home Page.
Watch the Full Video
Try Wijmo's UI controls Download the latest version of Wijmo
Try Wijmo's UI controls
Download the latest version of WijmoDownload Now!