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.
13 comments:
Brilliant, Tanguy!
Nice one - it looks really great Tanguy!
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.
Argh... I guess the grid is not so full featured... I forgot to manage linked entities! Well, I guess there will be performance issue if a lot of different entities are linked, indeed. But, using new features from ur12 (partial metadata retrieval), it should be possible to reduce the performance issues.
Anyway, I guess I still have some works on the grid :)
Nice grid (all of your tools are great!) - we had to create a similiar grid for a client. Our grid also incorporated in-line editing.
http://www.wipfli.com/BlogPost_MCRM_blog_05_01_12.aspx
You are a true CRM wizard!
Keep it up! :)
/Jonas
PS - see you in Rome?
There is an unsupported approach to do this: http://guruprasadcrm.blogspot.ru/2011/12/display-fetchxml-in-iframe-in-crm-2011.html
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.
Dear Tanguy,
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
JSD: I wasn't managing linked entities but do now. You are right, there could be some performance issue. For my grid, I display logical name first then query metadata async to display the displayname.
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.
Nice work
This might be a silly question, but what is the business use case to have a Web Resource to replicate a View Grid? Why not just add a sub-grid to a form?
Hi Massimo, did you already try to write a web resource that should present a list of records? If you did, then you know the pain it is to query the data and provide a user interface similar to Dynamics CRM. Of course, it is useless on the form itself.
Hi Tanguy,
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
Hi, can you send me an email to tanguy92[at]gmail[.]com?
Post a Comment