Category Archives: Uncategorized

Doing CSS the right way with Dynamics CRM

One of a few practices I see when people customize Dynamics CRM that usually comes back to haunt them during update rollups or upgrades is directly referencing the CSS files and classes that come with the product.  It’s an innocent enough mistake, but the CSS files which ship with Dynamics CRM are intentionally not documented in the SDK.  Directly referencing them is not supported.  The Dynamics CRM team reserves the right to change them at any point, just like they reserve the right to change the structure of their html.  That’s why direct HTML DOM manipulation of the UI the server creates isn’t supported either.  Of course, you can manipulate the DOM of the web resources you author as much as you like.  If you think about it, this makes perfect sense.  I am not aware of any product out there that shield you from future changes if you hardcode your extensibility code to html/css structures.  So what should you do?  Well, you should create your own CSS files which mimic the CRM look and feel and reference those from your web resources.  That way, when anything changes with the Dynamics CRM codebase, you are shielded from any ripple effect.  You’re customizations may look out of place if major colors or fonts change.  However, if you structure your CSS right (i.e. don’t copy paste, reuse), then you should be able to adjust to those changes with less impact.  Ok, but how?  Here’s a great article from the Dynamics CRM in the Field blog which walks you through the fundamentals:

http://blogs.msdn.com/b/crminthefield/archive/2014/07/03/css-style-reference-using-developer-tools.aspx

@devkeydet

Capturing a signature in a CRM form using html5

Scenario:

“I have a touchscreen.  I want to capture a signature in a Dynamics CRM form.  If the signature hasn’t been saved, then I want to allow a user to provide their signature.  The next time the record is loaded, after the signature has been saved, I want to load an imagine of the signature to prevent ‘resigning’.”

This is a relatively simple thing with Dynamics CRM thanks to web resources and Xrm.Page.  The general concept is to embed an html web resource in the form that captures the signature using the html5 canvas (preferably using an existing control vs. low level canvas programming).  Before saving, you want to copy the data from the canvas control into a Multiple Lines of Text type hidden field on the form so the data is stored when the record is saved.  Finally, when the web resource is loaded, you want to check if the field has data in it.  If so, you can assume a signature was previously recorded and just show the data as an image. 

Here’s the entire source code for a basic implementation:

1 <!DOCTYPE html> 2 <html xmlns="http://www.w3.org/1999/xhtml"> 3 <head> 4 <title>Signature</title> 5 <script type="text/javascript" src="https://ajax.aspnetcdn.com/ajax/jQuery/jquery-2.1.1.min.js"></script> 6 <script src="scripts/jSignature.min.js"></script><!-- download from http://willowsystems.github.io/jSignature/#/about/ --> 7 </head> 8 <body> 9 <img id="sigImage" alt="This is an image of the persons signature." style="display:none"/> 10 <div id="sigPanel" style="display:none"> 11 <div id="signature"></div> 12 <button id="clear">Clear</button> 13 </div> 14 <script type="text/javascript"> 15 $(function () { 16 var sigImage = $("#sigImage"); 17 var sigPanel = $("#sigPanel"); 18 var sig = $("#signature"); 19 20 var Xrm = window.parent.Xrm; 21 var sigBase64Attribute = Xrm.Page.getAttribute("msftpoc_esigbase64"); //replace this with your hidden "multiple lines of text" field with a max length of 1,048,576 22 var sigBase64Value = sigBase64Attribute.getValue(); 23 24 sig.bind("change", function (e) { 25 sigBase64Attribute.setValue(sig.jSignature("getData")); 26 }); 27 28 29 if (sigBase64Value != null) { 30 sigImage.css("display", "inline"); 31 sigImage.attr("src", sigBase64Value); 32 } else { 33 sigPanel.css("display", "inline"); 34 sig.jSignature(); 35 $("#clear").click(function() { 36 sig.jSignature("clear"); 37 }); 38 } 39 }); 40 </script> 41 </body> 42 </html> 43

All you have to do is add this web resource to your form (make sure you read instructions in the comments) and update the code to reference your field name.  A few things to note:

  • There are many controls out there, but I chose http://willowsystems.github.io/jSignature/#/about/.  It met all my requirements.  Feel free to use another.
  • The hidden field on the form for my entity is called msftpoc_esigbase64 and uses the Multiple Lines of Text type of Dynamics CRM.  Make sure to change the code to match your field name.
  • For simplicity, I chose to use the default data format of the jSignature control which is a base64 encoded string (hence my field name).  Since base64 encoded strings can be big, I set the max length field to 1,048,576 which is the largest Dynamics CRM allows.  The jSignature control supports other formats.  You could clearly improve on performance of this sample by using one of the smaller string formats.
  • My code doesn’t handle save/autosave side effects.  I simply copy the signature date to the hidden field using the change event of the jSignature control.   A more robust implementation would perhaps wire up to Xrm.Page.data.entity.addOnSave() and intelligently determine whether to copy the data into the field based on save state.  You might also want to consider switching to the image after as successful OnSave with signature if that makes the most sense for your requirements.  I’ll leave that up to you as an exercise for improvement.

Here are a couple screenshots for a quick visualization.

Before Save (signature capable canvas with clear button):

image

After Save (fixed image of signature):

image

@devkeydet

Tools to make sure you are writing upgradeable CRM customizations

With the release of CRM 2011 UR12, which introduced cross browser support, and the release of CRM 2013, there were two tools made available to you to check both your JavaScript code and your server side code for unsupported customizations:

Microsoft Dynamics CRM 2013 Custom Code Validation Tool

Legacy Feature Check Tool

There’s an excellent blog post about these tools with video walkthroughs here.

I’ve spoken with many customers/partners lately about these tools in the context of verifying where they stand for upgradability and creating a remediation plan for any unsupported customizations that might break after upgrading.  One of the things I have also been emphasizing is how these tools can continued to be used in your development cycles to run a sanity check scan on new customizations.  By introducing this approach into your testing process, you decrease the probability you are implementing unsupported customizations that can break during upgrades.

@devkeydet

MSDN Magazine Article: Building Government Business Applications with Microsoft Dynamics CRM

I happy to share that the article Andy Schultz (@andrewbschultz) and I coauthored for the MSDN Magazine – Special Government Issue,  Oct 2013 has been published.  You can read the entire issue here:

https://aka.ms/msdnmaggov

The article we wrote is titled Building Government Business Applications with Microsoft Dynamics CRM and is available here:

https://aka.ms/msdngovbizapps

We set out to write an article that would not only appeal to MSDN Magazine’s core audience, .NET developers, but one that would also resonate with Technical Decision Makers (TDMs).   While this article is in MSDN Magazine, it is intentionally not deeply technical.  The article is an attempt to represent the narrative we typically share with our US Public Sector customers and partners about why they should consider building their business applications on Dynamics CRM. 

@devkeydet

Debugging CRM web resources without ever deploying them

UPDATE: The steps explained below don’t work with CRM 2013.  However, Scott has a blog post which shows you how to get it working again:

http://develop1.net/public/post/Fiddler2-The-tool-that-gives-you-Superpowers-Part-2.aspx

One of my last posts was sharing how I use Visual Studio to debug CRM web resources:

http://blogs.msdn.com/b/devkeydet/archive/2013/06/19/eureka-f5-debugging-of-crm-javascript-web-resources.aspx

This approach was one of those discoveries that makes us developer types get a little excited because it allows us to do something we do repeatedly in a much more efficient fashion.  I just came across another one of those EUREKA moments thanks to Scott Durow (@scottdurow) and some his promising new http://www.sparklexrm.com project. 

BTW, Scott’s the man behind Ribbon Workbench for Dynamics CRM.  It’s the best Ribbon editor out there in my opinion.  I digress…

I was reading through http://www.sparklexrm.com/s/Tutorials/SetUpNewProject.html and discovered a little gift from Scott at the end of the walkthrough.  Steps 9-14 explain how to use www.fiddler2.com to let you debug changes to web resources without ever having to deploy them to Dynamics CRM.  How?  Steps 9-14 explain it.

Combine this with my post on F5 debugging from Visual Studio and you nearly have web resource developer productivity nirvana.  I just tried combining the two approaches.  It works beautifully!  I was able to make changes to JavaScript, hit F5, debug right in Visual Studio, and repeat over and over again.  I did this all without ever having to deploy the JavaScript file to the server.  Because of it, I was able to iterate on my changes in a fraction of the time CRM developer typically spend.  Try it yourself!

@devkeydet

EUREKA: F5 debugging of CRM JavaScript web resources

Scenario:

“Internet Explorer F12 JavaScript debugger is great, but I use Visual Studio.  I want to be able to set breakpoints in my JavaScript web resources which I author in Visual Studio, then hit F5 on the keyboard or Debug->Start Debugging from the menu or the Play Button on my toolbar just like I do with all other types of development in Visual Studio.  Visual Studio should then launch the right CRM url, attach its JavaScript debugger, and my breakpoints should be hit.”

This is the #1 piece of feedback I hear from the customers/partners/ISVs with whom I work.  I’ve always told people it’s not possible.  I just realized how wrong I am.  Given that I’ve used every version Visual Studio since it was first released, I am a little embarrassed to say I just had this “A HA!” moment.  Better late than neverSmile

As I mentioned in this post, I have stopped using the Developer Toolkit for Microsoft Dynamics CRM for web resource authoring in favor of the CRM 2011 Web Resource Linker/Publisher.  Note, I still use the developer toolkit for plugin / workflow activity authoring.  As I state in the post about the web resource linker tool, since it allows you to keep all of your web resources in a standard web project in VS, you get all the benefits of web project capabilities including other addons that work with web projects.  It’s this premise which brought me to my “A HA!” moment.  Below is a video walkthrough of getting this scenario working:

 

You can install the jQuery Code Snippets from:

http://visualstudiogallery.msdn.microsoft.com/577b9c03-71fb-417b-bcbb-94b6d3d326b8

@devkeydet

North 52 Formula Manager = WOW

DISCLAIMER: This is my opinion.  I get nothing from the makers of this addon for expressing my opinion. 

I’m a developer at heart.  I love writing code.  But I also abelieve in the “don’t write code unless you have to” philosophy.  Well, I finally got around to playing around with North 52 Formula Manager and watch most of the YouTube Videos.  All I can say is WOW.  This addon is the answer to so many “Why can’t you do that with CRM without writing code?” questions.  Frankly, I can’t think of any CRM/XRM app that WOULDN’T benefit from this addon.  I also can’t rationalize writing code when I know I can use this addon to implement so many scenarios faster.  You owe it to yourself to take a look at this addon.  Review their site and watch the videos.  I suspect you won’t be disappointed you did.  Even with this addon, there will still be times when you will need to write JavaScript and .NET plugin code.  However, the scenarios will be far fewer.

@devkeydet

Convergence 2013 Recordings

As Girish says in his post:

“If you didn’t attend Convergence 2013, you can still watch the recording of the keynotes and breakout sessions by registering for the Virtual Convergence. Best part is that it is completely free!”

More details here:

http://blogs.msdn.com/b/girishr/archive/2013/04/17/watch-convergence-2013-session-recordings-for-free.aspx

@devkeydet