Building a reusable Kendo UI Web Resource Solution for Dynamics CRM 2015

One of the tools I have used extensively over the years when building out CRM web resources is Kendo UI.

Kendo UI simplifies the creation of grids, charts, barcodes, spreadsheets, maps and many other useful components when creating new HTML web resources for use with CRM.

If you are new to Kendo UI, I suggest you start at their web site at http://kendoui.com

The Kendo UI solution I will be discussing here is the JQuery based version.  You will find other versions made for .Net MVC, .Net AJAX, Angular etc.  A Kendo UI Trial version is available for download on their web site.

Since I usually use many of the available Kendo UI components when building custom solutions for CRM.  I prefer to have one managed CRM solution that contains the entire Kendo UI toolset, that I can easily reference when building my custom HTML pages and controls.  Rather than having a separate solution for each type of component such as the Kendo Grid for example.

I also limit my Kendo UI solution for CRM to only include the ‘Default’ and ‘Office 365’ themes.  I have found the ‘Office 365’ theme resemble the look of CRM 2015 well and I rather not spend my time building my own CRM theme.  You can of course include additional or other themes as needed.

When building out web resource solutions in CRM, you are limited to using certain file types and file name conventions.  Some of the file names and types used in the Kendo UI toolset are not supported in CRM.  So to get around this issue, I will address the changes that you need to make it work.

Let’s get started

As a prerequisite you need to get a copy of Kendo UI for JQuery installed on your local machine.  The trial version will suffice for now, if you don’t have the licensed version yet.

Using a developer platform such as Visual Studio, create a new empty solution where you can create the necessary directory structure that will become your CRM Kendo UI solution.  Choose a solution template that supports HTML and JavaScript web development.

The Kendo UI Professional release that I will be using here is v2017.1.223, your release may be different.   Creating a CRM web resource solution with another Kendo release is done the same way, just change the name(s) to correspond with your release.

The Kendo UI files you need for this project can be found in C:\Program Files (x86)\Telerik\Kendo UI Professional R1 2017 (or similarly named).

Files will be copied from folders within this directory as needed for the Visual Studio solution we’re building.

Visual Studio Kendo UI solution

In Visual Studio create your new solution (crmXtra_KendoUI). Create an initial folder named ‘KUI_V2017_1_223’ or name it according to the Kendo UI release you are using.

The KUI_V2017_1_233 becomes the root name of the folder structure that will be used within the CRM Kendo UI solution.

Next, we will need to create two subfolders ‘css’ and ‘js’.  The ‘css’ folder will have the additional subfolders;

  • —-> Default
  • —-> fonts
  • ——–> DejaVu
  • ————> CRM_UploadFiles
  • ——–> glyphs
  • ————> CRM_UploadFiles
  • —————-> EOT
  • —————-> SVG
  • —————-> TTF
  • —————-> WOFF
  • —-> Office365
  • —-> textures

After the creation of the folder structure above we can start copying the relevant files and making the necessary changes.

Populating the CSS Default folder

Begin with copying all the Kendo UI files from the Kendo UI folder:  C:\Program Files (x86)\Telerik\Kendo UI Professional R1 2017\styles\Default (or from the Kendo UI installation directory on your machine, if different).

To your visual studio solution folder:  ….\crmXtra_KendoUI\KUI_V2017_1_223\css\Default

Once you have added the files to your Kendo UI solution it should look as follows:

CRM does not allow the use of a dash character (-) in the file name which gets uploaded into a CRM web resource solution.  In the file list above there are three file names containing dashes:

  • loading-image.gif
  • slider-h.gif
  • slider-v.gif

These file names must be renamed in your solution to use an underscore character (_) instead of a dash as follows:

  • loading_image.gif
  • slider_h.gif
  • slider_v.gif

After making these changes your Default folder should look as follows:

Populating the CSS Office365 folder

For the Office365 theme we need to repeat the process described for the Default theme above.

Copy all the files from:  C:\Program Files (x86)\Telerik\Kendo UI Professional R1 2017\styles\Office365 (or from the Kendo UI installation directory on your machine, if different).

To your visual studio solution folder:  ….\crmXtra_KendoUI\KUI_V2017_1_223\css\Office365

Rename files as described previously and you should end up with the following Office365 folder:

If you have other themes to include, repeat the process that was just described updating the Default and Office365 themes.

Populating the CSS textures folder

Copy all the files from:  C:\Program Files (x86)\Telerik\Kendo UI Professional R1 2017\styles\textures (or from the Kendo UI installation directory on your machine, if different).

To your visual studio solution folder:  ….\crmXtra_KendoUI\KUI_V2017_1_223\css\textures

Out of the 30 files copied, three must be renamed due to the dash in the file name:

  • brushed-metal.png
  • glass-lighter.png
  • hsv-gradient.png

Rename them to:

  • brushed_metal.png
  • glass_lighter.png
  • hsv_gradient.png

Populating the fonts\DejaVu folder

Copy all the TrueType font files from:  C:\Program Files (x86)\Telerik\Kendo UI Professional R1 2017\styles\fonts\DejaVu (or from the Kendo UI installation directory on your machine, if different).

To your visual studio solution folder:  ….\crmXtra_KendoUI\KUI_V2017_1_223\css\fonts\DejaVu

Copy the same files again to the visual studio solution folder:  ….\crmXtra_KendoUI\KUI_V2017_1_223\css\fonts\DejaVu\CRM_UploadFiles

Rename all the TrueType font file names that has a dash, by replacing the dash with an underscore as illustrated previously.

Your fonts folder should now look as follows:

Next, expand the CRM_UploadFiles folder where you placed the second copy of the TrueType files  and change the file extension from ttf to css and change dash to underscore as illustrated previously.

Your fonts\DejaVu\CRM_UploadFiles folder should look as follows:

You are probably wondering why we changed the file type from TrueType Font to Cascading Style Sheet.  The answer is that CRM in addition to not allowing a dash in the file name does not allow the upload of ttf files either.  This way we are hiding that fact and CRM will allow upload believing it is a css file.

Populating the fonts\glyphs folder

Copy all the TrueType font files from:  C:\Program Files (x86)\Telerik\Kendo UI Professional R1 2017\styles\fonts\glyphs (or from the Kendo UI installation directory on your machine, if different).

To your visual studio solution folder:  ….\crmXtra_KendoUI\KUI_V2017_1_223\css\fonts\glyphs

Copy the same files again by its file type to the visual studio solution folder:  ….\crmXtra_KendoUI\KUI_V2017_1_223\css\fonts\glyphs\CRM_UploadFiles\FILE TYPE FOLDER

See below for a completed folder:

Next, since CRM does not allow some of the file types, we need to change the file extension of the files to css in the CRM_UploadFiles sub folders.  See below for a completed folder:

Populating the root of the css folder

Copy the files listed below from:  C:\Program Files (x86)\Telerik\Kendo UI Professional R1 2017\styles (or from the Kendo UI installation directory on your machine, if different).

  • kendo.common.min.css
  • kendo.common-office365.min.css
  • kendo.default.min.css
  • kendo.office365.min.css

To your visual studio solution folder:  ….\crmXtra_KendoUI\KUI_V2017_1_223\css

After the files are added to the visual studio solution, rename the kendo.common-office365.min.css file to kendo.common_office365.min.css

You should now have the following css folder:

Since we changed some of the file names with a dash to an underscore previously, we now need to update the theme stylesheet files with those changes.

Previously we changed the following GIF and PNG files with a dash to underscore:

  • loading-image.gif
  • slider-h.gif
  • slider-v.gif
  • brushed-metal.png
  • glass-lighter.png
  • hsv-gradient.png

The first three GIF files listed are referenced in the files below:

  • kendo.default.min.css
  • kendo.office365.min.css

Using Visual Studio or another editor, open each css file and search for the three gif file names.  When you find a match, change from the dash to an underscore.  See below for an example:

Change the dash to an underscore, see example below:

Continue searching for all occurrences of the gif files and update accordingly.  Save the changes you make to  the css files.  If you are using other themes than the Default and Office365 themes, you must make the same updates for those and in addition also search for the three png files listed above and update as needed.

Recently, Kendo UI introduced the use of font icons and updated their style sheet ‘CSS’ files accordingly.  These updated style sheets can cause font icons to not display when used as a CRM web resource.  The underlying error that cause this is a 500 server error.  To correct this issue, we need to edit the common css files used in our solution.  Based on the styles we used in this solution, we need to edit the following two files:

  • kendo.common.min.css
  • kendo.common_office365.min.css

Using Visual Studio or another editor, open each CSS file and search for the following text(s);

  • ttf?gedxeo
  • woff?gedxeo

When you find a match, remove the ‘?gedxeo’ from the URL string listed.  See below for an example:

Change it so it looks like:

Repeat the process for all occurrences and save your updates when completed. Continue with any other style sheets used in your solution.

 

Populating the js folder

Copy the files listed below from:  C:\Program Files (x86)\Telerik\Kendo UI Professional R1 2017\js (or from the Kendo UI installation directory on your machine, if different).

  • jquery.min.js
  • jszip.min.js
  • kendo.all.min.js
  • pako_deflate.min.js

To your visual studio solution folder:  ….\crmXtra_KendoUI\KUI_V2017_1_223\js

After you add these to your solution, you should see the following:

This completes the steps necessary to create the Kendo UI Visual Studio Solution.  We will now continue with creating and deploying the Kendo UI CRM Web Resource solution.

Creating the CRM Web Resource Solution

Using Microsoft Dynamics CRM 2015, navigate to Settings –> Solutions and click ‘New’ to create a new solution.

Enter the name and version information you want to use, below is an example:

The image above is a bit small, so here is the details of what I used:

  • Display Name: crmXtra.KendoUI.2017.1.223
  • Name: Use the suggested value
  • Publisher: Select a publisher in your CRM organization
  • Version: 2017.1.223
  • Description: See below

Contains Telerik Kendo UI solution components version 2017.1.223
jQuery version 1.12.3 minimized
JSZip and Pako script libraries
DejaVu True Type fonts and KendoUIGlyphs

Adding Web Resource Components

After saving your new solution, select Components on the left and then Web Resources.  Then click on ‘New’ to create a new web resource in our CRM solution.

Now, we need to add all the files we prepared in the Visual Studio solution, starting with the ‘Default’ stylesheet folder.

The first file we are adding is the ‘editor.png’ file in the ‘Default’ folder.  We need to use a name that includes the folder structure and the specific file name.  So the first file we add as:

/KUI_V2017_1_223/css/Default/editor.png

When you add this, your CRM publisher prefix is added to the name automatically.  I suggest you use the same name, including the prefix as your Display Name also.

Skip the Description, unless you want further details listed.  Next, specify the file type ‘PNG’, Language as English and Browse to upload the ‘editor.png’ file from your Visual Studio solution folder.  Click on Save and then Publish.

Your first web resource item should then look something like the following:

We repeat the same for the rest of the files, changing the file type as needed.  The second web resource item should look something like the following:

After completing the entire list of the Default files you should have something like the following listed:

Next, lets do the ‘Office365’ stylesheet folder, the process will be almost the same as the ‘Default’ folder.  When you are done with the Office365 folder, you should have something like the following listed:

Next, lets do the ‘textures’ folder, similar process again to the Default/Office365 theme folders.  When you are done with ‘textures’, you should have something like the following listed:

Next, lets add all the css files that is in the root css folder, consisting of:

  • kendo.common.min.css
  • kendo.common_office365.min.css
  • kendo.default.min.css
  • kendo.office365.min.css

If you are using themes other than ‘Default’ and ‘Office365’ your list of css files would be different.

When you have completed adding the css files to your CRM Kendo UI solution, you should have a list something like the below:

Next, we will work on adding the files in the css/fonts folder.

Since there are restrictions on the file types that can be uploaded as a CRM web resource, we will handle these files differently than previous files we have added to our solution.

First we add the DejaVu True Type fonts.  We create the new web resource just as we have done previously for the first font ‘DejaVuSans.ttf’ but handle the file type and file upload process differently.  Below is what your new web resource should look like:

When you specify the File Type, select Style Sheet (CSS) as shown above, even though you will in fact be uploading a ttf file.

When you browse to upload the file, do not select the ‘DejaVuSans.ttf’ file in the typical folder, but instead go one folder down into ‘CRM_UploadFiles’ and select the file ‘DejaVuSans.css’.  Since the file extension match the file type you selected, CRM will allow the upload.  If you attempt to upload the file with the ‘ttf’ extension, you should get an error.

It’s important to note that the URL to the font web resource does maintain the correct file type of ‘ttf’, which leaves it accessible by Kendo UI.

Repeat this process for the remaining DejaVu True Type files.  When you are done you should see something like:

Next, we will tackle the fonts/glyphs folder.  This one also require special treatment similar to the ‘DejaVu’ files.  Again we will mask the EOT, SVG, TTF and WOFF file types as CSS, so that they will be accepted during upload to CRM.

We will start with the ‘KendoUIGlyphs.eot’ file.  You will set the file type to Style Sheet again and upload the ‘KendoUIGlyphs.css’ file from the ‘….\fonts\glyphs\CRM_UploadFiles\EOT

The web resource you are creating should look something like this:

You then repeat the process for the remaining files making sure you pick the correct matching file in the CRM_UploadFiles\ FILE TYPE folders.  When you have added all the glyphs files, you should have something like:

Finally we need to add the JavaScript files in the JS folder.  Add the four files to your solution, set the file type to Script and you should have something like:

This completes the creation of your CRM Web Resource Solution.  The solution should now have approximately 87 items, depending upon the version of Kendo UI you used and the themes included.

Creating a distributable managed solution

If you are planning on using the Kendo UI Solution in other CRM organizations, you should export the solution as a managed solution and import into the other organization where you need it.  Keep in mind that there are license requirements for Kendo UI component distribution, so make sure have that part taken care of.

Here are the steps needed to create the managed solution:

1. Go to Settings –> Solutions, and locate the Kendo UI Solution you just created.

2. Click on the Export button.  You should have published your solution already, so just click NEXT. When prompted to export system settings, click NEXT again. You will see a Package Type prompt as shown below:

3. Select Managed and click Export.  Wait for the prompt shown below:

4. Click on Save As and enter a suitable name for your managed solution.  I suggest you specify ‘Kendo UI’ with a  version number as well as the CRM version it is exported from and the word managed in the file name you give it.  The managed solution file I created is named:

crmXtra_KendoUI_Framework_Managed_2017_1_223_target_CRM_7.0

Using Kendo UI with CRM Web Resources

Please refer to the following post for an example on how to reference your Kendo UI web resource solution;

Building a Kendo UI Grid Application for Dynamics CRM 2015