Dynamics CRM AngularJS demo solution deep dive - the editor form

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):

  1. index.htm - This is the editor form.
  2. app.js - This contains the JavaScript code that make the editor work.
  3. 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!

comments powered by Disqus