Determine which SharePoint Web Front End Server you are hitting

Often, we need to identify which WFE server on SharePoint we are hitting when the farm has load balancing.

I decided to create a very simple feature that would display the server name by overriding the GlobalNavigation delegate control of each page that was being accessed across every site collection and sub sites in a web application.

When accessing any page, you will see the server name similar to below:

First, I created the user control, and added one simple label:

<asp:Label ID="lblServerName" runat="server" BackColor="Green" ForeColor="White"></asp:Label>

In the code behind, I put code to check whether the current user is a farm administrator, or if the query parameter, "showserver" has been passed into the url. If either are true, then I display the name of the sharepoint server on the label:

 protected void Page_Load(object sender, EventArgs e)
        {
            try
            {
                if (IsFarmAdmin() || ServerParamIsSet())
                {
                    this.lblServerName.Width = new Unit("100%");
                    this.lblServerName.Text = string.Format("{0}", Page.Server.MachineName);
                }
            }
            catch { }
        }

Next, I added an Elements manifest, and specified the path to where the control template will be deployed to on the server, a sequence number lower than 100, and specified it to place the user control in the GlobalNavigation delegate control placeholder.

<?xml version="1.0" encoding="utf-8"?>
<Elements xmlns="http://schemas.microsoft.com/sharepoint/">
  <Control Id="GlobalNavigation" Sequence="90" ControlSrc="~/_ControlTemplates/SPServerName/SPServerName.ascx" />
</Elements>

Finally, I created a feature and set it to deploy to the web application.


Installation instructions:
1. Download the wsp I uploaded to http://spservername.codeplex.com/
2. Deploy the solution to your farm
3. Go to the web application features, and enable the SPServerName feature


Notes:

• There are no changes made to any master page and the feature can easily be turned on and off
• By default, Farm administrators will always see the server name at the top of the page.
• Non-farm administrators can also display the server name if they pass in the query parameter "showserver=1"

Ex:

http://myportal.com/siteabc?showserver=1

 

JavaScript to add a global link next to Welcome menu in SharePoint 2010

Similarly to my post on adding a link next to the Site Actions menu in the Left Ribbon, you can add a link on the right ribbon on SharePoint 2010 pages, next to the Welcome menu.

ExecuteOrDelayUntilScriptLoaded(ExecuteDefaultLoad, "sp.js");

var _rightRibbonContainer = null;

function ExecuteDefaultLoad()
{

 var isWikiEdit = false;
 if ( document.forms[MSOWebPartPageFormName]._wikiPageMode != null )
 {
  if( document.forms[MSOWebPartPageFormName]._wikiPageMode.value == "Edit" )
    {
     isWikiEdit = true;
    }
  }

 var inDesignMode = document.forms[MSOWebPartPageFormName].MSOLayout_InDesignMode.value;
 if (inDesignMode == "1" || isWikiEdit) 
 {  // page is in edit mode 
 } 
 else 
 {  
  LoadRightRibbon(); 
 } 
}

function LoadRightRibbon()
{
 
 var ribbonContainerRowRight = document.getElementById("RibbonContainer-TabRowRight");

 if( ribbonContainerRowRight != null )
 {
  if( ribbonContainerRowRight.children != null && ribbonContainerRowRight.children[2] != null )
  {
   if( ribbonContainerRowRight.children[2].children != null )
   {
    _rightRibbonContainer = document.getElementById("RibbonContainer-TabRowRight").children[2].children[0];

    if( _rightRibbonContainer != null )
    {     
     AddHelloLink();
    }
   }
  }
 }
}


function AddHelloLink()
{
 if( _rightRibbonContainer != null )
 {

  var newSpan = document.createElement("span");
  newSpan.innerHTML = '<a class="ms-menu-a" style="cursor:pointer;white-space:nowrap;"    href="javascript:;" title="Hello!" onclick="window.location=\'/sites/test123\';return false;"><span><font color=\'#8ce352\'><b><i>Hello World!</i></b></font></span></a>';
  newSpan.className = 'ms-SPLink ms-SpLinkButtonInActive ms-welcomeMenu';
  
  newSpan.onmouseover= function() {  this.className = "ms-SPLink ms-SpLinkButtonActive ms-welcomeMenu"}; 
  newSpan.onmouseout= function() {  this.className = "ms-SPLink ms-SpLinkButtonInActive ms-welcomeMenu"}; 
  

  _rightRibbonContainer.insertBefore(newSpan, _rightRibbonContainer.children[0]);
 }
}

How to create a SharePoint Delegate Control that injects JavaScript to all SharePoint pages

Recently, I needed a way to insert some JavaScript files into all pages in all of the SharePoint site collections and sites under an entire web application.

The thought of changing all the master pages in every site collection seemed not only tedious, but unmanageable. Every time a new site collection is created, we would have to remember to modify the master pages. Also, if a site collection owner decided to use their own master pages, we would have no way of maintaining those either.

So, after banging my head trying to come up with a better solution, I stumbled upon the delegate control!

A detailed description of how it works and what it does can be found here:

http://msdn.microsoft.com/en-us/library/ms463169.aspx

The beauty of the delegate control is that you can basically overwrite anything in the master page.

I wanted to add a simple JavaScript file to all of the pages in the master page.

So I started by following the example below. I modified this code in step 12 from the hardcoded script to instead read from a JavaScript file that is located in my layouts folder.

  protected override void CreateChildControls()

        {

            base.CreateChildControls();

            string srcScript = "/_layouts/Company/CompanyScript.js";

            this.Controls.Add(new ScriptLink() { Name = srcScript, Language = "javascript", Localizable = false });

        }

The step by step process can also be found here as well: http://msdn.microsoft.com/en-us/library/ms470880.aspx

Step by step process to creating a delegate control:

1.      Start SharePoint development tools in Microsoft Visual Studio 2010.

2.      On the File menu, point to New, and then click Project.

3.      In Project Types, under Visual Basic or C#, select Empty SharePoint Project.

4.      Type EcmaScriptDelegate as the project name. Click OK.

5.      In the SharePoint Customization Wizard, choose Deploy as a farm solution. Click Finish.

6.      In the Solution Explorer, right-click the EcmaScriptDelegate project. Select Add and then New Item.

7.      In the Add New Item dialog box, click the Code group and choose the Class template. Type EcmaScriptDelegateControl as the Name and then click Add.

8.      Next, you must add a reference to System.Web. In the Solution Explorer, right-click the References folder and select Add Reference. In the Add Reference dialog, click the .NET tab and find System.Web in the list. Click OK.

9.      In the EcmaScriptDelegateControl file that is displayed, add the following using statement.

using System.Web.UI.WebControls;

10.  Change the base class of EcmaScriptDelegateControl to WebControl by modifying the following line.

class EcmaScriptDelegateControl : WebControl

11.  Override the OnLoad method by adding the following code.

protected override void OnLoad(EventArgs e)

{

  base.OnLoad(e);

}

12.  Inside the OnLoad method, add the following code to put JavaScript on the page.

string helloAlert = "alert('Hello, world!');";

this.Page.ClientScript.RegisterClientScriptBlock(this.GetType(), "popup", helloAlert, true);

Now, you have built the delegate control for the project. Next, you will create the Feature to deploy the control.

To create a Feature to deploy the control

1.      In the Solution Explorer, right-click the EcmaScriptDelegate project and select Add and then New Item.

2.      In the Add New Item dialog box, choose the Empty Element template and type EcmaScriptDelegateFeature as the Name. Click Add.

3.      Insert the following XML inside the Elements element. The Id attribute identifies the delegate where the control is rendered. The ControlAssembly and ControlClass attributes are unique to your control. For more information about how to find the full assembly name, see How to: Create a Tool to Get the Full Name of an Assembly.

The most flexible thing about the delegate control is that it can be defined at the 4 scopes:

·         Web

·         Site collection

·         Web application

·         Farm

Thus, I can set the feature of this scope to activate at any level, and have it immediately show up in ALL of my pages.

The best part is, when you deactivate the feature, it is completely gone and has no impact! No messing with the master page!

Now, we can use this delegate control to add a global link on all pages in every site collection under a web application to return users to the home page.  

JavaScript to add a global link near Site Actions menu in SharePoint 2010

The goal is to add a link next to the Site Actions menu that would always lead back to the portal home, similar to below.

Using IE Developer Tools, I was able to determine the location where I wanted to place my link was inside of the RibbonContainer-TabRowLeft element.

You can modify the master page and inject the following javascript to achieve this:

Read my following post to see how to make this work on all site collections across a web application by using a delegate control!

ExecuteOrDelayUntilScriptLoaded(ExecuteDefaultLoad, "sp.js");

function ExecuteDefaultLoad()
{

 var isWikiEdit = false;
 if ( document.forms[MSOWebPartPageFormName]._wikiPageMode != null )
 {
  if( document.forms[MSOWebPartPageFormName]._wikiPageMode.value == "Edit" )
    {
     isWikiEdit = true;
    }
  }

 var inDesignMode = document.forms[MSOWebPartPageFormName].MSOLayout_InDesignMode.value;
 if (inDesignMode == "1" || isWikiEdit) 
 {  
  // this page is currently in edit mode 
 } 
 else 
 {  
  AddHomeLink();
 } 
}


function AddHomeLink()
{
 var ribbonContainerRowLeft = document.getElementById("RibbonContainer-TabRowLeft");
 if( ribbonContainerRowLeft != null )
 {
  if( ribbonContainerRowLeft.children != null && ribbonContainerRowLeft.children[0] != null )
  {  
  var newSpan = document.createElement("span");
  newSpan.innerHTML='<a class="ms-menu-a" style="cursor:pointer;white-space:nowrap;"    href="javascript:;" title="SharePoint Portal Home" onclick="window.location=\'/\';return false;"><img src="/_layouts/images/hhome.png"  border="0px"/></a>';
  newSpan.className = 'ms-SPLink ms-SpLinkButtonInActive ms-welcomeMenu';
  newSpan.onmouseover= function() {  this.className = "ms-SPLink ms-SpLinkButtonActive ms-welcomeMenu"}; 
  newSpan.onmouseout= function() {  this.className = "ms-SPLink ms-SpLinkButtonInActive ms-welcomeMenu"}; 
  ribbonContainerRowLeft.insertBefore(newSpan, ribbonContainerRowLeft.children[0]);
  }
 }
}

Show All Sites I Have Access to in SharePoint with Filtering using JQuery and Javascript

Suppose you want your users to see all the SharePoint sites that they have access to on one page, instead of having to drill down to each subsite to find their content. Instead of creating a site directory, I want to show them all the sites that they can access and allow them to filter based on the site name, site path and site description.

Laura Rogers has a blog post that goes through a step by step process of using the Search Core Results web part, which can be found here: http://sharepoint911.com/blogs/laura/Lists/Posts/Post.aspx?ID=90

However, I want to do this by using some scripting. By default, it will show all the sites the current user has access to (with a scroll bar on the right hand side if it is an extensive list). The search textbox will automatically filter the entire set of sites (with no post backs) on the site title, path and description. The end result will be similar to below:

First, we will want to use the SharePoint search service and get all the sites and webs using jquery/ajax. The query we will use gets only the indexed items that are of contentclass type "STS_SITE" or "STS_WEB:

SELECT Title, Rank, Size, Description, Path FROM Scope() WHERE "scope" = 'All Sites' AND (contentclass = 'STS_Site' OR contentclass = 'STS_Web') ORDER BY "Rank" DESC"

Next, we will call the query using the search service, where the url being passed in is the url to the search.asmx path.

 $.ajax({ 
url: "http://mydomain/_vti_bin/search.asmx" ,  
type: "POST",   
dataType: "xml",       
data: soapEnv,      
async:true,
complete: processResult,   
contentType: "text/xml; charset=\"utf-8\""
 });   

The processResult function will be executed to iterate through the results and create our table once the ajax call has been made.

Finally, we will use the dataTable js plugin to allow scrolling and filtering on the sites list

$('#mySitesTable').dataTable( {
"sScrollY": "300px",
"bPaginate": false,
"bSort": false
} );

Simply add this script to a SharePoint page and reference the jquery library, which you can grab from http://docs.jquery.com/Downloading_jQuery and the jquery.dataTables.min.js, which you can download from http://datatables.net/:

<div id="errorMsg"></div>
<div id="showQueryResults" style="display: none">false</div>
<div id="searchResults"></div>
<div id="testoutput" style="display: none"></div>

<script src="/assets/js/jquery/jquery-1.7.2.min.js" type="text/javascript"></script>
<script src="/assets/js/jquery/plugins/dataTables/jquery.dataTables.min.js" type="text/javascript"></script>

<style>
 div.table_Wrapper { border:10px solid blue; }
 .dataTables_filter 
 {
  width: 50%;
  float: right;
  text-align: right;
 }
 .dataTables_info
 {
  width: 100%;
  font-weight:bold;
  float: left;
  border: 2px solid #ddd;
  background-color: Gainsboro;
  color: #999;
  text-align: right;

 }
 
</style>


<script type="text/javascript">

var searchURL = "http://mydomain/_vti_bin/search.asmx";
var arraySearchResults = new Array();
var arrayListToSearch = new Array();
var displayQueryResults = false;
var searchCap = 5000;
 
//used to display the output of the query; 
//if you would like to see the query result, make set the innerHTML of showQueryResults to true
if( document.getElementById("showQueryResults").innerHTML == "true")
{
 displayQueryResults = true;       
}

RunSearch(); 

   
function RunSearch()
{
 arraySearchResults = new Array();
 

 var myQuery = "<QueryPacket xmlns='urn:Microsoft.Search.Query' Revision='1000'>";
 myQuery += "<Query>"; 
 myQuery += "<SupportedFormats><Format>urn:Microsoft.Search.Response.Document.Document</Format></SupportedFormats>";  
 myQuery += "<Range><Count>" + searchCap + "</Count></Range>";  
 myQuery += "<Context>";
 myQuery += "<QueryText language='en-US' type='MSSQLFT'>";
 myQuery += "SELECT Title, Rank, Description, Path FROM Scope() WHERE \"scope\" = 'All Sites' AND (contentclass = 'STS_Site' OR contentclass = 'STS_Web') ORDER BY \"Rank\" DESC";
 myQuery += "</QueryText>";
 myQuery += "</Context>"; 
 myQuery += "</Query>";
 myQuery += "</QueryPacket>";   

  
 var soapEnv = "<?xml version=\"1.0\"?>"+
 "<soap:Envelope xmlns:xsi='http://www.w3.org/2001/XMLSchema-instance' xmlns:xsd='http://www.w3.org/2001/XMLSchema' xmlns:soap='http://schemas.xmlsoap.org/soap/envelope/'>" + 
 "<soap:Body>" +
 "<Query xmlns='urn:Microsoft.Search'>"+
 "<queryXml>" + escapeHTML(myQuery) + "</queryXml>"+   
 "</Query>"+    
 "</soap:Body>"+ 
 "</soap:Envelope>";


 $.ajax({  
  url: searchURL,   
  type: "POST",    
  dataType: "xml",        
  data: soapEnv,       
  async:true,

  complete: processResult,    
  contentType: "text/xml; charset=\"utf-8\""

 });         
 }
 
  

function processResult(xData, Status)
{
 if (Status == "error") 
 {
  DisplayErrorMesssage(Status, xData);
  return;
 }

// alert($(xData.responseXML).text());
 
   var queryResult = $(xData.responseXML).find("QueryResult").text();
   $("#testoutput").text(queryResult);
 
   if( displayQueryResults )
   {
       document.getElementById("testoutput").style.display = "";
   }
   else
   {
       document.getElementById("testoutput").style.display = "none";
   }
 
   $(xData.responseXML).find("QueryResult").each(function() {  
    var xml = $("<xml>" + $(this).text() + "</xml>");  
    xml.find("Document").each(function() 
    {  
  var curPath = $("Action>LinkUrl", $(this)).text();  
  curPath = curPath.toLowerCase();

  var curTitle = "";  
  var curDesc = "";
 
 
  $(this).find("Property").each(function() 
  {  
   if ($("Name", $(this)).text() == "TITLE") 
   {  
    curTitle = $("Value", $(this)).text(); 
   }  
   if ($("Name", $(this)).text() == "DESCRIPTION") 
   {  
    curDesc = $("Value", $(this)).text(); 
   }  
  });  
  
  arraySearchResults.push([curTitle, curPath, curDesc]);
    
    });  

  });
 
 PrintOutput();
}
 
 

function PrintOutput()
{ 
 arraySearchResults.sort(sortSearchResults);

 var output = "";

 output += '<table id="mySitesTable" cellpadding="0" cellspacing="0" border="0" class="display">';
 output += "<thead><tr><th align='left'><font color='steelblue' size='2pt'><u><b>Sites that I have access to</b></u></font><br/><br/></th></tr></thead>"; 
 output += "<tbody>";

 
 for( var x = 0; x < arraySearchResults.length; x++ )
 {
  var title = arraySearchResults[x][0];
  var path = arraySearchResults[x][1];
  var desc = arraySearchResults[x][2];
  
  output += PrintRow(path, title, desc);
 } 
 
 output += "</tbody></table>";
 
 document.getElementById("searchResults").innerHTML = output;
 
  
 $('#mySitesTable').dataTable( {
  "sScrollY": "300px",
  "bPaginate": false,
  "bSort": false
 } );
}
 
function PrintRow(path, title, desc)
{
 var output = "";

 if( desc != null && desc != "" )
  output += '<tr><td><a href="' +  path +  '" target="_blank">' + title   + '</a><br/><font color="green">' + path + '</font><br/>'+desc+'<br/><br/></td></tr>';
 else
  output += '<tr><td><a href="' +  path +  '" target="_blank">' + title   + '</a><br/><font color="green">'+path+'</font><br/><br/></td></tr>';

 return output; 
}
 
 
function DisplayErrorMesssage( Status, xData)
{
 document.getElementById("errorMsg").innerHTML = "Error occurred. " + Status ;

 if( xData.responseXML != null )
 {
  document.getElementById("errorMsg").innerHTML += $(xData.responseXML).text();
 }
}
 
 
function sortSearchResults(a, b){

 var aTitle = a[0]; 
 var bTitle = b[0];
  
  
 var x = aTitle.toLowerCase(), y = bTitle.toLowerCase();   
 
 return x < y ? -1 : x > y ? 1 : 0;   
}


function escapeHTML (str) 
{  
 return str.replace(/&/g,'&').replace(/</g,'<').replace(/>/g,'>');   
}     
 </script>

Track SharePoint Attachments Uploaded and Deleted in the EditForm using JavaScript

To track the changes to attachments in a SharePoint item for auditing/record keeping purposes:

1. Create a new SharePoint edit form for the list using SharePoint Designer
2. Make sure that your Edit Form is updated and can upload attachments (use this MSDN article if you are having issues http://support.microsoft.com/kb/953271/en-us)

3. **Updated step**

Find <tr id="idAttachmentsRow" > and directly underneath of that closing </tr> add the following:


<tr style="display:none">
      <td colspan="2" valign="top" class="ms-formbody" nowrap="" height="20px">
       <H3 class="ms-standardheader">
              <SharePoint:AttachmentsField ControlMode="Display" FieldName="Attachments" runat="server" Visible="true"/>
       </H3>
      </td>
     </tr>
(By adding this row and this field, it will retain the name of the attachment)
    
4. To get the newly added attachments, you will want to grab the "attachmentsOnClient" element. This is where the references to the newly added attachments are stored. Next, you will want to iterate through all the INPUT tags and get the "value" attribute to get the names of the files that were uploaded.

5. To get the removed attachments from the SharePoint list item, we will grab the "attachmentsToBeRemovedFromServer" element. All of the GUIDs of the list item attachments to be removed are stored in this element. We will parse out each guid and use it to identify the attachmentRow found under the attachmentsTable. This row will have a reference to the removed items.

6. To view the changes that have been made when a user clicks to save the form, add the script below. Of course, instead of alerting the user of the changes made, you can record it in a status or audit trail field to make it more seamless!


 

<script type="text/javascript">

function GetNewlyUploadedAttachments()
{
 var uploadedAttachments = new Array();
 var oAttachments = document.getElementById("attachmentsOnClient");
 if( oAttachments.innerHTML != null )
 {
  var attachmentTable = oAttachments.getElementsByTagName("INPUT");
  for (var i = 0; i < attachmentTable.length; i++) 
  {    
   var value = attachmentTable[i].getAttribute("value");    
   if ( value != null && value.length > 0 ) 
   {   
    var lastIndex = value.lastIndexOf("\\");
    var fileName = value.substring(lastIndex+1);
    uploadedAttachments.push(fileName); 
   } 
  } 
 }

 return uploadedAttachments.toString();
}

function GetRemovedAttachments()
{
 var removedAttachments = new Array();
 var attachmentsToBeRemoved = document.getElementsByName("attachmentsToBeRemovedFromServer").item(0).value;

 if( attachmentsToBeRemoved != null && attachmentsToBeRemoved != "")
 {
  var array = attachmentsToBeRemoved.split(';');
  for(var i =0; i < array.length; i++ )
  {
   attachmentGuid = array[i];
   if( attachmentGuid != null && attachmentGuid != "" )
   {
    var attachmentRow =  document.getElementById(attachmentGuid);
    var span = attachmentRow.getElementsByTagName('span')[0];
    var links = span.getElementsByTagName("a");
    for (z = 0; z < links.length; z++) 
    {
     removedAttachments.push(links[z].firstChild.nodeValue);
    }
   }
  }
 }
 return removedAttachments.toString();
}

function PreSaveAction()
{
 var newUploadedAttachments = GetNewlyUploadedAttachments();
 var removedAttachments = GetRemovedAttachments();
 if( removedAttachments != null && removedAttachments != "" )
 {
  alert("User removed attachments: " + removedAttachments );
 }
 if( newUploadedAttachments != null && newUploadedAttachments != "" )
 {
  alert("User uploaded attachments: " + newUploadedAttachments );
 }
}
</script>

Display SharePoint List Item Attachments as Images

Suppose you want a visual display of the images that you attach to a SharePoint list. Clicking on each attachment to open it can be a hassle instead of just having it automatically display the images on load.


By default, the attachments are listed as links:

If you view the properties of a SharePoint list item, you will see that the link to each attachment is calculated by: 

[Site Url]/Attachments/[Item ID]/[Attachment Name]

So, if we can grab the item id of the list item, and then determine the attachment names, we will be able to use those properties to display the image with an img tag.

First thing's first. If you view the source of that default SharePoint item view page, you will see that the attachments are store din the element: idAttachmentsTable. We want to grab all of the attachment names in that element. To do so, we will iterate through the span elements and parse out the attachments:  

 

<script type="text/javascript">
spanTag = document.getElementById("idAttachmentsTable").getElementsByTagName("span");
var attachmentArray = new Array();
for (var i = 0; i < spanTag.length; i++) 
{
  filename = spanTag[i].innerHTML;
  var index  = filename.indexOf('>')+1;
  var lastindex = filename.lastIndexOf('<');

  var name = filename.substring(index, lastindex);

  name = name.replace(/ /g, '%20');
  name = name.replace(/'/g, '%27');

  for( var x = 0; x < imgExtensions.length; x++ )
  {
   if( name.indexOf(imgExtensions[x]) >=0 )
   {
    attachmentArray.push([name]);
    break;
   }
  }
}
</script>

Now that we have the names of the attachments, we want to grab the current item id of our list item, which we can simply grab from the source url.

Call to get the item ID:

var paramID = getParameterByName("ID");

Function to grab the parameter from the source url:

function getParameterByName(name) 
{   
 name = name.replace(/[\[]/, "

\\\[").replace(/[\]]/, "\\\]");  
 var regexS = "[\\?&]" + name + "=([^&#]*)"; 
 var regex = new RegExp(regexS);  
 var results = regex.exec(window.location.href); 
 if(results == null) 
  return "";
 else   
  return decodeURIComponent(results[1].replace(/\+/g, " "));
}
Now, we will use the paramID and the attachment names to create our img tags and append it to the Attachments element:

var ctrl = document.getElementById("idAttachmentsTable");
 var attachmentString = "";
 for( i = 0; i < attachmentArray.length; i++)
 {
  attachmentString += 
  " <img src='" + listAttachmentUrl + paramID + "/"+ attachmentArray[i] + "' width='400px' border='2'>";
 }
 ctrl.parentNode.innerHTML += attachmentString;

After adding our script:





To use this script, you will need to use SharePoint designer to edit the "View" page of the list. Navigate to the end of the PlaceHolderMain content placeholder, and right before the closing "</asp:Content>" tag, place the script below in it's entirety. Make sure to modify the listAttachmentUrl to reflect your site and list names:

<script language="javascript" type="text/javascript"> 
var listAttachmentUrl = '/mysite/Lists/mylist/Attachments/';
var imgExtensions = new Array(".jpg",".jpeg", ".png", ".bmp", ".tif", ".tiff");
LoadAllAttachments();

function LoadAllAttachments()
{
 spanTag = document.getElementById("idAttachmentsTable").getElementsByTagName("span");
 var attachmentArray = new Array();
 for (var i = 0; i < spanTag.length; i++) 
 {
  filename = spanTag[i].innerHTML;
  var index  = filename.indexOf('>')+1;
  var lastindex = filename.lastIndexOf('<');

  var name = filename.substring(index, lastindex);

  name = name.replace(/ /g, '%20');
  name = name.replace(/'/g, '%27');
  for( var x = 0; x < imgExtensions.length; x++ )
  {
   if( name.indexOf(imgExtensions[x]) >=0 )
   {
    attachmentArray.push([name]);
    break;
   }
  }
 }

 var paramID = getParameterByName("ID");
 var ctrl = document.getElementById("idAttachmentsTable");
 var attachmentString = "";
 for( i = 0; i < attachmentArray.length; i++)
 {
  attachmentString += 
  " <img src='" + listAttachmentUrl + paramID + "/"+ attachmentArray[i] + "' width='400px' border='2'>";
 }
 ctrl.parentNode.innerHTML += attachmentString;
}

function getParameterByName(name) 
{   
 name = name.replace(/[\[]/, "\\\[").replace(/[\]]/, "\\\]");   
 var regexS = "[\\?&]" + name + "=([^&#]*)";  
 var regex = new RegExp(regexS);   
 var results = regex.exec(window.location.href);  
 if(results == null)  
  return ""; 
 else    
  return decodeURIComponent(results[1].replace(/\+/g, " "));} 
</script>