Implementing Angular In Dynamics CRM

Introduction

Dynamics CRM is a next-generation customer management application offered by Microsoft as both On-premise and Online. Dynamics CRM empowers the business to manage end-to-end interaction with prospected and existing customers through different modules including Sales: Marketing: Service: Project Services and much more.

As an enterprise application, the area of implementation is broad and so the requirements for businesses have great variations. At times, to fulfill these requirements, developers have to develop components that are not offered by Microsoft.

One of the major requirements by businesses is implementing a custom page, where business users can enter data and this data will be validated by some third-party application, based upon the results the user will decide the next step.

To implement this sort of requirement, developers develop components harnessing the power of HTML with Javascript, or through Angular JS.

The advantages of Angular JS

• Angular JS has a powerful IntelliSense which assists the developer a lot during any development
• It supports the OOB, which is not available in other Scripting Languages.

Tools needed for developing an Angular JS component.

• Node.js: This can be downloaded from here.
• Code Editor: Visual Studio: Visual Code
• Xrm Tool Box: Will be using a plugin ( Web Resource Manager) to assist us in uploading the resources post-development.

Steps for Developing an Angular JS Component

• Create a folder in your system, and open the same using the Visual Code. For my project have created the folder – MyAngularSolution3.
  
• Click on the Terminal on the top and open a new Terminal.
  
• If you are creating an Angular Project for the first time, then need to install the npm.
  • The command for the same is npm install.
  • For my project have created another folder in my root folder Deploy.
  • Now navigate to the Deploy folder and run the command ng new demo
    
• The command will create: deploy and install the necessary packages in your project, and the same will be visible to you in Visual Code under your project
  
• Now lets first start and verify that installation went all good and for the same, will be executing the command ng serve, this will compile the code and will bundle a Browser Application which can be accessed over http://localhost
  
  
• Now we need to make this application compatible with Dynamics CRM, and for that, we need to make the necessary changes in the below files.
  • App.component.html
  • App.component.ts
    
• For our demo, I have removed everything from app.component.html, and have just added the following:
  
• Since now we will be uploading the files to Dynamics CRM, we will build the solution using the below command which will create an optimized build to be uploaded to Dynamics CRM.

  ng build --prod --output-hashing none
  

Steps to upload the Angular Component to Dynamics CRM

• Open the XrmToolBox and install the plugin – WebResource Manager.
• Create a Solution of your choice, or you may use any existing solution too in Dynamics CRM.
  
• For this tutorial, have created an explicitly new solution – Angular Application 2. I Will be uploading the files to this solution.
  
• Select all the files and upload and update the same in Dynamics CRM through the Web Resource Manager.
  
• We will be adding the HTML web resource to the LEAD Form as an HTML Web Resource.
  
• Post this try loading the form and you will find that the web resource is loading all good, but the content of the same is not reflected.
  
• To reflect the changes, we need to remove a specific line from index.html -- <base href=”/”>.
  
• Rebuild the solution and update the files in Dynamics CRM
• And BINGO!