The Clientside Control of Lists and Columns (for Sage CRM v7.1 and earlier)

Hints, Tips and Tricks

Technical Hints Tips and Tricks that cover customization and development using Sage CRM. API usage and coding are covered.

The Clientside Control of Lists and Columns (for Sage CRM v7.1 and earlier)

  • Comments 7
  • Likes

Note:  This article discusses techniques relevant for Sage CRM v7.1 and earlier.  If you are using Sage CRM 7.2 please refer to the articles that discuss the new Client Side API.

I have previously provided an example of a function that may be used in a search screen to test whether the page contained a List or a Grid.  You can see this in the article "Clientside control of fields in Search screens including detection of grids and lists".

This is only part of a short series of recent articles that have discussed the clientside control of Lists.

And these articles themselves are a continuation of the discussion contained in the article "Choices in Customizing Lists".

For this particular article I wanted to provide an easy way of controlling the properties of both the table and the individual columns.  The technique used also needed to be available for use in both on premise implementations of CRM and the hosted version, sagecrm.com.

Below is an example of a customized list.

You can see the titles of two of the columns have been changed

Company Name to Organisation
Person to Contact

In addition all opportunities that are Leads or are in the UK territory have been highlighted and the company name column has been formatted differently.

The customization has been produced by adding a simple clientside script into the custom content box of the list.

The script is below:

<script src="/crmsp1/custompages/listrules.js">
</script>
<script>
window.attachEvent("onload", formatGrid);
function formatGrid()
{
var mygrid = getGrid();
if (mygrid)
{
mycolumnheader = setGridHeaderCaption(mygrid, 2, "Organization");
mycolumnheader = setGridHeaderCaption(mygrid, 3, "Contact");
setColumnProp(mygrid, 2, "className", "gridhead");
setCellStyle(mygrid,5, "errorcontent", "lead")
setCellStyle(mygrid,7, "infocontent", "u.k.")
}
}
</script>

The script uses a set of functions defined in the listrules.js include file.

The "src" property of a script tag can be either a local relative path or a remote absolute link, making it possible to be used within the hosted screens.

The listrules.js file contains five functions

  • getGrid()
  • getGridHeader(table, colNum)
  • setGridHeaderCaption(table, colNum, captionText)
  • setColumnProp(table, colNum, property, value)
  • setCellStyle(table, colNum, value, condition)

The functions

getGrid()

function getGrid()
{
//usage: var mygrid = getGrid();
var allCells = document.getElementsByTagName("TD");
var boolGridPresent = false;
for(i=0;i<allCells.length;i++)
{
if(allCells[i].className=="GRIDHEAD")
{
var parentspan = allCells[i].parentNode;
while (parentspan.nodeName != "TABLE")
{
parentspan = parentspan.parentNode;
}
targetTable = parentspan;
return targetTable;
break;
}
}
}

getGridHeader(table, colNum)

function getGridHeader(table, colNum)
{
//usage: var header = getGridHeader(mygrid, 2)
var rowElem = table.rows[1];
return rowElem.cells[colNum];
}

setGridHeaderCaption(table, colNum, captionText)

function setGridHeaderCaption(table, colNum, captionText)
{
//usage: setGridHeaderCaption(mygrid, 2, "new text")
var rowElem = table.rows[1];
var header = rowElem.cells[colNum];
if (header.childNodes[0].nodeName=="A")
{
var headeranchor = header.childNodes[0];
headeranchor.innerHTML = captionText;
}
else
{
header.innerHTML = captionText;
}
}

setColumnProp(table, colNum, property, value)

function setColumnProp(table, colNum, property, value)
{
//usage: setColumnProp(mygrid, 2, "className", "errorcontent")
var rowNum = 2
var rowElem
var targetcell
var tdValue
while (rowNum < table.rows.length)
{
rowElem = table.rows[rowNum];
targetcell = rowElem.cells[colNum];
for (key in targetcell)
{
if (key == property)
{
targetcell[key] = value;
}
}
rowNum++
}
}

setCellStyle(table, colNum, value, condition)

function setCellStyle(table, colNum, value, condition)
{
//usage: setColumnProp(mygrid, 2, "errorcontent","lead")
var rowNum = 2
var rowElem
var targetcell
var tdValue
while (rowNum < table.rows.length)
{
rowElem = table.rows[rowNum];
targetcell = rowElem.cells[colNum];
if (targetcell.childNodes[0].nodeName=="A")
{
var targetcellanchor = targetcell.childNodes[0];
if (targetcellanchor.innerText.toUpperCase() == condition.toUpperCase())
{
targetcell.className = value;
}
}
else
{
if (targetcell.innerText.toUpperCase() == condition.toUpperCase())
{
targetcell.className = value;
}
}
rowNum++
}
}

Note:  This code was developed for use with Internet Explorer 8.

Comments
  • great stuff Jeff

  • Odd that it was developed for IE 8, since the software compatibility matrix on the site says that none of the CRM versions are supported on IE 8...

    Wes

  • Hi Jeff,

    I have multiple List Blocks on the same screen. I would like to highlight the background colour of a different column within two of the lists - to enable quick comparison between the column values. Can you advise how to extend the getGrid() function to reference a particular grid on the page?  Many thanks in advance.

  • HI Jeff,

    I try to use the script in crm 6.2  and even crm 7.0 , there is no changes.

    Can i just confirm the src path : my local pc path :

    <script src="/crminstance/WWWRoot/CustomPages/listrules.js">

    </script>

    <script>

    window.attachEvent("onload", formatGrid);

    function formatGrid()

    {

    var mygrid = getGrid();

    if (mygrid)

    {

    mycolumnheader = setGridHeaderCaption(mygrid, 2, "Organization");

    mycolumnheader = setGridHeaderCaption(mygrid, 3, "Contact");

    setColumnProp(mygrid, 2, "className", "gridhead");

    //setCellStyle(mygrid,5, "errorcontent", "lead")

    //setCellStyle(mygrid,7, "infocontent", "u.k.")

    }

    }

    </script>

    Is there anything else i need to do to make the changes.Im just trying to change the list caption but the script not work.

    Please advice.

    Thanks.

  • Hi jeff,

    I have a listbox and in that there are 2 columns for 1st column there is href of next page.. I want to append 2nd column's value in first column's href ....so when I click on 1st column to navigate to next page I will get both columns value on single click..is it possible?

    and if possible then please share knowledge of that.. so will write coding for same...

    thanks in advance.

    if any one know the solution please tell me..

  • Hi,

    I know this thread is old, however it is still useful. Problem is that the listrules.js file is not shown on the DPP site link:-

    Post said "The listrules.js file can be downloaded from the public resources section of the DPP site."

    Please can someone direct me to a link that works for this file.

    Kind Regards

    Julian

  • Julian - Ooops.  The file seems to have disappeared.  The good news the functions that it would contain are all given here so you can reconstruct the file.  But please note that this is using really old code - some of this is long deprecated by the browsers.  If you are using Sage CRM 7.2 onwards then please use the Client Side API that has specific list control methods.

    I have removed the offending link.