Full featured CRM grid in HTML/JS
In last December, I was asked to write a web resource to display a grid with CRM records. I was quite frustrated because I didn’t succeed to manage some grid features easily like fixed header with horizontal scrolling among others. I delivered a fixed table which was not so bad but absolutely not something that look like the application grid views.
So I decided to work harder to find a way to do this CRM style grid view. After some works (almost two full days), I have succeeded to create a full featured CRM grid view by using only JavaScript.
Here is a screenshot:
And this is how I can create a grid view from only a div in a HTML page
<html>
<head>
<title>Page de test</title>
<script src="json2.js"></script>
<script src="jquery.js"></script>
<script src="XrmServiceToolKit.js"></script>
<script src="sdk.metadata.js"></script>
<script src="table.js"></script>
<script src="scripts.js"></script>
<script src="../../ClientGlobalContext.js.aspx"></script>
<link href="style.css" type="text/css" rel="stylesheet"/>
</head>
<body onload="LoadPage();">
<input type="button" onclick="display();" value="Afficher"/>
<div id="baseDiv">
</div>
</body>
</html>
And using this script
function LoadPage() {
MscrmTools.Table.Height = $(window.document).height() - 200;
MscrmTools.Table.Width = $(window.document).width() - 50;
MscrmTools.Table._minWidth = 500;
MscrmTools.Table._minHeight = 300;
MscrmTools.Table.CurrentEntity = "account";
var layout = '<layoutxml>';
layout += '<grid name="resultset" object="1" jump="name" select="1" icon="1" preview="1">';
layout += '<row name="result" id="accountid">';
layout += '<cell name="name" width="300" />';
layout += '<cell name="accountnumber" width="100" />';
layout += '<cell name="primarycontactid" width="150" />';
layout += '<cell name="address1_city" width="100" />';
layout += '<cell name="telephone1" width="100" />';
layout += '<cell name="emailaddress1" width="200" />';
layout += '</row>';
layout += '</grid>';
layout += '</layoutxml>';
MscrmTools.Table.SetLayoutXml(layout);
MscrmTools.Table.CreateTable(window.document.getElementById("baseDiv"));
window.document.body.onresize = MscrmTools.Table.Resize;
}
function display() {
var fetch = '<fetch mapping="logical">';
fetch += '<entity name="account">';
fetch += '<attribute name="name"/>';
fetch += '<attribute name="accountnumber"/>';
fetch += '<attribute name="primarycontactid"/>';
fetch += '<attribute name="address1_city"/>';
fetch += '<attribute name="telephone1"/>';
fetch += '<attribute name="emailaddress1"/>';
fetch += '</entity>';
fetch += '</fetch>';
MscrmTools.Table.SetFetchXml(fetch);
MscrmTools.Table.BuildLines();
}
I won’t show the table.js as I’m still considering options to deliver this script to the community, but for information, it’s a 800 lines script of 38KB.
As I said before, it’s a full feature grid:
- Define fetchXml and layoutXml
- Fixed header with horizontal and vertical scrolling
- Paging (the script allows to define Records per page)
- Records selection count (with total items count)
- Grid refresh
- Column behavior:
- order (by clicking on the column header)
- resize (drag and drop column separator or double click on it)
- order (by clicking on the column header)
- row selection (single or multiple using Ctrl or Shift hotkeys, by row selection or checkbox ticking)
- Lookup allows referenced record to be opened
- Double click open selected row
- Click and Double Click handler to allow developer to add its own behavior
And you? What do you think about this grid? How do you deal with this need to create CRM grid views?
[UPDATE]
With this post comments, I noticed that I wasn’t managing link entities attributes. It is done now! And also, I won’t manage column filtering, which seems a little bit too complicated for me.
Comments
How do you handle fetching the metadata for column display names based on the fetchxml - I've had issues with linked entities - where you have to parse the fetchxml to find which entity meta data you need.
Also - there is a performance hit with every request to get metadata.
Anyway, I guess I still have some works on the grid :)
http://www.wipfli.com/BlogPost_MCRM_blog_05_01_12.aspx
Keep it up! :)
/Jonas
PS - see you in Rome?
This is a CRM 2011 adoption of a famous CRM 4.0 Fetch Viewer. I believe it's still the only way to create really full featured and fast grid because it's based on client-server architecture and utilizes private API's.
your article is very impressiv. I would like to have a deeper look into your implementation, because i`am looking for something similar. Would it be possible to get your JS?
Thanks a lot!
best Regards
Martin
J. Eldredge: It's fine, but I really wanted a grid that fits perfectly CRM 2011 design.
Jonas: Nop, sorry, I won't be in Rome
Artem: Great solution but as you said, it is not supported. My grid just use components that are not part of CRM (except for images and icons) and is trully supported
Martin: I'm still not sure how to release this script (free or not) and so, won't provide it for now.
From the screenshot and the easy setup I understand your very nice work.
I have broken functionality in an application I have developed for crm online (by UR12 upgrade) using a standard CRM SubGrid and some unsupported jscode. Your solution is exactly what need (and sure do not want to write my own grid) to use as a web resource.
What kind of deal can we do?
BR,
Jouko
-The occurrence of .attachEvent( was located 1 time(s) in this web resource.
-The occurrence of crmGrid was located 1 time(s) in this web resource.
I have sold the grid once so I can't release it freely to the community...
If you could be interested to buy it, send me an email to tanguy92[at]gmail[dot]com
can you share the code ?
If you are interested to pay for it instead of trying to write your own, contact me on tanguy92[at]gmail[dot]com