Wednesday, August 2. 2006
Playing with Grids
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?
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>");
%>
Thursday, June 29. 2006
Showing / Hiding Fields For User Who Created Item
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!
Happy Coding!-bok
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.
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<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.
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>");
%>
Tuesday, June 6. 2006
Icons in MenuItems
Since the release of CRM 3.0 there has been examples of menu's in the "Action Bar" having icons next to the menu items. Such as this:
While it appears that there is no documentation (at least not in 3.0.4 of the SDK) as to being able to do this in the page's menu, it is actually possible, as this shows:
All you need to do is add the Icon attribute to your MenuItem entry in the isv.config.xml file, ie:
Click on a comment to hide it. Click here to show all comments.
<MenuItem Title="1. Check-in Computer" AccessKey="1" Icon="/icons/repairs/checkin.gif"
JavaScript="checkin();" />
Enjoy!
-bok
PS. Thanks must go to Ben Vollmer for the source of the icons, he has posted a list of places you can find your own icons on his blog.
Saturday, June 3. 2006
Disappearing Calendar
Several people have reported that their settings disappear when using the Outlook Client for CRM alongside the Web Client. This is a commonly known problem, and there are several solutions. There is no "correct" solution, any one could best suit your needs.
Delete the temporary files.
As reported on TIDBITS on MS CRM clearing your temporary internet files resolves this issue. This works by deleting the CRM cookie thats stored in your browser.
Use different URLs for accessing CRM.
As reported on Mid Atlantic Microsoft CRM and on the Microsoft CRM Newsgroups you simply need to set the URL to access Microsoft CRM to be different for each service necessary.
For example: Say you host your CRM service on an IIS Website using the IP Address 10.0.0.9 and you access it using http://crm/. In most cases http://crm.yourdomain.com/ should work also. Because this problem lies in the cookie Microsoft CRM uses to know which client you're using, if you specify say http://crm.yourdomain.com/ in the CRM Outlook Client, that means that the cookie will be issued with the crm.yourdomain.com domain set. If you then use http://crm/ to access the CRM Web Client, CRM won't see the first cookie as it is using "crm" as its domain setting.
Voila, fully functional clients Of course, using the IP Address will work also.
Of course, using the IP Address will work also.Hope someone will find this useful!
-bok
Tuesday, May 23. 2006
List of Required Fields
Recently I had to develop an entity that called for the required fields to be spread across multiple tabs.
This caused some confusion amoungst the users initially when asked for extra data that they couldn't find.
I came up with this:
This provides an overview of the information that still needs to be entered into the forms before CRM will allow you to save it. Clicking on the field will change the focus to that field using the SetFocus() method the CRM Team built-in.
It uses JavaScript to loop through the form and pull out all required fields. To run it you simply need to call this from your onLoad form event:
ax_display_required_list();
Below is the code that does the hard work, you can either paste this into your onLoad event, or use the include function in the previous post to include it. Please be sure to have this code loaded before you call ax_display_required_list();
Click on a comment to hide it. Click here to show all comments.
function ax_display_required_list ()
{
var htmltitle = '<div><div class="lbTitle" id="_AX_NA_Required" tabIndex="0" title="Click here
for more areas" style="display: none;"><img align="absMiddle" src="/_imgs/navup.gif" /> Required
Fields</div>';
var htmllist = '<span class="lbArea" style="display: inline;">';
var k = 0;
var fields = new Array();
var label;
showcount = 0;
for (var i = 0; i < crmForm.all.length; i++)
{
if (crmForm.all[i].Disabled != null && crmForm.all[i].RequiredLevel == 2)
{
k++;
label = document.getElementById(crmForm.all[i].id + '_c');
if (label != null)
{
htmllist = htmllist + '<div class="lbItem lnOn" id="ax_nav_' + crmForm.all[i].id +
'" tabIndex="0" title="' + label.innerText + ' is required." onclick="crmForm.all.' +
crmForm.all[i].id + '.SetFocus();" style="display: none;"><img class="icon" align="absMiddle"
src="/_imgs/ico/16_alert.gif"> <nobr class="lbText" style="width: 105px;" title="' +
label.innerText + ' is required."> ' + label.innerText + '</nobr></div>';
crmForm.all[i].attachEvent('onchange', ax_all_onchange);
fields.push(i);
}
}
}
htmllist = htmllist + '</span>';
var htmlclose = '</div>';
// find the nav bar
var navbar = document.getElementById('crmNavBar');
navbar.insertAdjacentHTML('beforeEnd', htmltitle + htmllist + htmlclose);
// go back through and show them etc
for (var i = 0;i < fields.length; i++)
{
if (crmForm.all[fields[i]].DataValue == null)
ax_show_required_field(crmForm.all[fields[i]].id);
}
}
function ax_all_onchange ()
{
if (event.srcElement.DataValue == null)
ax_show_required_field(event.srcElement.id);
else
ax_hide_required_field(event.srcElement.id);
}
function ax_show_required_field (field)
{
var d = document.getElementById('ax_nav_' + field);
if (d != null && d.style.display != 'block')
{
d.style.display = 'block';
showcount++;
}
if (showcount > 0)
document.getElementById('_AX_NA_Required').style.display = 'block';
}
function ax_hide_required_field (field)
{
var d = document.getElementById('ax_nav_' + field);
if (d != null && d.style.display != 'none')
{
d.style.display = 'none';
showcount--;
if (showcount == 0)
document.getElementById('_AX_NA_Required').style.display = 'none';
}
}
Hope someone finds this useful.
-bok
PS. This above is posted AS-IS and has no warranty or guarantees attached.