<![CDATA[AngularJS - Alexander Development]]>https://alexanderdevelopment.net/https://alexanderdevelopment.net/favicon.pngAngularJS - Alexander Developmenthttps://alexanderdevelopment.net/Ghost 1.20Fri, 24 Apr 2026 14:21:49 GMT60<![CDATA[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
]]>https://alexanderdevelopment.net/post/2016/11/10/dynamics-crm-angularjs-demo-solution-deep-dive-the-editor-form/5a5837246636a30001b9785bFri, 11 Nov 2016 00:10:15 GMTDynamics 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!

]]><![CDATA[AngularJS demo solution for Dynamics CRM]]>

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

]]>https://alexanderdevelopment.net/post/2016/11/07/angularjs-demo-solution-for-dynamics-crm/5a5837246636a30001b97857Mon, 07 Nov 2016 13:30:00 GMTAngularJS demo solution for Dynamics CRM

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:
AngularJS demo solution for Dynamics CRM

And here's a screenshot of the custom editor (not very stylish, I know):
AngularJS demo solution for Dynamics CRM

The editor page is launched from the "open editor" button on the demo parent main form in CRM.

My solution includes the following components:

  1. Demo parent (la_demoparent) entity - The custom Angular editor displays and allows updating this type of record.
  2. index.htm web resource - This is the web page for the editor.
  3. app.js - This holds the JavaScript code for the Angular application.
  4. 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.
  5. 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.
  6. openeditor.js - This contains code to open the editor from the demo parent entity ribbon. It is not required by the actual Angular application.
  7. 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.

]]>