Making ASP.NET pages look like MSCRM

(This is a repost of the content which was previously available on the IW community site)

Microsoft CRM supports many customizations, some of them are simple (adding a field) while others (also simple to do) actually allow you to embed other web pages view IFrames or add new buttons to the tool bar or the links on the left hand side of the window. This is great as part of the ability to link pages in is that CRM automatically passes various parameters to the web page that is being referenced, 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 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 shipped a sample in the SDK for you. The problem is this is a HTML page and when converting to ASP.NET you will hit a few problems. However it is a simple 9 quick steps to get it right. So let's get into how to make your ASP.NET page look like Microsoft CRM.

1. Once you have loaded your project (I am assuming you are using a new asp.net page which 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.
2. Next drag the CSS file from the solution explorer onto the default.aspx (I am assuming that Visual Studio is in design view and not source view). If you get this right the background will go that lovely light blue.
3. Next open the sample html page (CRM SDK\sdk samples\stylesheet\sample.htm) in your favorite text editor and copy the content from opening body tag to closing body tag. Now switch VS to source mode and replace the asp.net pages content from opening body tag to closing body tag with the copied source.
4. When you try to switch back to design view you will get 11 errors. Thankfully it is easy to fix those. li>
5. The first fix is to add the runat attribute to the form tab and move it up two lines so it appears above the table tag. So it looks like the image here.
6. Next move line 245 to after the closing table tab on the following line so it looks like the image here.
7. Now remove line 15 (should just have </td> in it).
8. You should be able to get back to design view! But you will be greeted by something not very CRM like still
9. Lastly switch back to source and go to line 3 (should start with: <!DOCTYPE) and remove it. This line controls if Internet Explorer works in standards compliant mode or quirks mode, which is a non-standard rendering method. As CRM works solely on IE on Windows, there was no need for compliancy and thus the designers didn't include this and used non-compliant tricks to improve the UI, like tables expanding to but not exceeding 100% of screen height and the gradient effects. <

If you now switch into design mode you will see the pretty CRM pages. What I would suggest is to now hit Ctrl+E,D in source mode which will format the HTML to be neat (great little feature in VS 2005 this is. It also works on code and XML) and 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.