SPD Custom Changes with JavaScript

  

This article deals with the SharePoint designer and displays how to add custom java scripts to add new functionalities and UI changes.

 

Once we have our custom page ready we can do some experiments with javascript to change the look and feel. In this post I will show two changes made to a list page.

1.       Colour coding few sections

2.       changing the text of the field name

 

Changes would be made to a list page Newform.aspx of TestJSForm list. We are going to colour code the NewForm.aspx. Fields below 2; between 2-3 and greater than 3 would have three different colours. At the end column 2’s text would be changed.  

 

Once you open the page in the SPD go to the content place holder “PlaceHolderPageTitleInTitleArea”. We are going to write our javascript code inside this content place holder.  See below the code stub.

 

<asp:Content ContentPlaceHolderId="PlaceHolderPageTitleInTitleArea" runat="server">                 <SharePoint:ListProperty Property="LinkTitle" runat="server" id="ID_LinkTitle"/>:                 <SharePoint:ListItemProperty id="ID_ItemProperty" MaxLength=40 runat="server"/>                 <script type="text/javascript" language="javascript">                 _spBodyOnLoadFunctionNames.push('__colorCodeForm');                 function __colorCodeForm()                 {                                              //alert('Hello world'); Var ParentChildID = document.getElementById('part1').childNodes[2].childNodes[0].childNodes; //alert (ParentChildID.nodeNames); //alert (ParentChildID.length); for (i=0; i<ParentChildID.length; i++) {                 if (i<=2)                 {                                 //ParentChildID[i].childNodes[0].style.backgroundColor = '#ebf3cc';                                 ParentChildID[i].childNodes[1].style.backgroundColor = '#CCFFFF';                 }                 if (i > 2 && i<=3)                 {                                 //ParentChildID[i].childNodes[0].style.backgroundColor = '#ebf3cc';                                 ParentChildID[i].childNodes[1].style.backgroundColor = '#FFFF99';                 }                 if (i > 3)                 {                                 //ParentChildID[i].childNodes[0].style.backgroundColor = '#ebf3cc';                                 ParentChildID[i].childNodes[1].style.backgroundColor = '#FFCC99';                 } } //get to the item and change the innertext and html                 var item=ParentChildID[1].childNodes[0];                 //alert(item.innerText);                                item.innerText="Partha";                 var item2=ParentChildID[1].childNodes[1].childNodes[1];                 //alert(item2.innerHTML);                 var item3=ParentChildID[1].childNodes[1];                 item3.innerHTML = item2.innerHTML + "This Description is being created by JS"; } </script>

 

The line document.getElementById('part1').childNodes[2].childNodes[0].childNodes; is very important. This is the node which opens the nested child controls. The logic behind is when the listformview webpart is populated in the browser it get rendered as

<td valign="top"><div WebPartID="c9128cf3-3183-4bf7-8eb5-250fae8ae693" HasPers="false" id="WebPartWPQ2" width="100%" allowDelete="false" style="" > <SPAN id='part1'> <table class="ms-formtoolbar" cellpadding="2" cellspacing="0" border="0" id="ctl00_m_g_c9128cf3_3183_4bf7_8eb5_250fae8ae693_ctl00_toolBarTbltop" width="100%" >   <tr>

The JS function traverses the DOM to get to the Span with id part1. Rest all the JS functions would be based on this logic only.

 

Another very important and interesting JS, which gets the element based on the tag name.

<script type="text/javascript"> //this function gets the element with tag name function getTagFromIdentifierAndTitle(tagName, identifier, title) {   var len = identifier.length;   var tags = document.getElementsByTagName(tagName);   for (var i=0; i < tags.length; i++) {     var tempString = tags[i].id;     if (tags[i].title == title && (identifier == "" || tempString.indexOf(identifier) == tempString.length - len)) {       return tags[i];     }   }   return null; } </script> </asp:Content>

 

The final output will be something similar to

 

 

 Thanks for reading. If you have some other explanation – please post a comment… I’ll be happy to hear.

...HaPpY CoDiNg

Partha (Aurum)

References:

http://office.microsoft.com/en-us/sharepoint-designer-help/CL010082351.aspx?CTT=97

http://office.microsoft.com/en-us/sharepoint-designer-help/create-a-custom-list-form-HA010119111.aspx