SharePoint's Swiss Army Knife - Content Editor Web Part

I recently got to work a lot with the Content Editor Web Part (CEWP) and based on my experience, I have to say that it is THE Swiss Army Knife in SharePoint's tool chest. You can create/edit this web part using a browser. You don't need SharePoint Designer. You can embed HTML, jQuery/JavaScript code in it to create feature rich, and aesthetically cool pages very easily in SharePoint using just your browser.

Here are some excellent resources that show the prowess of the CEWP:

http://pathtosharepoint.wordpress.com/2009/02/15/a-content-editor-web-part-for-every-home/

http://mindsharpblogs.com/Todd/articles/793.aspx

http://www.contenteditorwebpart.com/default.aspx


On a recent project, I had to query SharePoint Lists to determine the status (i.e. delayed, slight delay, on time) of various projects and then display red, yellow, green icons in a dashboard type of interface.

A couple of limitations of the project was that I could not use SharePoint Designer (SPD), which in turn meant that I could not use the Data View Web Part (DVWP). The DVWP allows you to query Lists, but it requires SPD to create/edit it. And I could not use any type of code (assembly/DLL, user control) that needed to be deployed on the SharePoint Server. So I chose to use a CEWP instead to create the dashboard.

Here is the JavaScript/jQuery code that I used:

<span id="spnGrid"> </span>
<br>
<table>
<tr>
<td valign=bottom>Key:</td>
<td><IMG src='Procurement%20Pictures/red_key.png' width='21' height='19' border='none'>Significant Delay/No Progress</td>
<td><IMG src='Procurement%20Pictures/yellow_key.png' width='21' height='19' border='none'>Moderate Progress/Some Delay</td>
<td><IMG src='Procurement%20Pictures/green_key.png' width='21' height='19' border='none'>Good Team Traction/Progress</td>
<td><IMG src='Procurement%20Pictures/notapp_key.png' width='21' height='19' border='none'>Not Applicable</td>
</tr>
</table>
<script type="text/javascript" src="JavaScript/jquery-1.3.2.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
var soapEnv =
"<soapenv:Envelope xmlns:soapenv='http://schemas.xmlsoap.org/soap/envelope/'> \
<soapenv:Body> \
<GetListItems xmlns='http://schemas.microsoft.com/sharepoint/soap/'> \
<listName>Tower and Region Status</listName> \
<viewFields> \
<ViewFields> \
<FieldRef Name='Form_x0020_Type' /> \
<FieldRef Name='Tower' /> \
<FieldRef Name='Region' /> \
<FieldRef Name='_Status' /> \
<FieldRef Name='NA_x0020_Status' /> \
<FieldRef Name='EU_x0020_Status' /> \
<FieldRef Name='LA_x0020_Status' /> \
<FieldRef Name='CEEMA_x0020_Status' /> \
<FieldRef Name='AP_x0020_Status' /> \
</ViewFields> \
</viewFields> \
</GetListItems> \
</soapenv:Body> \
</soapenv:Envelope>";
$.ajax({
url: "_vti_bin/lists.asmx",
type: "POST",
dataType: "xml",
data: soapEnv,
complete: buildStatusChart,
contentType: "text/xml; charset=\"utf-8\""
});
});
function buildStatusChart(xData, status) {
var imgPkgNASrc, imgPkgEUSrc, imgPkgLASrc, imgPkgCEEMASrc, imgPkgAPSrc;
var imgComNASrc, imgComEUSrc, imgComLASrc, imgComCEEMASrc, imgComAPSrc;
var imgIngNASrc, imgIngEUSrc, imgIngLASrc, imgIngCEEMASrc, imgIngAPSrc;
var imgLogNASrc, imgLogEUSrc, imgLogLASrc, imgLogCEEMASrc, imgLogAPSrc;
var imgManNASrc, imgManEUSrc, imgManLASrc, imgManCEEMASrc, imgManAPSrc;
var imgIndNASrc, imgIndEUSrc, imgIndLASrc, imgIndCEEMASrc, imgIndAPSrc;
var imgIfsNASrc, imgIfsEUSrc, imgIfsLASrc, imgIfsCEEMASrc, imgIfsAPSrc;
var imgMktNASrc, imgMktEUSrc, imgMktLASrc, imgMktCEEMASrc, imgMktAPSrc;
var imgNASrc, imgEUSrc, imgLASrc, imgCEEMASrc, imgAPSrc;
var imgSrcArray = new Array();
$(xData.responseXML).find("z\\:row").each(function() {

//Get NA Region Status
if ($(this).attr("ows_Region") == "NA")
{
imgNASrc = getImageSource($(this).attr("ows__Status"));
}
//Get EU Region Status
if ($(this).attr("ows_Region") == "EU")
{
imgEUSrc = getImageSource($(this).attr("ows__Status"));
}

//Get LA Region Status
if ($(this).attr("ows_Region") == "LA")
{
imgLASrc = getImageSource($(this).attr("ows__Status"));
}
//Get CEEMA Region Status
if ($(this).attr("ows_Region") == "CEEMA")
{
imgCEEMASrc = getImageSource($(this).attr("ows__Status"));
}
//Get AP Region Status
if ($(this).attr("ows_Region") == "AP")
{
imgAPSrc = getImageSource($(this).attr("ows__Status"));
}
//Get Packaging Tower Status for all 5 Regions
if ($(this).attr("ows_Tower") == "Packaging")
{
//Get Packaging NA Status
imgPkgNASrc = getImageSource($(this).attr("ows_NA_x0020_Status"));
//Get Packaging EU Status
imgPkgEUSrc= getImageSource($(this).attr("ows_EU_x0020_Status"));
//Get Packaging LA Status
imgPkgLASrc= getImageSource($(this).attr("ows_LA_x0020_Status"));
//Get Packaging CEEMA Status
imgPkgCEEMASrc= getImageSource($(this).attr("ows_CEEMA_x0020_Status"));
//Get Packaging AP Status
imgPkgAPSrc= getImageSource($(this).attr("ows_AP_x0020_Status"));
}
//Get Commodities Tower Status for all 5 Regions
if ($(this).attr("ows_Tower") == "Commodities")
{
//Get Commodities NA Status
imgComNASrc = getImageSource($(this).attr("ows_NA_x0020_Status"));
//Get Commodities EU Status
imgComEUSrc= getImageSource($(this).attr("ows_EU_x0020_Status"));
//Get Commodities LA Status
imgComLASrc= getImageSource($(this).attr("ows_LA_x0020_Status"));
//Get Commodities CEEMA Status
imgComCEEMASrc= getImageSource($(this).attr("ows_CEEMA_x0020_Status"));
//Get Commodities AP Status
imgComAPSrc= getImageSource($(this).attr("ows_AP_x0020_Status"));
}
//Get Ingredients Tower Status for all 5 Regions
if ($(this).attr("ows_Tower") == "Ingredients")
{
//Get Ingredients NA Status
imgIngNASrc = getImageSource($(this).attr("ows_NA_x0020_Status"));
//Get Ingredients EU Status
imgIngEUSrc= getImageSource($(this).attr("ows_EU_x0020_Status"));
//Get Ingredients LA Status
imgIngLASrc= getImageSource($(this).attr("ows_LA_x0020_Status"));
//Get Ingredients CEEMA Status
imgIngCEEMASrc= getImageSource($(this).attr("ows_CEEMA_x0020_Status"));
//Get Ingredients AP Status
imgIngAPSrc= getImageSource($(this).attr("ows_AP_x0020_Status"));
}

//Get Logistics Tower Status for all 5 Regions
if ($(this).attr("ows_Tower") == "Logistics")
{
//Get Logistics NA Status
imgLogNASrc = getImageSource($(this).attr("ows_NA_x0020_Status"));
//Get Logistics EU Status
imgLogEUSrc= getImageSource($(this).attr("ows_EU_x0020_Status"));
//Get Logistics LA Status
imgLogLASrc= getImageSource($(this).attr("ows_LA_x0020_Status"));
//Get Logistics CEEMA Status
imgLogCEEMASrc= getImageSource($(this).attr("ows_CEEMA_x0020_Status"));
//Get Logistics AP Status
imgLogAPSrc= getImageSource($(this).attr("ows_AP_x0020_Status"));
}
//Get Manufacturing Tower Status for all 5 Regions
if ($(this).attr("ows_Tower") == "External Manufacturing")
{
//Get Manufacturing NA Status
imgManNASrc = getImageSource($(this).attr("ows_NA_x0020_Status"));
//Get Manufacturing EU Status
imgManEUSrc= getImageSource($(this).attr("ows_EU_x0020_Status"));
//Get Manufacturing LA Status
imgManLASrc= getImageSource($(this).attr("ows_LA_x0020_Status"));
//Get Manufacturing CEEMA Status
imgManCEEMASrc= getImageSource($(this).attr("ows_CEEMA_x0020_Status"));
//Get Manufacturing AP Status
imgManAPSrc= getImageSource($(this).attr("ows_AP_x0020_Status"));
}
//Get Indirect Tower Status for all 5 Regions
if ($(this).attr("ows_Tower") == "Indirect")
{
//Get Indirect NA Status
imgIndNASrc = getImageSource($(this).attr("ows_NA_x0020_Status"));
//Get Indirect EU Status
imgIndEUSrc= getImageSource($(this).attr("ows_EU_x0020_Status"));
//Get Indirect LA Status
imgIndLASrc= getImageSource($(this).attr("ows_LA_x0020_Status"));
//Get Indirect CEEMA Status
imgIndCEEMASrc= getImageSource($(this).attr("ows_CEEMA_x0020_Status"));
//Get Indirect AP Status
imgIndAPSrc= getImageSource($(this).attr("ows_AP_x0020_Status"));
}
//Get IS Tower Status for all 5 Regions
if ($(this).attr("ows_Tower") == "IS")
{
//Get IS NA Status
imgIfsNASrc = getImageSource($(this).attr("ows_NA_x0020_Status"));
//Get IS EU Status
imgIfsEUSrc= getImageSource($(this).attr("ows_EU_x0020_Status"));
//Get IS LA Status
imgIfsLASrc= getImageSource($(this).attr("ows_LA_x0020_Status"));
//Get IS CEEMA Status
imgIfsCEEMASrc= getImageSource($(this).attr("ows_CEEMA_x0020_Status"));
//Get IS AP Status
imgIfsAPSrc= getImageSource($(this).attr("ows_AP_x0020_Status"));
}

//Get Marketing Tower Status for all 5 Regions
if ($(this).attr("ows_Tower") == "Marketing")
{
//Get Marketing NA Status
imgMktNASrc = getImageSource($(this).attr("ows_NA_x0020_Status"));
//Get Marketing EU Status
imgMktEUSrc= getImageSource($(this).attr("ows_EU_x0020_Status"));
//Get Marketing LA Status
imgMktLASrc= getImageSource($(this).attr("ows_LA_x0020_Status"));
//Get Marketing CEEMA Status
imgMktCEEMASrc= getImageSource($(this).attr("ows_CEEMA_x0020_Status"));
//Get Marketing AP Status
imgMktAPSrc= getImageSource($(this).attr("ows_AP_x0020_Status"));
}
//Store Packaging Tower Images
if(typeof(imgPkgNASrc) !== 'undefined' && imgPkgNASrc != null)
{
imgSrcArray["PkgNA"] = imgPkgNASrc;
}
if(typeof(imgPkgEUSrc) !== 'undefined' && imgPkgEUSrc != null)
{
imgSrcArray["PkgEU"] = imgPkgEUSrc;
}
if(typeof(imgPkgLASrc) !== 'undefined' && imgPkgLASrc != null)
{
imgSrcArray["PkgLA"] = imgPkgLASrc;
}
if(typeof(imgPkgCEEMASrc) !== 'undefined' && imgPkgCEEMASrc != null)
{
imgSrcArray["PkgCEEMA"] = imgPkgCEEMASrc;
}
if(typeof(imgPkgAPSrc) !== 'undefined' && imgPkgAPSrc != null)
{
imgSrcArray["PkgAP"] = imgPkgAPSrc;
}
//Store Commodities Tower Images
if(typeof(imgComNASrc) !== 'undefined' && imgComNASrc != null)
{
imgSrcArray["ComNA"] = imgComNASrc;
}
if(typeof(imgComEUSrc) !== 'undefined' && imgComEUSrc != null)
{
imgSrcArray["ComEU"] = imgComEUSrc;
}
if(typeof(imgComLASrc) !== 'undefined' && imgComLASrc != null)
{
imgSrcArray["ComLA"] = imgComLASrc;
}
if(typeof(imgComCEEMASrc) !== 'undefined' && imgComCEEMASrc != null)
{
imgSrcArray["ComCEEMA"] = imgComCEEMASrc;
}
if(typeof(imgComAPSrc) !== 'undefined' && imgComAPSrc != null)
{
imgSrcArray["ComAP"] = imgComAPSrc;
}
//Store Ingredients Tower Images
if(typeof(imgIngNASrc) !== 'undefined' && imgIngNASrc != null)
{
imgSrcArray["IngNA"] = imgIngNASrc;
}
if(typeof(imgIngEUSrc) !== 'undefined' && imgIngEUSrc != null)
{
imgSrcArray["IngEU"] = imgIngEUSrc;
}
if(typeof(imgIngLASrc) !== 'undefined' && imgIngLASrc != null)
{
imgSrcArray["IngLA"] = imgIngLASrc;
}
if(typeof(imgIngCEEMASrc) !== 'undefined' && imgIngCEEMASrc != null)
{
imgSrcArray["IngCEEMA"] = imgIngCEEMASrc;
}
if(typeof(imgIngAPSrc) !== 'undefined' && imgIngAPSrc != null)
{
imgSrcArray["IngAP"] = imgIngAPSrc;
}
//Store Logistics Tower Images
if(typeof(imgLogNASrc) !== 'undefined' && imgLogNASrc != null)
{
imgSrcArray["LogNA"] = imgLogNASrc;
}
if(typeof(imgLogEUSrc) !== 'undefined' && imgLogEUSrc != null)
{
imgSrcArray["LogEU"] = imgLogEUSrc;
}
if(typeof(imgLogLASrc) !== 'undefined' && imgLogLASrc != null)
{
imgSrcArray["LogLA"] = imgLogLASrc;
}
if(typeof(imgLogCEEMASrc) !== 'undefined' && imgLogCEEMASrc != null)
{
imgSrcArray["LogCEEMA"] = imgLogCEEMASrc;
}
if(typeof(imgLogAPSrc) !== 'undefined' && imgLogAPSrc != null)
{
imgSrcArray["LogAP"] = imgLogAPSrc;
}
//Store Manufacturing Tower Images
if(typeof(imgManNASrc) !== 'undefined' && imgManNASrc != null)
{
imgSrcArray["ManNA"] = imgManNASrc;
}
if(typeof(imgManEUSrc) !== 'undefined' && imgManEUSrc != null)
{
imgSrcArray["ManEU"] = imgManEUSrc;
}
if(typeof(imgManLASrc) !== 'undefined' && imgManLASrc != null)
{
imgSrcArray["ManLA"] = imgManLASrc;
}
if(typeof(imgManCEEMASrc) !== 'undefined' && imgManCEEMASrc != null)
{
imgSrcArray["ManCEEMA"] = imgManCEEMASrc;
}
if(typeof(imgManAPSrc) !== 'undefined' && imgManAPSrc != null)
{
imgSrcArray["ManAP"] = imgManAPSrc;
}
//Store Indirect Tower Images
if(typeof(imgIndNASrc) !== 'undefined' && imgIndNASrc != null)
{
imgSrcArray["IndNA"] = imgIndNASrc;
}
if(typeof(imgIndEUSrc) !== 'undefined' && imgIndEUSrc != null)
{
imgSrcArray["IndEU"] = imgIndEUSrc;
}
if(typeof(imgIndLASrc) !== 'undefined' && imgIndLASrc != null)
{
imgSrcArray["IndLA"] = imgIndLASrc;
}
if(typeof(imgIndCEEMASrc) !== 'undefined' && imgIndCEEMASrc != null)
{
imgSrcArray["IndCEEMA"] = imgIndCEEMASrc;
}
if(typeof(imgIndAPSrc) !== 'undefined' && imgIndAPSrc != null)
{
imgSrcArray["IndAP"] = imgIndAPSrc;
}
//Store IS Tower Images
if(typeof(imgIfsNASrc) !== 'undefined' && imgIfsNASrc != null)
{
imgSrcArray["IfsNA"] = imgIfsNASrc;
}
if(typeof(imgIfsEUSrc) !== 'undefined' && imgIfsEUSrc != null)
{
imgSrcArray["IfsEU"] = imgIfsEUSrc;
}
if(typeof(imgIfsLASrc) !== 'undefined' && imgIfsLASrc != null)
{
imgSrcArray["IfsLA"] = imgIfsLASrc;
}
if(typeof(imgIfsCEEMASrc) !== 'undefined' && imgIfsCEEMASrc != null)
{
imgSrcArray["IfsCEEMA"] = imgIfsCEEMASrc;
}
if(typeof(imgIfsAPSrc) !== 'undefined' && imgIfsAPSrc != null)
{
imgSrcArray["IfsAP"] = imgIfsAPSrc;
}
//Store Marketing Tower Images
if(typeof(imgMktNASrc) !== 'undefined' && imgMktNASrc != null)
{
imgSrcArray["MktNA"] = imgMktNASrc;
}
if(typeof(imgMktEUSrc) !== 'undefined' && imgMktEUSrc != null)
{
imgSrcArray["MktEU"] = imgMktEUSrc;
}
if(typeof(imgMktLASrc) !== 'undefined' && imgMktLASrc != null)
{
imgSrcArray["MktLA"] = imgMktLASrc;
}
if(typeof(imgMktCEEMASrc) !== 'undefined' && imgMktCEEMASrc != null)
{
imgSrcArray["MktCEEMA"] = imgMktCEEMASrc;
}
if(typeof(imgMktAPSrc) !== 'undefined' && imgMktAPSrc != null)
{
imgSrcArray["MktAP"] = imgMktAPSrc;
}
//Store NA Region Image
if(typeof(imgNASrc) !== 'undefined' && imgNASrc != null)
{
imgSrcArray["NA"] = imgNASrc;
}
//Store EU Region Image
if(typeof(imgEUSrc) !== 'undefined' && imgEUSrc != null)
{
imgSrcArray["EU"] = imgEUSrc;
}
//Store LA Region Image
if(typeof(imgLASrc) !== 'undefined' && imgLASrc != null)
{
imgSrcArray["LA"] = imgLASrc;
}
//Store CEEMA Region Image
if(typeof(imgCEEMASrc) !== 'undefined' && imgCEEMASrc != null)
{
imgSrcArray["CEEMA"] = imgCEEMASrc;
}
//Store AP Region Image
if(typeof(imgAPSrc) !== 'undefined' && imgAPSrc != null)
{
imgSrcArray["AP"] = imgAPSrc;
}
});
var spnElement= document.getElementById("spnGrid");
//Construct table HTML here
var tableHtml = "";
tableHtml = "<TABLE border='1' cellspacing='0' cellpadding='1'";
tableHtml += "<TBODY>";
//Construct Top row here
tableHtml += "<TR>"
tableHtml += "<TD> </TD>";
tableHtml += "<TD valign=top><A HREF='Tower%20and%20Region%20Status/Forms/Region%20Status.aspx'>Region Status</A></TD>";
tableHtml += "<TD align=center><A HREF='Procurement%20Forms/Forms/Logistics.aspx'>Logistics</A><br><A HREF='Procurement%20Forms/Forms/Logistics.aspx'><IMG src='Procurement%20Pictures/cargocontainers_thumb.png' width='77' height='58' border='none'></A></TD>";
tableHtml += "<TD align=center><A HREF='Procurement%20Forms/Forms/Ingredients.aspx'>Ingredients</A><br><A HREF='Procurement%20Forms/Forms/Ingredients.aspx'><IMG src='Procurement%20Pictures/ingredient_thumb.png' width='77' height='58' border='none'></A></TD>";
tableHtml += "<TD align=center><A HREF='Procurement%20Forms/Forms/Commodities.aspx'>Commodities</A><br><A HREF='Procurement%20Forms/Forms/Commodities.aspx'><IMG src='Procurement%20Pictures/corn_thumb.jpg' width='77' height='58' border='none'></A></TD>";
tableHtml += "<TD align=center><A HREF='Procurement%20Forms/Forms/Packaging.aspx'>Packaging</A><br><A HREF='Procurement%20Forms/Forms/Packaging.aspx'><IMG src='Procurement%20Pictures/cardboardboxes_thumb.png' width='77' height='58' border='none'></A></TD>";
tableHtml += "<TD align=center><A HREF='Procurement%20Forms/Forms/Manufacturing.aspx'>Manufacturing</A><br><A HREF='Procurement%20Forms/Forms/Manufacturing.aspx'><IMG src='Procurement%20Pictures/dairyfactory_thumb.png' width='77' height='58' border='none'></A></TD>";
tableHtml += "<TD align=center><A HREF='Procurement%20Forms/Forms/Marketing.aspx'>Marketing</A><br><A HREF='Procurement%20Forms/Forms/Marketing.aspx'><IMG src='Procurement%20Pictures/bullhorn_thumb.jpg' width='77' height='58' border='none'></A></TD>";
tableHtml += "<TD align=center><A HREF='Procurement%20Forms/Forms/Indirect.aspx'>Indirect</A><br><A HREF='Procurement%20Forms/Forms/Indirect.aspx'><IMG src='Procurement%20Pictures/paperclips_thumb.png' width='77' height='58' border='none'></A></TD>";
tableHtml += "<TD align=center><A HREF='Procurement%20Forms/Forms/IS.aspx'>IS</A> <br><A HREF='Procurement%20Forms/Forms/IS.aspx'><IMG src='Procurement%20Pictures/is.png' width='77' height='58' border='none'></A></TD>";

tableHtml += "</TR>";
//Construct NA row here
tableHtml += "<TR>";
tableHtml += "<TD align=center><A HREF='Procurement%20Forms/Forms/NA.aspx'>NA</A><br><A HREF='Procurement%20Forms/Forms/NA.aspx'><IMG src='Procurement%20Pictures/na.gif' width='77' height='40' border='none'></A></TD>";
tableHtml += "<TD align=center><IMG src='" + imgSrcArray["NA"] + "' width='27' height='27'></TD>";
tableHtml += "<TD align=center><IMG src='" + imgSrcArray["LogNA"]+ "' width='27' height='27'></TD>";
tableHtml += "<TD align=center><IMG src='" + imgSrcArray["IngNA"]+ "' width='27' height='27'></TD>";
tableHtml += "<TD align=center><IMG src='" + imgSrcArray["ComNA"] + "' width='27' height='27'></TD>";
tableHtml += "<TD align=center><IMG src='" + imgSrcArray["PkgNA"] + "' width='27' height='27'></TD>";
tableHtml += "<TD align=center><IMG src='" + imgSrcArray["ManNA"]+ "' width='27' height='27'></TD>";
tableHtml += "<TD align=center><IMG src='" + imgSrcArray["MktNA"]+ "' width='27' height='27'></TD>";
tableHtml += "<TD align=center><IMG src='" + imgSrcArray["IndNA"]+ "' width='27' height='27'></TD>";
tableHtml += "<TD align=center><IMG src='" + imgSrcArray["IfsNA"]+ "' width='27' height='27'></TD>";
tableHtml += "</TR>";
//Construct EU row here
tableHtml += "<TR>";
tableHtml += "<TD align=center><A HREF='Procurement%20Forms/Forms/EU.aspx'>EU</A><br><A HREF='Procurement%20Forms/Forms/EU.aspx'><IMG src='Procurement%20Pictures/europe_western77x40.gif' width='77' height='40' border='none'></A></TD>";
tableHtml += "<TD align=center><IMG src='" + imgSrcArray["EU"] + "' width='27' height='27'></TD>";
tableHtml += "<TD align=center><IMG src='" + imgSrcArray["LogEU"]+ "' width='27' height='27'></TD>";
tableHtml += "<TD align=center><IMG src='" + imgSrcArray["IngEU"]+ "' width='27' height='27'></TD>";
tableHtml += "<TD align=center><IMG src='" + imgSrcArray["ComEU"] + "' width='27' height='27'></TD>";
tableHtml += "<TD align=center><IMG src='" + imgSrcArray["PkgEU"] + "' width='27' height='27'></TD>";
tableHtml += "<TD align=center><IMG src='" + imgSrcArray["ManEU"]+ "' width='27' height='27'></TD>";
tableHtml += "<TD align=center><IMG src='" + imgSrcArray["MktEU"]+ "' width='27' height='27'></TD>";
tableHtml += "<TD align=center><IMG src='" + imgSrcArray["IndEU"]+ "' width='27' height='27'></TD>";
tableHtml += "<TD align=center><IMG src='" + imgSrcArray["IfsEU"]+ "' width='27' height='27'></TD>";
tableHtml += "</TR>";
//Construct LA row here
tableHtml += "<TR>";
tableHtml += "<TD align=center><A HREF='Procurement%20Forms/Forms/LA.aspx'>LA</A><br><A HREF='Procurement%20Forms/Forms/LA.aspx'><IMG src='Procurement%20Pictures/LA.gif' width='77' height='40' border='none'></A></TD>";
tableHtml += "<TD align=center><IMG src='" + imgSrcArray["LA"] + "' width='27' height='27'></TD>";
tableHtml += "<TD align=center><IMG src='" + imgSrcArray["LogLA"]+ "' width='27' height='27'></TD>";
tableHtml += "<TD align=center><IMG src='" + imgSrcArray["IngLA"]+ "' width='27' height='27'></TD>";
tableHtml += "<TD align=center><IMG src='" + imgSrcArray["ComLA"] + "' width='27' height='27'></TD>";
tableHtml += "<TD align=center><IMG src='" + imgSrcArray["PkgLA"] + "' width='27' height='27'></TD>";
tableHtml += "<TD align=center><IMG src='" + imgSrcArray["ManLA"]+ "' width='27' height='27'></TD>";
tableHtml += "<TD align=center><IMG src='" + imgSrcArray["MktLA"]+ "' width='27' height='27'></TD>";
tableHtml += "<TD align=center><IMG src='" + imgSrcArray["IndLA"]+ "' width='27' height='27'></TD>";
tableHtml += "<TD align=center><IMG src='" + imgSrcArray["IfsLA"]+ "' width='27' height='27'></TD>";
tableHtml += "</TR>";
//Construct CEEMA row here
tableHtml += "<TR>";
tableHtml += "<TD align=center><A HREF='Procurement%20Forms/Forms/CEEMA.aspx'>CEEMA</A><br><A HREF='Procurement%20Forms/Forms/CEEMA.aspx'><IMG src='Procurement%20Pictures/CEEMA77x40.gif' width='77' height='40' border='none'></A></TD>";
tableHtml += "<TD align=center><IMG src='" + imgSrcArray["CEEMA"] + "' width='27' height='27'></TD>";
tableHtml += "<TD align=center><IMG src='" + imgSrcArray["LogCEEMA"]+ "' width='27' height='27'></TD>";
tableHtml += "<TD align=center><IMG src='" + imgSrcArray["IngCEEMA"]+ "' width='27' height='27'></TD>";
tableHtml += "<TD align=center><IMG src='" + imgSrcArray["ComCEEMA"] + "' width='27' height='27'></TD>";
tableHtml += "<TD align=center><IMG src='" + imgSrcArray["PkgCEEMA"] + "' width='27' height='27'></TD>";
tableHtml += "<TD align=center><IMG src='" + imgSrcArray["ManCEEMA"]+ "' width='27' height='27'></TD>";
tableHtml += "<TD align=center><IMG src='" + imgSrcArray["MktCEEMA"]+ "' width='27' height='27'></TD>";
tableHtml += "<TD align=center><IMG src='" + imgSrcArray["IndCEEMA"]+ "' width='27' height='27'></TD>";
tableHtml += "<TD align=center><IMG src='" + imgSrcArray["IfsCEEMA"]+ "' width='27' height='27'></TD>";
tableHtml += "</TR>";
//Construct AP row here
tableHtml += "<TR>";
tableHtml += "<TD align=center><A HREF='Procurement%20Forms/Forms/AP.aspx'>AP</A><br><A HREF='Procurement%20Forms/Forms/AP.aspx'><IMG src='Procurement%20Pictures/asia-pac77x40.gif' width='77' height='40' border='none'></A></TD>";
tableHtml += "<TD align=center><IMG src='" + imgSrcArray["AP"] + "' width='27' height='27'></TD>";
tableHtml += "<TD align=center><IMG src='" + imgSrcArray["LogAP"]+ "' width='27' height='27'></TD>";
tableHtml += "<TD align=center><IMG src='" + imgSrcArray["IngAP"]+ "' width='27' height='27'></TD>";
tableHtml += "<TD align=center><IMG src='" + imgSrcArray["ComAP"] + "' width='27' height='27'></TD>";
tableHtml += "<TD align=center><IMG src='" + imgSrcArray["PkgAP"] + "' width='27' height='27'></TD>";
tableHtml += "<TD align=center><IMG src='" + imgSrcArray["ManAP"]+ "' width='27' height='27'></TD>";
tableHtml += "<TD align=center><IMG src='" + imgSrcArray["MktAP"]+ "' width='27' height='27'></TD>";
tableHtml += "<TD align=center><IMG src='" + imgSrcArray["IndAP"]+ "' width='27' height='27'></TD>";
tableHtml += "<TD align=center><IMG src='" + imgSrcArray["IfsAP"]+ "' width='27' height='27'></TD>";
tableHtml += "</TR>";
//Construct closing table tags
tableHtml += "</TBODY>";
tableHtml += "</TABLE>";
//Assign the tableHTML code to the span tag INNER HTML property to display it
spnElement.innerHTML = tableHtml ;
}
function getImageSource(statusValue)
{
var imgSrc;
if (statusValue == "Red")
{
imgSrc= "Procurement%20Pictures/red.png";
}
else if
(statusValue == "Yellow")
{
imgSrc= "Procurement%20Pictures/yellow.png";
}
else if
(statusValue == "Green")
{
imgSrc= "Procurement%20Pictures/green.png";
}
else
{
imgSrc= "Procurement%20Pictures/notapp.png";
}
return imgSrc;
}
</script>

Thanks to Jan Tielens and Amit Kumar for their excellent blog posts on how to query SharePoint Lists using jQuery and JavaScript.

http://weblogs.asp.net/jan/archive/2009/05/06/querying-sharepoint-list-items-using-jquery.aspx (using jQuery)

http://amitkumarmca04.blogspot.com/2008/07/how-access-sharepoint-moss-list-data.html (using JavaScript)


I strongly encourage you to check out the awesome CEWP and you will be impressed!!! Trust me :-)