In this post (it’s been a while!) I’m looking at building a custom html page (ISV hosted or otherwise) that looks as close as possible to the CRM lookup dialog. This will allow us to provide our users with a seamless experience when moving from OOB functionality to custom web pages as was needed on a recent project.
For those that would prefer to skip the how and why and just get the code it’s available on github. Simply plug your data into lookupForm.js along with optional actions for the buttons and away you go. How you choose to get the data into the viewModel is entirely up to you.
This is what we’re trying to reproduce, but outside CRM.
Unfortunately there aren’t any stylesheet or html resources available in the SDK to help us achieve this. There are a set of articles that discuss UX guidelines which are worth a read but none of this information is backed up by reusable templates.
What I needed was a stripped down version of the CRM lookup into which I could add my own code. I found a project created by Darren Lui on Codeplex that is essentially a screen scrape of the HTML and dependent stylesheets for the common forms. It’s a great start but it was missing a number of features I wanted.
Required Features
Reusable
The pages in the template project are a copy of the actual html generated by CRM and therefore it's a bit tricky to work out exactly where you need to inject your own content and markup into this. CRM 2011 relies heavily on tables for layout so any html purists out there may want to look away now.
Data Separation
I didn't want to start doing string concatenation to build my html from the data. I wanted to be able to provide the dialog with my own data without having to touch the html and let it build out the page for me. Ideally this should be achieved without the dependency on a server-side framework (ASP.NET). To achieve this I used knockout.js, the MVVM JavaScript framework written by the incredibly smart Steven Sanderson. It allows you to produce a view model in JavaScript and bind this to your html through declarative bindings using the html 5 data-* attributes (don't worry they're fully backward compatible to IE6).
Lightweight
The stylesheets used in CRM are quite large and take dependencies on several server-side *.htc files (global.css is 245k incl. all the CSS sprites).
Strip out the html we don't need from Darren's template
This was a just a case of stepping through the code bit by bit removing sections and checking the effect of their absence. Not too difficult just quite time consuming. There are many nested tables used in CRM along with custom attributes and as I’ve already mentioned a lot of them exist to provide the rich user experience that I’m not trying to replicate here. Including the knockout bindings and some superfluous commented html the final page is approx. 172 lines rather than the original 492. The size isn’t the issue but the less unnecessary html we have in there in the first place the easier this is going to be for reuse and maintenance by other developers.
Add the declarative bindings (Yes, it's a screenshot!)
The new container-less bindings available in knockout were used for generating the rows of data dynamically. The much pared down html for generating the data rows is shown below.
Create our View Model in a separate JavaScript file
I created this so that each area of the page that requires data or behaviour is configured on the view model. The code will hopefully be self-explanatory but essentially the column headings are dictated by the headings property, the data rows are in the entities property and the actions bound to the click of each button are bound in the actions object. At the time of writing, the disabling or hiding of buttons isn’t implemented but this will be easy to do using knockout and may well have appeared in the code by the time you read this.
Sort out the StyleSheets
The dialog uses styles from the following stylesheets:
_common/styles/fonts.css
_common/styles/global.css
_common/styles/theme.css
_common/styles/dialogs.css
_common/styles/select.css
_forms/controls/form.css
_forms/controls/controls.css
_controls/lookup/lookupdialogs.css
_grid/appgrid.css
These have all been parsed and the minimum styles required for the dialog have been exported to a single file called lookupForm.css. To reduce the number of dependent files further I’ve also base 64 encoded the button background images used so they are in-lined in the CSS. I’ve also removed all references to the CRM *.htc files.
The end result
Next Steps
- Bundle this up as a CRM 2011 Solution.
- Configurable or dynamic column widths based on the data in the column.
- Due to the removal of all the htc resources the horizontal scrolling of the column headers doesn't work. I need to look at the best way to re-implement this feature.
Summary
I’m not going to spend much more time on this as its application is pretty specific. In using it you’d need to consider the affect if CRM styles changes. It’s only been tested in IE which is fine at the moment but when the 2012 Q2 rollout drops with support for Chrome, Firefox and mobile you’ll need to consider the effort involved in updating this solution to work in those browsers. Having said this hopefully it will prove useful to others.
Addendum
As I published this I’ve also added the ability to show or hide the checkbox and define an image for each row.