In the last part, we worked on getting the data out of CRM to display on our ‘Latest News’ grid. If you have missed reading part 1 of this blog then take a break and read it before continuing.
To represent data to the user, we need a GUI, my choice for this was Angular JS, and I used Bootstrap to pretty it up.
Why and What is Angular JS?
To make an HTML page an Angular savvy page, you must do 3 basic things –
- Reference angular.js library, using CDN or just downloading the latest version.
- Decorate HTML with angular directives, starting with ‘ng-app’ which declares your app as angular app.
- Hook up a controller that provides data for the application
Let’s make our Latest News application and Angular JS application.
Controller and Services (Service $http)
Controller is in charge of application data, and for our project ‘Latest News’ we need CRM data via WEB APIs. In my last blog, we worked on forming a url that gives us back the data we need, now we need to make an HTTP Get Request using that url. Angular has a built-in service for this purpose and it is called a $http service. A service is a function or an object that extends Angular functionality, and can be made available to the application scope using Dependency Injection. Here is how I used $http service to get the latest email for a contact in CRM.
We now have a fully functional client-side application running in a browser that gets Latest Emails from CRM.
Running inside CRM as a Web Resource
So far, we have a completely functional client-side application that runs outside CRM in a web browser. Next step is to put it inside CRM as a web resource.
Web Resources are files which can be uploaded inside CRM to extend CRM’s functionality. They are saved in CRM databases and can be considered as virtual files since they cannot be directly browsed. But they very much reside in CRM and can be utilized by other elements. Following file formats can be used as web resources – HTML, image, stylesheet, script files, XML, etc. Web Resources do not support files that run on server side (.aspx), only static HTML files or files that can run inside a browser using client-side technologies are supported.
For our project ‘Latest News’, so far, we have a completely functional client-side application that runs in a web browser. Using Web Resources, we can easily import this solution inside CRM, let’s look at the step by step solution to achieve this.
Step 1: Create a new Web resource
To create a new web resource, browse to Settings -> Customizations -> Customize the System -> Web Resources. We need to create a new web resource for each file used in the application including HTML, stylesheet, script files, etc.
Step 2: Include Web Resource in a Form
Browse to Settings -> Customizations -> Customize the System -> Forms -> Contact Form and edit it. On the top ribbon menu, look for a button to add a web resource to the form. Select an existing web resource created in step 1. This HTML web resource is also the starting point of our Latest News application. Save and publish the changes.
Step 3: Make the code generic enough so that it can be dropped on any entity
In step 2, we dropped our client-side application ‘Latest News’ on the Contacts form, similarly we can drop it on other entity forms such as Opportunity, Account, etc. We need to ensure that our application will work with different entities without having to modify the code. The trick here is to build the Web API request dynamically using the values in the query string. Query string is the text that comes after ‘?’ in the address bar url. It has information like organization name, entity id, etc. I used a java script function that extracts query string to get us the Contact Id if we are on Contacts form or the Account Id if we are browsing to Accounts form. Here is the code snippet for it.
Latest News shows the top most happenings in all 4 categories – emails, phone calls, appointments and tasks, all at a single glance.
Check out for more such CRM customization blogs on KTL Solutions website. KTL Solutions looks beyond your industry standards. We look for limitations in these solutions that are causing pain points in your organization. We then deliver an effective, yet elegant, solution that alleviates roadblocks and finds hidden opportunities to get your organization working the way it was meant to. Contact us today to get started.