Earlier this week I shared a sample solution that shows how to build a custom Dynamics CRM data editor with AngularJS. As I described in that post, the actual editor relies on three custom web resource components (not including the AngularJS and ES6 promise libraries):
- index.htm - This is the editor form.
- app.js - This contains the JavaScript code that make the editor work.
- webapisdk.js - This 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.
The index.htm web resource is fundamentally just a regular HTML page, but there are a few additional things that need to be done to enable the Angular functionality. Today I will go through those Angular-specific bits line by line. If you want to follow along, the full code is available on GitHub.
Line 2 - <html ng-app="crmEditorApp"> - This tells AngularJS we have an application named "crmEditorApp."
Line 25 - <div ng-controller="CrmEditorController as crmEditor"> - This invokes the controller defined in our app.js file for this div.
Lines 29 - ng-value="crmEditor.mainrecord.name" and ng-model="crmEditor.mainrecord.name" - This binds form input values to the Angular variables, and allows us to easily update data in CRM. The ng-value and ng-model also show up on line 31.
Line 32 - <button ng-click="crmEditor.UpdateRecord()">Update record</button> - This creates a button that will execute the controller's UpdateRecord function when it is clicked.
Line 41 - <tr ng-repeat="task in crmEditor.tasks"> - This creates a table row for every item in the controller's tasks array.
Line 42 - {{task.subject}} - This displays the value of the "subject" property for the specific task object. The same syntax is used on lines 43 and 44.
Line 50 - <input ng-model="tasksubject" name="tasksubject" type="text" id="tasksubject" /> - The "ng-model" here makes the value of the input available to the controller. The same syntax is used on lines 51 and 52.
Line 53 - <button ng-click="crmEditor.AddTask()">Add new task</button> - This creates a button that will execute the controller's AddTask function when it is clicked.
We'll take a look at the app.js resource in a future post. Until then, happy scripting!