Merging Javascript for Dynamics CRM Development

SOC (Separation of Concerns) is one of the best Design Patterns that I love so much. Using this design pattern, I found it easier for me to identify bugs in my code.

When developing Javascript code on Dynamic CRM, I will separate my concerns into three parts:

  1. Events: Bridge from Dynamic CRM event to our Javascript Business Logic.
  2. Business Logic: Business logic related to your application.
  3. Data Access: Handling data access.

The goal of this blog-post is to show you how we can merge multiple JavaScript files into a single file.

javascript-soc

After build, the content will merge into one file like this:

result-soc

This is the steps that you need to do:

1) On your project, add reference to AjaxMin nuget. After install the nuget reference on your project, put <Import Project=”ajax-min.targets” /> on your .csproject

csproj-soc

2) After installed the reference, create a new file with the name ajax-min.targets on your root project. (Change the output folder to your Solution Directory folder for finding the result)

<?xml version="1.0" encoding="utf-8"?>
<Project xmlns="http://schemas.microsoft.com/developer/msbuild/2003">
<UsingTask AssemblyFile="..\..\Libs\AjaxMinTask.dll" TaskName="AjaxMin" />
<UsingTask AssemblyFile="..\..\Libs\AjaxMinTask.dll" TaskName="AjaxMinBundleTask" />
<UsingTask AssemblyFile="..\..\Libs\AjaxMinTask.dll" TaskName="AjaxMinManifestTask" />
<UsingTask AssemblyFile="..\..\Libs\AjaxMinTask.dll" TaskName="AjaxMinManifestCleanTask" />
<ItemGroup>
<AjaxMinManifests Include="**/*.ajaxmin.xml" />
</ItemGroup>
<!-- target to clean output for all ajaxmin manifest files in the project -->
<Target Name="CleanAjaxMinManifests" AfterTargets="Clean" Inputs="@AjaxMinManifests"
Outputs="@(AjaxMinManifests->'%(FullPath).cleantrigger')">
<Message Text="Cleaning AjaxMin Manifests" Importance="high" />
<!-- change folder name to be same as CRM project folder location -->
<AjaxMinManifestCleanTask
OutputFolder="$(SolutionDir)result-directory-folder"
Manifests="@(AjaxMinManifests)" />
</Target>
<!-- target to build all ajaxmin manifest files in the project -->
<Target Name="BuildAjaxMinManifests" AfterTargets="Build" Inputs="@AjaxMinManifests"
Outputs="@(AjaxMinManifests->'%(FullPath).buildtrigger')">
<Message Text="Processing AjaxMin Manifests" Importance="high" />
<!-- change folder name to be same as CRM project folder location -->
<AjaxMinManifestTask ProjectDefaultSwitches="-define:$(DefineConstants)
$(AjaxMinProjectDefaultSwitches)"
Configuration="$(Configuration)"
TreatWarningsAsErrors="false"
OutputFolder="$(SolutionDir)result-directory-folder"
Manifests="@(AjaxMinManifests)" />
</Target>
</Project>

result-directory-folder is a folder that contains finished files. So you need to change this configuration to the Folder that you want (Folder is must inside the Solution Folder).

3) The next step is to make a configuration file. For instance, in my example, I want to merge all javascript in the LimoPayment folder, then I will create _manifest.ajaxmin.xml in the root of that folder.

<?xml version="1.0" encoding="utf-8" ?>
<root>
<arguments config="Debug">-ignore:ALL -debug –pponly</arguments>
<arguments config="Release"></arguments>
<output path="your-javascript-file-name1.js">
<input path="..\Namespace.Base.js"/>
<input path="_namespace.js"/>
<input path="Data.js"/>
<input path="Business.js"/>
<input path="Event.js"/>
</output>
<output path="your-javascript-file-name2.js">
<input path="..\Namespace.Base.js"/>
<input path="_namespace.js"/>
<input path="Ribbon.js"/>
</output>
</root>

Using this method, when you want to get the result. You only need to build and open your result folder to see the result.

Benefit using this method:

  1. More focus when developing a feature.
  2. Reduce scrolling if your Javascript is very long (we break it into three functions: DataAccess, Business, and Events).

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s

This site uses Akismet to reduce spam. Learn how your comment data is processed.