APARTHA77: MOSS SPD

Tuesday, November 22, 2011

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"/>

_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

<SPAN id='part1'>

<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.

//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

SPD to Hide list field in NewForm.aspx

Hiding few columns from the default view DataFormWebPart webpart.

This article would cover the we can change the new from page of any list. Generally we get to see the new form page with application master page, but here I have changed it to default master page.

Additionally we will also see how to hide even mandatory field. However, except for the title field SharePoint does not enter any default value.

I would suggest to add a new page to the list to show dataformwebpart and then do changes. I won’t go in detail of how to add pages, rather follow the link below to create/know how to add list page in any list from SPD please refer to the below link.

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

The SPD code change would look like below. I am not adding whole of the Placeholdermain content place holder but only the html table where the fields are there.

<nobr>Title<span class="ms-formvalidation"> *</span>

</nobr></H3></td>

<SharePoint:FormField runat="server" id="ff1{$Pos}" ControlMode="New" FieldName="Title" __designer:bind="{ddwrt:DataBind('i',concat('ff1',$Pos),'Value','ValueChanged','ID',ddwrt:EscapeDelims(string(@ID)),'@Title')}"/>

<SharePoint:FieldDescription runat="server" id="ff1description{$Pos}" FieldName="Title" ControlMode="New"/>

</td>

</tr>

</H3></td>

<SharePoint:FormField runat="server" id="ff2{$Pos}" ControlMode="New" FieldName="_x0043_ol1" __designer:bind="{ddwrt:DataBind('i',concat('ff2',$Pos),'Value','ValueChanged','ID',ddwrt:EscapeDelims(string(@ID)),'@_x0043_ol1')}"/>

<SharePoint:FieldDescription runat="server" id="ff2description{$Pos}" FieldName="_x0043_ol1" ControlMode="New"/>

</td></tr>

<!--<tr> <td width="190px" valign="top" class="ms-formlabel">

</H3></td>

<SharePoint:FormField runat="server" id="ff3{$Pos}" ControlMode="New" FieldName="_x0043_ol5" __designer:bind="{ddwrt:DataBind('i',concat('ff3',$Pos),'Value','ValueChanged','ID',ddwrt:EscapeDelims(string(@ID)),'@_x0043_ol5')}"/>

<SharePoint:FieldDescription runat="server" id="ff3description{$Pos}" FieldName="_x0043_ol5" ControlMode="New"/>

</td>

</tr>-->

</H3>

</td>

<SharePoint:FormField runat="server" id="ff4{$Pos}" ControlMode="New" FieldName="_x0043_ol6" __designer:bind="{ddwrt:DataBind('i',concat('ff4',$Pos),'Value','ValueChanged','ID',ddwrt:EscapeDelims(string(@ID)),'@_x0043_ol6')}"/>

<SharePoint:FieldDescription runat="server" id="ff4description{$Pos}" FieldName="_x0043_ol6" ControlMode="New"/>

</td></tr>

<xsl:if test="$dvt_1_automode = '1'" ddwrt:cf_ignore="1">

</td></tr></xsl:if>

</table>

The final output would be something

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

APARTHA77

Tuesday, November 22, 2011

SPD Custom Changes with JavaScript

SPD to Hide list field in NewForm.aspx

Social Connects

Search This Blog

Followers

Blog Archive

About Me

Total Pageviews

Popular Posts