Odynia.org Blog - Microsoft CRM

Playing with Grids

nospam@example.com (Robert Amos) — Wed, 02 Aug 2006 09:43:48 +1000

This seems to be the most popular subject available on this blog. Seems no one has tried playing with the Microsoft CRM grids as much as me, which is rather interesting

A while back I touched on how to "colourise" the grid rows, a reader comment got me thinking about how I could satisfy an internal request here. In our old system, they used a dummy entry to trigger a filter which changed the formatting to highlight it. IE they created a record of type "notice" and it would make it bold and bright purple! Couldn't miss it!

So they've asked whether it would be possible to implement something similar with CRM. As these screenshots show, it is!

Before

After

As you can see, a huge improvement, they should have no problems working out that there are no more repairs to be booked for those days

This uses the same colourising code as the previous post, with a few additions

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


// if someone can work out why the computers here insist the week starts at Thursday what would be
good

var days = new Array ('Thursday', 'Friday', 'Saturday', 'Sunday', 'Monday', 'Tuesday',
'Wednesday');

var months = new Array('', 'January', 'February', 'March', 'April', 'May', 'June', 'July',
'August', 'September', 'October', 'November', 'December');

var suffixes = new Array('', 'st', 'nd', 'rd', 'th', 'th', 'th', 'th', 'th', 'th', 'th', 'st',
'nd', 'rd', 'th', 'th', 'th', 'th', 'th', 'th', 'th', 'st', 'nd', 'rd',  'th', 'th', 'th', 'th',
'th', 'th', 'th', 'st', 'nd', 'rd',  'th', 'th', 'th', 'th', 'th', 'th', 'th');



    // OLD STUFF



    // ok so what we need to do, is go through each and er, change em?

    var nextcolour;

    var index;

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

    {



        // NEW STUFF -->

        // for repairs

        if (table == 'repairs')

        {

            // pull out the entire row if the name happens to be the bookings one.

            if (grid.childNodes[i].childNodes[4].firstChild.firstChild.oid ==
'{9E05CB45-C407-DB11-ADB9-0003FF03C872}')

            {

                // get the date

                var bdate = new Date();

                var byear = grid.childNodes[i].childNodes[5].firstChild.innerText.substring(6,
10);

                var bmonth = grid.childNodes[i].childNodes[5].firstChild.innerText.substring(3,
5);

                var bday = grid.childNodes[i].childNodes[5].firstChild.innerText.substring(0, 2);

                bdate.setFullYear(byear, bmonth, bday);

            

                // take the entire row, and suck it out of existance - except for the one field
with our text!

                grid.childNodes[i].removeChild(grid.childNodes[i].childNodes[10]);

                grid.childNodes[i].removeChild(grid.childNodes[i].childNodes[9]);

                grid.childNodes[i].removeChild(grid.childNodes[i].childNodes[8]);

                grid.childNodes[i].removeChild(grid.childNodes[i].childNodes[7]);

                grid.childNodes[i].removeChild(grid.childNodes[i].childNodes[6]);

                grid.childNodes[i].removeChild(grid.childNodes[i].childNodes[5]);

                grid.childNodes[i].removeChild(grid.childNodes[i].childNodes[3]);

                grid.childNodes[i].removeChild(grid.childNodes[i].childNodes[2]);

                grid.childNodes[i].removeChild(grid.childNodes[i].childNodes[1]);

                grid.childNodes[i].removeChild(grid.childNodes[i].childNodes[0]);

                

                // expand our row

                grid.childNodes[i].childNodes[0].colSpan = 11;

                

                

                // remove the existing text

               
grid.childNodes[i].firstChild.firstChild.removeChild(grid.childNodes[i].firstChild.firstChild.firstChild);



                // build our new span

                grid.childNodes[i].firstChild.firstChild.innerHTML = 'No more repairs to be booked
in for ' + days[bdate.getDay()] + ', ' + bdate.getDate() + suffixes[bdate.getDate()] + ' ' +
months[bdate.getMonth()] + ' ' + bdate.getFullYear();

                grid.childNodes[i].firstChild.firstChild.style.textAlign = 'center';

                grid.childNodes[i].firstChild.firstChild.style.fontWeight = 'bold';

                grid.childNodes[i].colourised = true;

                continue;

            }

        }



        // <-- END NEW STUFF





        // OLD STUFF

        // for everything

        index = grid.childNodes[i].childNodes[col].firstChild.innerText;

        if (colourmatrix[index] != null)

        {

            nextcolour = colourmatrix[index];

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

            grid.childNodes[i].colourised = true;

        }

    }

This will take the contents of a lookup field in the grid, check its GUID against the correct one, and if it is remove all TD's from the field except for the one containing the lookup, and then expand and modify it.

Now please remember, this is a VERY BASIC example. If you modify the view at all or the view contains different fields it won't work. This goes for all grid modifying via javascript. Its also very definitely NOT SUPPORTED by Microsoft. So don't ask them.

From Steve:

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?

Sure do Steve!

What you would do, is once you are in the loop checking each row, instead of replacing the background colour (or in addition to) you could add an image to a column, or replace the icon. To replace the icon you would be looking at something like:


grid.childNodes[i].childNodes[1].innerHTML = '<img src="http://server/your/img_here.gif" alt=""
/>';

This has been tested and seems to work

As always, I hope this helps someone!

-bok

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>");

%>

Showing / Hiding Fields For User Who Created Item

nospam@example.com (Robert Amos) — Thu, 29 Jun 2006 03:50:05 +1000

Ronald Lemmen has recently pulled out several stops in what was possible with CRM in his attempts to be able to show and hide fields based on the user logged in, and what roles they have.

I won't repeat his excellent work, but I will put forth an idea I had as to another possible use, one which I've had to implement here to keep up with Management's demands..

In this one, using Ronald's code to get the user id of the logged in user, we can compare it to the created by field. This of course requires that we have the created by field on the form somewhere. Then you can use the following code (the getUserId() function is from Ronald's blog) to check whether this is the user who created this object, and show/hide a section (or field or tab or whatever) based on that information.

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


function getUserId()

{

    try

    {

        var command = new RemoteCommand("SystemUser", "WhoAmI", "/MSCRMServices/");

        var oResult = command.Execute();



        if (oResult.Success)

        {

            return oResult.ReturnValue.UserId;

        }

    }

    catch(e)

    {

        alert("Error while retrieving userid.");

    }

    return null;

}





// test whether the logged in user is the person who created this object

if (getUserId() == crmForm.all.createdby.DataValue[0].id))

{

    // show something

    alert('They created this item!');

} else

{

    // something else

    alert('They did not create this item!');

}

It's a really simple idea. Can have some interesting uses, particularly if you combine it with the Security Role functions. This means you could make it so that only the person who created the item can change certain values, unless they're a high level manager.

Think about it Happy Coding!

-bok

"Colourising" Microsoft CRM Grids

nospam@example.com (Robert Amos) — Wed, 21 Jun 2006 02:19:18 +1000

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!


<%@ 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>");

%>