Lately I've started using AngularJS to build web resources for custom data editors and viewers in Dynamics CRM. Once you get the hang of Angular, it's not that hard, but it did take me some time to figure out exactly how to work with it as part of a CRM solution. To help other people get started using Angular in Dynamics CRM, I've built a demo solution that includes a custom editor page for a custom entity called "demo parent" and its related tasks.
The custom editor displays an existing demo parent record's name and description fields, both of which are editable. It also shows all tasks related to the demo parent and allows the user to add new tasks.
Here's a screenshot of the entity form:
And here's a screenshot of the custom editor (not very stylish, I know):
The editor page is launched from the "open editor" button on the demo parent main form in CRM.
My solution includes the following components:
- Demo parent (la_demoparent) entity - The custom Angular editor displays and allows updating this type of record.
- index.htm web resource - This is the web page for the editor.
- app.js - This holds the JavaScript code for the Angular application.
- webapisdk.js - This JavaScript library enables easy use of the Web API. Its code is taken from the WebAPIBasicOperations.js sample at https://msdn.microsoft.com/en-us/library/mt770365.aspx.
- es6promise.min.js - This is a polyfill for ES6-style Promises that's used to work with async code. Promises basically let you avoid callback hell like we had with all the CRM organization data service examples.
- openeditor.js - This contains code to open the editor from the demo parent entity ribbon. It is not required by the actual Angular application.
- Editor16.png and Editor32.png - These icons aren't required for the actual Angular application to function.
One thing that is notably missing from my application is the AngularJS library. My index.htm page is loading it from the Google CDN, but there's no reason you couldn't upload a copy to your CRM organization and call it from there instead.
You can download the entire solution to install in your own CRM organization from my GitHub repository, or you can just browse the code here.
I plan to discuss the different parts of the solution in more detail in future posts, but I think just browsing the code and seeing how the solution works will still be helpful to anyone who is just getting started with Angular in CRM.