Making ASP.NET pages look like MSCRM

Published on 17 March 2008 Estimated reading time: 3 minutes

(This is a repost of the content which was previously available on the IW community site.) Microsoft CRM supports many customizations—some of them simple (adding a field)—while others (also simple to do) allow you to embed other web pages via IFrames or add new buttons to the toolbar or the links on the left-hand side of the window. This is great because part of the ability to link pages in CRM is that it automatically passes various parameters to the referenced web page, including the GUID and type of object. This means if you build a web page, your web page gets context information for free (no weird JavaScript needed to navigate to it).

The problem seen at many customers is that these pages look nothing like CRM. This would make sense if you are embedding something like Live Maps, but if you are building the pages yourself, why not make them look like CRM? This improves the user experience significantly and really isn’t hard to do. In fact, Microsoft has included a sample in the SDK for you. The problem is that this is an HTML page, and when converting to ASP.NET, you will hit a few issues. However, it’s a simple 9-step process to get it right. So let’s dive into how to make your ASP.NET page look like Microsoft CRM.

Once you have loaded your project (I’m assuming you are using a new ASP.NET page that has had nothing done to it), navigate to where you have extracted the CRM SDK, and under it, you will find a style sheet you will need. It can be found in: CRM SDK\sdk samples\stylesheet\template.css Add this to your project.
Next, drag the CSS file from the solution explorer onto the default.aspx (I’m assuming that Visual Studio is in design view, not source view). If you get this right, the background will turn that lovely light blue.
Next, open the sample HTML page (CRM SDK\sdk samples\stylesheet\sample.htm) in your favorite text editor and copy the content from the opening <body> tag to the closing </body> tag. Now switch VS to source mode and replace the ASP.NET page’s content from the opening <body> tag to the closing </body> tag with the copied source.
When you try to switch back to design view, you will get 11 errors. Thankfully, they’re easy to fix.
The first fix is to add the runat attribute to the <form> tag and move it up two lines so it appears above the <table> tag. So it looks like the image here.
Next, move line 245 to after the closing </table> tag on the following line, so it looks like the image here.
Now, remove line 15 (it should just have </td> in it).
You should now be able to get back to design view! But you’ll still be greeted by something not very CRM-like yet.
Lastly, switch back to source mode and go to line 3 (it should start with <!DOCTYPE>), then remove it. This line controls whether Internet Explorer operates in standards-compliant mode or quirks mode—a non-standard rendering method. Since CRM relies solely on IE on Windows, compliance wasn’t necessary, and thus the designers used non-compliant tricks to improve the UI, like tables expanding to but not exceeding 100% of screen height and gradient effects.

If you now switch to design mode, you’ll see the pretty CRM pages. What I would suggest is to now hit Ctrl+E,D in source mode, which will format the HTML neatly (a great little feature in VS 2005; it also works on code and XML). Save this page somewhere on your machine as a base so next time you don’t need to do the cleanup to get it to work.