"Colourising" Microsoft CRM Grids

Wednesday, June 21. 2006

"Colourising" Microsoft CRM Grids

Recently I came up with a nice idea: what if we could shade the rows in grids?

I thought through it, and realised it was possible. Of course its not possible to make it automatically colourise the grid, at least not without editing the aspx pages and that would go well beyond the realms of the supported customisations.

Before we go further, please remember that this is not a supported customisation either as it involves searching/editing the html output, which Microsoft is well within its right to change at any time.

The code that does this is split into two bits. You could go ahead and add the "colourise" code to the isv.config.xml file, but i really hate editing that all the time

So instead, I use our "javascript include" function to pull across another javascript file.

Like so:


<Button Title="Colourise" ToolTip="Colourise active grid view"
Icon="/_imgs/ico_16_salesprocess_stage.gif" JavaScript="if(window.colourify==null){var x=new
ActiveXObject('Msxml2.XMLHTTP');x.open('GET',
'http://crmextensions/scripts/colourify.js',false);x.send('');eval(x.responseText);var
s=x.responseText.split(/\n/);var r=/function\s*([a-z_]+)/ig;for(var i=0;i&lt;s.length;i++){var
m=r.exec(s[i]);if(m!=null)window[m[1]]=eval(m[1]);}window.colourify=true;}colourify_status();"
Client="Web" />

That loads up the following script.

scripts/colourify.js

Click on a comment to hide it. Click here to show all comments.


/**

 * Colourify

 *

 * Alters the background colours of the active grid view.

**/

var colours = new Array

(

    "",

    "BAEAF0", "70D6D6", "8CD9FF", "CDEEF0",

    "E0FFFF", "67E6EC", "E6E8FA", "B0E0F0",

    "D1EEEE", "ADEAEA", "75A1D0", "BCD2EE",  

    "B9D3EE", "9AC0CD", "9FB6CD", "9BC4E2",

    "8FD8D8"

);

var highlight_colour = "E0A6C2";



/**

 * Colourise based on the status of the field

**/

function colourify_status ()

{



    /**

      * Locate the "type" of the grid. We use the blue title thing for that

    **/

    var t = top.frames[0].document;

    var type = t.getElementById('tdStageContextBar').innerText;



    /**

     * What type of grid are we colourising? We only support cases in this version.

    **/

    if (type == 'Cases')

    {

        var table = 'cases';               // the table name, for passing to the lookup script

        var col = 5;                        // the column position that our status is listed in

        var highlight = 'Not Started'; // status that we want to highlight to make it stand out

    } else

    {

        alert('We only support colourising Cases.');

        return;

    }



    // update the column to include the check box and icon

    col++;



    /**

     * Get our known case statuses. This page uses the Metadata Service to pull all the

     * possible status reasons out of the page. This ensures that the same statuses are

     * always the same colour.

    **/

    var x = new ActiveXObject("Msxml2.XMLHTTP");

    x.open('GET', 'http://crmextensions/lookup/statuses.aspx?table=' + table, false);

    x.send('');

    var s = x.responseXML.selectSingleNode('statuses');



    /**

     * Builds a "colourmatrix". That is, an array with Status => Colour

    **/

    var colourmatrix = new Array();

    for (var i = 0; i < s.childNodes.length; i++)

    {

        colourmatrix[s.childNodes[i].firstChild.text] = colours[s.childNodes[i].lastChild.text];

    }



    /**

     * Set the highlight colour

    **/

    if (colourmatrix[highlight] != null)

        colourmatrix[highlight] = highlight_colour;



    /**

     * Check to make sure that we're in the main CRM window. Abort if we can't find the grid

    **/

    if (top.frames[2].name != 'stage')

    {

        alert('Unable to colourise, not a standard layout.');

        return;

    }

    var d = top.frames[2].document;

    var grid = d.getElementById('gridBodyTable').lastChild;





    /**

     * Already colourised? Clicking again should turn it off, easiest way to restore the style

     * is to get the grid to refresh.

    **/

    if (grid.childNodes[0].colourised)

    {

        top.frames[2].window.crmGrid.Refresh();

        colourised = false;

        return;

    }



    /**

     * Loop through the grid rows and reset the background colour if its a known status.

     *

     * Also set the colourised flag on the row, a refreshed/clean grid won't have this set.

    **/

    var nextcolour;

    for (var i = 0; i < grid.childNodes.length; i++)

    {

        nextcolour = colourmatrix[grid.childNodes[i].childNodes[col].firstChild.innerText]

        grid.childNodes[i].style.backgroundColor = '#' + nextcolour;

        grid.childNodes[i].colourised = true;

    }

}

As you can see, it has limited application but can be useful for a "quick glance". Some shortcomings include not holding the colourised status through reloads, changing the grid page, resorting the grid, etc, as well as the loss of the blue "selected row", as you can see below this only comes up with a white font instead of black. This is also a basic prototype version. I'll extend it at some point in the future to be able to colourised based on owner, dates, or whatever columns are there

That's not a high priority for me at this point though, have a lot of "urgent" customisations to get done first.

I suppose I should show some screenshots of what this actually does..

Before

After

Enjoy!

-bok

PS. I've had several requests for the source to statuses.aspx. If you would like to see this leave a comment and I'll be happy to email it through, not going to post it here though as my C# is very basic - I've only been coding in it for 6 weeks

Update!

I get several requests a week for the content of statuses.aspx, and given that I don't actively work with Microsoft CRM anymore I figure it might just be easier if I post the source here. Feel free to comment if you need help, keep in mind though that I'll probably be a bit rusty by now


<%@ Page Language="c#" Debug="true"%>

<%@ Import Namespace="crm" %>

<%@ Import Namespace="metadata" %>

<%

    MetadataService service = new MetadataService();

    service.Credentials =

System.Net.CredentialCache.DefaultCredentials;



    // table

    string table = "";

    switch (Request.QueryString["table"])

    {

        case "cases":

            table = EntityName.incident.ToString();

            break;

        default:

            Response.Write("<error>Invalid Table specified</error>");

            return;

    }



    // get the data!

    StatusAttributeMetadata statuscode = (StatusAttributeMetadata)

service.RetrieveAttributeMetadata(table, "statuscode");

    Response.ContentType = "text/xml";



    Response.Write("<statuses>");

    ArrayList list = new ArrayList();

    foreach (StatusOption option in statuscode.Options)

    {

         Response.Write("<status><text>" + option.Description + "</

text><integer>" + option.OptionValue.ToString() + "</integer></

status>");

    }

    Response.Write("</statuses>");

%>

Posted by Robert Amos in Microsoft CRM at 02:19 | Comments (31)

Comments

Display comments as (Linear | Threaded)

Hello,

Very good job !!!

Just a question :

Can you post the code of statuses.aspx ?

'http://crmextensions/lookup/statuses.aspx?table='

Thks

#1 PAF on 2006-07-12 17:36 (Reply)

Hi,

var oXmlDoc = new ActiveXObject("Microsoft.XMLDOM");
oXmlDoc.async = false;
var url = 'http://crmextensions/lookup/statuses.aspx?p1=param1&p2=param2';
oXmlDoc.load(url);

If I try to load url with only one parameter its works, but if I load with more 1 parameter I have an error.

I think this issues provide from "&" . I attempted to replace by & or amp; but I have alway this error.

Thank for you help.

#2 Degremont (Link) on 2006-07-19 11:17 (Reply)

here i saw ur code.it's too gud. but i 'm new to crm team so i want to know how can i handle this code inside the server.
i'll be grateful to you if you give step bystep procedure here to solve this issue.

regards,

prakash

#2.1 prakash on 2008-05-23 12:51 (Reply)

hello,
I use your "Colourising Microsoft CRM Grids" code in my CRM 3.0. It works fine in IE but when I use it in Outlook, I have a javascript error.
Do you have any idea ? security in outlook ?
Thks

#3 PAF (Link) on 2006-07-21 12:57 (Reply)

Hi, This code won't work in Outlook. Sorry if I didn't make that clear. The reason is that the interface in the IE client is entirely rendered in HTML, meaning that you can use JavaScript to traverse it to get to the grid. In outlook, its all enclosed in Outlook. Meaning that the grid is rendered in a separate instance of IE, so it can't be touched

#3.1 Robert Amos (Link) on 2006-07-23 07:47 (Reply)

Do you have some sample of code for outlook ?
I want to do to work this in Outlook.

Thanks for your help

#3.1.1 PAF on 2006-10-12 15:16 (Reply)

Hello, Can you post the code of statuses.aspx ? 'http://crmextensions/lookup/statuses.aspx?table=' thank you

#4 Andrew on 2006-07-22 17:39 (Reply)

Hi, I'm thinking whether we can modify the grid view such as add .gif images in the column?

I need to do that because there's a user requirement which the customer wants me to show different gif images (like traffic lights) based on the status....

Do you have any idea?

#5 Steve Fu on 2006-08-01 13:54 (Reply)

Hello, can you sned a source of statuses.aspx

#6 Luke on 2006-08-05 13:25 (Reply)

Agree with Luke it would be great if you send me a code for statuses.aspx. You code looks very good & it has helped me in getting things right. Thank you very much.

#6.1 Mac (Link) on 2008-02-19 17:45 (Reply)

Hi

Nice tricks on this blog.
Is it possible to send me a copy of the source of statuses.aspx?
I want to test the solution in our system and change it a bit to make it work for our demands.

Thanks in advance!

#7 Jos B on 2006-08-06 15:54 (Reply)

Where can I add this code to see the colorized grid, Sorry for that but I am a business application Support and not a developer.

Thanks for your help.

#8 Shimoz on 2006-08-10 18:52 (Reply)

Hi, I tried work with CRM and your solution and I have a question. Would you send me a several advice how can I start write own code statuses.aspx. Maybe you can send me this code? Thanks for answer. Ann

#9 Ann on 2006-08-19 12:06 (Reply)

Could you please also send me your 'http://crmextensions/lookup/statuses.aspx?'.
Thanks a lot.

#10 Mike on 2007-03-04 18:41 (Reply)

Really this code'll be very much useful for us in colorising grids if u suggest me where to add this script .Is the calling function and function script both in ISV.CONFIG?

#11 prakash on 2007-03-13 14:36 (Reply)

Perpect article.Can you send me code of statuses.aspx please.

#12 Murat Selvi on 2007-04-07 15:01 (Reply)

Hello, this is exactly what i am looking for!! Is it possible to send me a copy of the source of statuses.aspx? Thanks for this excellent work

#13 Eduardo (Link) on 2007-08-31 12:35 (Reply)

can u send me status.aspx code

#14 ramanujam on 2007-10-16 08:29 (Reply)

Hi,

This might not be the best place to ask this question but you seem to have the best knowledge of the CRM Grids i can find! Excellent work!

Anyway i am desperatley trying to achieve the following but keep on comming up short...

When i click once on a record in a CRM grid i want to submit the oid of that record to another webpage.

Seems simple enough, but i cannot seem to maniplate the grid. It looks like you have managed to edit the onload to get you colourising fuctionality to trigger. How was this achieved?

Any help would be very appriciated.

#15 Nick M on 2008-02-13 16:28 (Reply)

wauw. this is great for a quick overview of statuses like:
-active
-in progress
-finished etc

#16 Michel (Link) on 2008-03-02 19:05 (Reply)

Hello , this could be useful.
Could you send me a copy of the source of statuses.aspx?

Thanks in advance : )

#17 Alan on 2008-03-07 15:08 (Reply)

please send to me "statuses.aspx" please please please

#18 eliran kalimi on 2008-05-01 01:06 (Reply)

I'm a crm developer and new to colourising grids in crm 3.0.
We are getting error like 'The path you have specified is not accessible" after we made all settings as you have given here.Actually we need to know about the url
'http://crmextensions/lookup/statuses.aspx' and all its procedures and also we need to know how to copy the code in server. I'll be thankful to you if you give all procedures to achieve the same.

#19 surendranath on 2008-05-22 12:56 (Reply)

Hi i am ms crm developer and new to colourizing the Grids...
after placing the code i am geting the error like "The Resourse cannot find the Specified path"
so where i have to place the colourify.js code inside the CRM 3.0 Server. And also i want to know How can i get the
statuses.aspx inside the server.
I will be thankfull to you if any one suggested for this....
Awaiting for reply
thanks in advance
Surendra

#20 Surendra on 2008-05-23 08:45 (Reply)

Hello,
Can you post the code of statuses.aspx ? 'http://crmextensions/lookup/statuses.aspx?table='
and
can u suggest me where i have to place colourify.js

thank you
NagaMohan

#21 NagaMohan on 2008-05-23 08:55 (Reply)

Robert - this looks fantastic. Wonder whther i too could get a copy of the statuses.aspx. Can I also confirm that I understand the process correctly? I create an entry in the isv.config file which is a button that loads up scripts/colourify.js when clicked. This in turn automatically triggers the script inside scripts/colourify.js to colour the lines of the Case grid based upon statuses that are actually used in the grid pane. If my understanding is not correct, please let me know. Also, is there anyway of getting this to trigger without actually clicking a button?

In any case thanks very much for posting this, I was starting to think that I would not be able to do anything with the grids.

#22 Saira on 2008-06-17 16:25 (Reply)

Hello, Can you post the code of statuses.aspx ? 'http://crmextensions/lookup/statuses.aspx?table=' thank you

#23 ajit on 2008-06-26 11:55 (Reply)

Hi
its really an excellent work. I too am trying to do the same same bt failing somewhere. Can u please send me the code for statuses.aspx .
Also plz specifiy is there any particular location to keep the javscript in crm server or client folder.

#24 SS on 2008-06-26 12:09 (Reply)

Please email me the statuses.aspx

Thx.

#25 Ajit on 2008-07-03 17:29 (Reply)

Can you please forward me the code for the statuses.aspx page

Thanks

#26 Damian on 2008-08-29 17:54 (Reply)

Please stop commenting asking for the source of statuses.aspx.

The source can be found in the "Playing With Grids" post.

#27 Robert (Link) on 2008-08-29 17:58 (Reply)

Add Comment

Name
Email
Homepage
In reply to
Comment	Enclosing asterisks marks text as bold (word), underscore are made via _word_. Standard emoticons like :-) and ;-) are converted to images. To prevent automated Bots from commentspamming, please enter the string you see in the image below in the appropriate input box. Your comment will only be submitted if the strings match. Please ensure that your browser supports and accepts cookies, or your comment cannot be verified correctly. Enter the string from the spam-prevention image above: BBCode format allowed
	Remember Information? Subscribe to this entry
Submitted comments will be subject to moderation before being displayed.

Quicksearch

Twitter

Friday, November 21 2008
Ugh. Not a good night for insomnia. Got a few hours at least though. Bring on the caffeine!

Friday, November 21 2008
@neg2led iPhone Developer Tech Talks: http://developer.apple.com/events/iphone/techtalks/

Friday, November 21 2008
@rafifyalda Yeah been going through the Cocoa book by Aaron Hillegass. Loving what I've done with it so far!

Friday, November 21 2008
@decryption If not, I'm sure there will be sufficient numbers of Mac nerds to follow

Friday, November 21 2008
@jpoh So its to the right of the entrance hmm. Better than walking in and looking around blankly. Follow the Mac nerds I guess :-)

Friday, November 21 2008
@jpoh Link? I think I know where the entrance is on Spencer, but I have no idea once I'm in on where to go

Friday, November 21 2008
@Xenex http://tinyurl.com/3uqx55

Friday, November 21 2008
Hmmmm. No Bonjour IM client for iPhone? That sucks :-(

Friday, November 21 2008
@jpoh Latrobe Theatre, Corner Spencer and Flinders. So says the reminder email

Friday, November 21 2008
@jpoh Well I'm pretty well across the web app stuff but itching to learn more on the Cocoa side so I'm heading that way