{"id":14077,"date":"2019-01-16T12:34:36","date_gmt":"2019-01-16T12:34:36","guid":{"rendered":"https:\/\/www.inogic.com\/blog\/?p=14077"},"modified":"2022-09-02T16:40:33","modified_gmt":"2022-09-02T11:10:33","slug":"using-angular-dynamics-365-crm-part-ii","status":"publish","type":"post","link":"https:\/\/www.inogic.com\/blog\/2019\/01\/using-angular-dynamics-365-crm-part-ii\/","title":{"rendered":"Using Angular in Dynamics 365 CRM \u2013 Part II"},"content":{"rendered":"

Introduction<\/strong><\/h2>\n

In our previous<\/a> blog, we have seen how to create and deploy a simple hello world Angular application in Dynamics 365. In this blog, we will see how to work with CRM Client API, CRM Web API and how to use JavaScript libraries.<\/p>\n

Work with Client API in Angular Application<\/strong><\/h2>\n

The first thing that we would need to do is, add the reference of ClientGlobalContext.js.aspx.\u00a0<\/strong>in index.html. Refer a screenshot below.<\/p>\n

\"Angular<\/p>\n

Now let\u2019s use ClientGlobalContext.js.aspx to use some Client API. Open app.component.ts and write a code to get the logged-in user as shown below,<\/p>\n

\"Angular<\/p>\n

When building the application using ng build you will get the below error,<\/p>\n

\"Angular<\/p>\n

To fix this install @types\/xrm<\/a>. Open terminal and type following command, npm install –save @types\/<\/strong>xrm<\/p>\n

You will then see the xrm type get added in your node_modules -> @types folder.<\/p>\n

\"Angular<\/p>\n

Add type \u2018xrm\u2019 in \u201ctypes\u201d of tsconfig.app.json file as shown below,<\/p>\n

\"Angular<\/p>\n

Now build the application and update the main.js file in Dynamics 365. This should work now and lets give you the name of logged in user.<\/p>\n

So this way you can use Xrm object in Angular application.<\/p>\n

Work with CRM Web API in Angular Application<\/strong><\/h2>\n

If you are on Dynamics 365 version 9.x and above then you can directly use Xrm.WebApi<\/a> to perform CRUD operations on CRM data. But if you are on 8.x and below then you would need to add reference of Web API in your Angular Application.<\/p>\n

Run \u201cnpm install \u2013save-dev xrm-webapi\u201d command in terminal. This will add xrm-webapi in your current project\u2019s node_modules. Refresh the project folder if xrm-webapi folder not showing in the node-modules folder.<\/p>\n

\"Angular<\/p>\n

To use this import xrm-webapi in your component or in service of angular application. We recommend to initialize or add the reference of web api in service as it may be reused in several parts of Angular Application.<\/p>\n

Below is how I have imported the xrm-webapi in app.service.ts.<\/p>\n

\/\/app.service.ts<\/p>\n

import { Injectable } from ‘@angular\/core’;<\/p>\n

import { WebApi } from “xrm-webapi”;<\/p>\n

@Injectable({<\/p>\n

providedIn: ‘root’<\/p>\n

})<\/p>\n

export class AppService {<\/p>\n

webApi: WebApi;<\/p>\n

constructor() {<\/p>\n

this.webApi = new WebApi(“9.1”);<\/p>\n

}<\/p>\n

}<\/p>\n

\"Angular<\/p>\n

Below is how we have used the functions of xrm-webapi in app.component.ts.<\/p>\n

\/\/app.component.ts<\/p>\n

import { Component } from ‘@angular\/core’;<\/p>\n

import { AppService } from “.\/app.service”;<\/p>\n

@Component({<\/p>\n

selector: ‘app-root’,<\/p>\n

templateUrl: ‘.\/app.component.html’,<\/p>\n

styleUrls: [‘.\/app.component.css’]\n

})<\/p>\n

export class AppComponent {<\/p>\n

title = ‘first-crm-angular-app’;<\/p>\n

loggedInUserName: string;<\/p>\n

constructor(public appService: AppService) {<\/p>\n

}<\/p>\n

ngOnInit() {<\/p>\n

let context = Xrm.Utility.getGlobalContext();<\/p>\n

this.loggedInUserName = context.userSettings.userName;<\/p>\n

console.log(“Logged in user: ” + this.loggedInUserName);<\/p>\n

\/\/retrieve Accounts<\/p>\n

this.appService.webApi.retrieveMultiple(“accounts”).then(response => {<\/p>\n

console.log(“Accounts: ” + response.value);<\/p>\n

},<\/p>\n

error => {<\/p>\n

console.log(“Error: ” + error.message);<\/p>\n

});<\/p>\n

}<\/p>\n

}<\/p>\n

\"Angular<\/p>\n

Build application and upload main.js and vendor.js file in Dynamics 365. Refresh the page and check the console. The Web API should work.<\/p>\n

\"Angular<\/p>\n

How to use JavaScript library in Angular Application<\/strong><\/h2>\n

Suppose you have util.js a common JavaScript library in your system and you want to use it in your Angular application. This is also possible, there are several ways to achieve this. Here we will see the one of the way to use a JavaScript library.\u00a0 You would need to add the reference of your JavaScript library in index.html and to able add this reference in index.html you would need to this util.js file in your Angular Application project directory with structure.<\/p>\n

Here is how util.js web resource is created in CRM,<\/p>\n

new_scripts\/shared\/util.js<\/p>\n

\"Angular<\/p>\n

Here is how util.js added into Angular Application,<\/p>\n

\"Angular<\/p>\n

Here is how it being referenced in index.html,<\/p>\n

\"Angular<\/p>\n

Finally, here is how it is being used in component,<\/p>\n

\/\/app.component.ts<\/p>\n

import { Component } from ‘@angular\/core’;<\/p>\n

declare function getText(): string;<\/p>\n

@Component({<\/p>\n

selector: ‘app-root’,<\/p>\n

templateUrl: ‘.\/app.component.html’,<\/p>\n

styleUrls: [‘.\/app.component.css’]\n

})<\/p>\n

export class AppComponent {<\/p>\n

title = ‘first-crm-angular-app’;<\/p>\n

constructor() {<\/p>\n

}<\/p>\n

ngOnInit() {<\/p>\n

\/\/call JavaScript Library Function<\/p>\n

let text = getText();<\/p>\n

console.log(“JavaScript Function Result: ” + text);<\/p>\n

}<\/p>\n

}<\/p>\n

Conclusion<\/strong><\/h2>\n

In this blog, we have seen how to work with CRM Client API, CRM Web API and how to use JavaScript libraries. In the next blog<\/a>, we will see the development build and production build and will see how to increase the development speed as every time when we make any changes into our application we need to upload and publish the Web Resources in CRM to see the changes.<\/p>\n

Generate Your Own New Leads Within Microsoft Dynamics 365 CRM<\/div><\/div><\/h2>\n

Contact us for a demo<\/a> to know more about how Maplytics<\/a> can help you to generate new leads from within Microsoft Dynamics 365 CRM.<\/em><\/p>\n

Maplytics<\/a> is a 5-star rated, preferred business app on the Microsoft AppSource<\/a> that is Certified for Microsoft Dynamics 365 (CfMD) and comes with powerful features like Appointment Planning, Sales Routing, Territory Management, Heat Maps, Geo-analytical Dashboards and more that empower organizations to add more value to their CRM data, improve sales & service processes, and achieve high ROI.<\/em><\/p>\n

Get your free trial<\/a> from our Website or Microsoft AppSource<\/a>!<\/em><\/p>\n

‘If data is the new oil, location intelligence is ??\u201d<\/em><\/p>\n","protected":false},"excerpt":{"rendered":"

Introduction In our previous blog, we have seen how to create and deploy a simple hello world Angular application in Dynamics 365. In this blog, we will see how to work with CRM Client API, CRM Web API and how to use JavaScript libraries. Work with Client API in Angular Application The first thing that\u2026 Read More »<\/a><\/span><\/p>\n","protected":false},"author":13,"featured_media":14091,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"om_disable_all_campaigns":false,"_monsterinsights_skip_tracking":false,"_monsterinsights_sitenote_active":false,"_monsterinsights_sitenote_note":"","_monsterinsights_sitenote_category":0,"footnotes":""},"categories":[3,16,19],"tags":[129,130],"class_list":["post-14077","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-angular","category-dynamics-365","category-dynamics-crm","tag-angular-dynamics-365","tag-angular-dynamics-365-crm"],"aioseo_notices":[],"_links":{"self":[{"href":"https:\/\/www.inogic.com\/blog\/wp-json\/wp\/v2\/posts\/14077","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.inogic.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.inogic.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.inogic.com\/blog\/wp-json\/wp\/v2\/users\/13"}],"replies":[{"embeddable":true,"href":"https:\/\/www.inogic.com\/blog\/wp-json\/wp\/v2\/comments?post=14077"}],"version-history":[{"count":0,"href":"https:\/\/www.inogic.com\/blog\/wp-json\/wp\/v2\/posts\/14077\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.inogic.com\/blog\/wp-json\/wp\/v2\/media\/14091"}],"wp:attachment":[{"href":"https:\/\/www.inogic.com\/blog\/wp-json\/wp\/v2\/media?parent=14077"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.inogic.com\/blog\/wp-json\/wp\/v2\/categories?post=14077"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.inogic.com\/blog\/wp-json\/wp\/v2\/tags?post=14077"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}