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?
Plain HTML is great for static pages, but most web pages these days are dynamic as they change their content based on the information received from server. Angular JS is a JavaScript framework that helps in extending HTML to do more than what it is supposed to do. We can add anything to HTML attributes, but browsers will ignore it if it does not make any sense. Angular JS uses the same concept and extends HTML by adding attributes to it and writing a meaningful library that manipulates DOM based on these attributes.
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
An ng-bind attribute on an HTML tag <p> means nothing otherwise, but if you tell the HTML page that it is going to use Angular JS then it will put the value of “MyText” inside <p>. These special attributes in the Angular world are called directives. For example, an ng-app directive tells the HTML page that it is an Angular page and an ng-controller will specify the controller name. Think of a controller as a data provider. It is just a JavaScript file which gets data that will help you build your dynamic HTML page.
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.
Bootstrap
To make a developers’ life a little less complicated, Bootstrap offers CSS based design templates that transforms your ‘Blah’ looking application into a modern, mobile ready application. To start using Bootstrap, you need to include Bootstrap JavaScript library and adorn your HTML with bootstrap classes. For our ‘Latest News’ project, the table is adorned with Bootstrap classes as follows.
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.
Authentication
When CRM is customized using Web API and JavaScript within HTML web resource, there is no need to authenticate the user. User is already authenticated by CRM application.
Final Product
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.
