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:

image

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)

  • 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

Unknown said…
Brilliant, Tanguy!
Scott Durow said…
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.
Tanguy said…
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 :)
J. Eldredge said…
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
Jonas Rapp said…
You are a true CRM wizard!

Keep it up! :)

/Jonas

PS - see you in Rome?
Artem Grunin said…
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.
Unknown said…
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
Tanguy said…
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.
Massimo said…
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?
Tanguy said…
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.
Anonymous said…
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
Tanguy said…
Hi, can you send me an email to tanguy92[at]gmail[.]com?
ALozadaBlog said…
It's sad that in CRM2013 they took away the ONLOAD event on html tags.
Carlos Menezes said…
Hi,

I have got a question. I am new working with CRM and basically I don't have experience working with it. I would like to know for example if I possible to do something similar as "Lead" entity like a grid showing all the leads created + CRUD operations(create,read,update and delete).

I would like to achieve the following:

Create new entity called sms template, and have a grid showing all the SMS templates created adding CRUD operations. Apart of that add a new button try on Settings-> Template called "SMS Template", redirecting to grid of the SMS template. Is that possible to achieve in CRM 2011/2013? I am working with on promise CRM.

Please help me.

Thanks.
Anonymous said…
Hi ,Tanguy.you are really a briliant. I am a new one for DYnamic CRM. Recently I am using customer validation tool of CRM to validate my js code . There is some issue like below. Have you encountered these issue before? Do u have solution?

-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.
Joe said…
Hi Tanguy! Did you ever choose to make your editable grid available to the community? Or at least a sample of the table.js? :)
Tanguy said…
Hi Joe,
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
pravin said…
where i will get file table.js and scripts.js.
Tanguy said…
Pravin, can you send me an email to tanguy92[at]gmail[.]com?
Unknown said…
Keep up the fantastic piece of work, I read few blog posts on this web site and I believe that your site is real interesting and has lots of great information. ERP Software in Mumbai || System Software || CRM Software in Mumbai || MLM Software
Unknown said…
I really appreciate spending some time to talk about that, I believe firmly regarding this and so really enjoy understanding more about this kind of subject.This is also a very good post which I really enjoyed reading. It is not everyday that I have the possibility to see something like this. CRM Software || MLM Software in Mumbai || ERP Software || System Software in Mumbai
ronyvain said…
hi
can you share the code ?
Tanguy said…
as already mentionned in previous comments, I already sold the grid once, so I can't honestly provide it for free now...

If you are interested to pay for it instead of trying to write your own, contact me on tanguy92[at]gmail[dot]com

Popular posts from this blog

Use feature flags in your plugins

New XrmToolBox plugin : Import/Export NN relationships

Searchable Propery Attribute Updater