Using LESS to parameterize your CSS used in web resources in Dynamics CRM

Hi all!

It has been a while that I have written something. So today I want to present to you an approach that I used to parameterize bootstrap styles CSS that we were using as a web resource embedded in a form in Dynamics.
So the problem I addressed was that since the "Themes" in Dynamics CRM are easily updated from the Dynamics GUI itself, all other web resources that were aligned with the existing color scheme of Dynamics now looked out of place as their CSS would not automatically align to the changes in the Themes from the GUI. So we needed to find a solution that would allow us to easily update the CSS colors when such updates were being made. Since we were using the Bootstrap CSS library to style our web resources, it would be a lot of effort and prone to error if we tried to manually update the CSS (by doing a find and replace) whenever such a change was made.
So here we used LESS to use variables straight into the CSS!

The below snapshots present the starting few lines of the Bootstrap LESS code where we declared the variables and the darken function to be used for the colors throughout the generated CSS


The next snapshot shows how the variables are used in the Bootstrap LESS code itself


The best place to learn the basics of LESS (this article only considers a very trivial use case) is here.

Once the Bootstrap LESS file is ready we can use any LESS "compiler". I have used the LESSC NPM package to convert the LESS code to CSS, which I then updated to Dynamics as a web resource. Details on usage and how to install the package can be found here.

The magic command (from the above link) is (assuming LESSC is installed globally):

lessc Bootstrap.less Bootstrap.css

which compiles the Bootstrap LESS file with all the variables to the Bootstrap CSS file with the variables replaced by the values or results of the functions as specified. The generated CSS can now be replaced in the web resources of Dynamics, possibly after minification with some tool. We can also use grunt to automate the tasks of compiling the LESS to CSS and then minifying the CSS, all using a single command!

Hope this helps and makes your life easier customizing the look and feel of Dynamics CRM

Cheers!

JavaScript code to validate dates in dd/mm/yyyy format

Hi all,

Here is a JavaScript function that I developed in order to validate whether the entered date is correct when they are entered in the dd/mm/yyyy format:

There are a few validations like start year, leap year (when it is a multiple of 100) that have not been performed assuming that the dates entered will be between 1950 and 2100. However, they can also be added if required. Let me know if you have any comments on the code or have any suggestions.
Thanks!

Generating traces to debug issues in Outlook for Dynamics CRM

Sometimes getting the error reason for errors in Outlook for Dynamics CRM can be tricky and non-trivial. Please follow the below steps to obtain the error trace in case any error occurs in Outlook for CRM:

• In the machine where Outlook is installed please install CRM SDK. For example you can obtain CRM 2015 SDK from here.
• Find the Diagnostics application from within the SDK as shown below:

• Double click and open the application and select the below option as shown (keep the level to error) and click on save

4      Perform the operation from within Outlook and let the error take place

5

•          In the background the trace will be generated in the below location (for Windows >= 7)

%%USER_PATH%%\AppData\Local\Microsoft\MSCRM\Traces

Ex:

C:\Users\johndoe\AppData\Local\Microsoft\MSCRM\Traces

Please note AppData might be hidden by default, please unhide it first to reveal the folders underneath.

• Please open the log from the above location and verify it contains some meaningful text.In case it does not contain any, please update the Level to Verbose in step 3 and perform the next steps again

• Once a meaningful trace file is generated in step 6, please disable the option selected in step 3, so that the local storage does not get overwhelmed with log files (especially when the trace is Verbose).