Dor Rotman’s Blog

Lets say you want to change the text of a field title in a new item form, or in an edit-item form. You might want to do one of the following:

Change the field title text Add a remark to the title Add a link Make the title a link Put some javascript

The trick in doing this is also not breaking the Form Web Part, so new fields will appear in the form.

The solution is… Javascript at runtime! It’s inspired by this post for changing the default value of a field, only this time we’re talking about the title text and not the field value.

So how to do it? Easily. Open the NewForm page with SharePoint Designer and view the HTML code. Look for the main content placeholder:

<asp:Content ContentPlaceHolderId=”PlaceHolderMain” runat=”server”>

Paste this code inside it, before the table:

<!– Begin Field Link Code –>
<script type=”text/javascript”>
// Add the function so it will be called on Body_OnLoad.
_spBodyOnLoadFunctionNames.push(“AddFieldLinks”);

function AddFieldLinks()
{
  // Call the search function with an anonymous function that will 
  // be executed upon finding the relevant field.
  AddFieldLink(“Status”,
   // This anonymous function adds a link to the field’s title.
   function (currentText)
   {
     return currentText + “<br/>” + 
     GenerateLink(“policy.html”, “<u>See Status Policy Document</u>”);
   }
   );
}

function GenerateLink(url, text)
{
   return “<a target=\”_blank\” href=\”" + url + “\”>” + text + “</a>”;
}

function AddFieldLink(fieldName, fn)
{
  // Get all field titles 
  var tags = document.getElementsByTagName(“H3″);

  // Go through all field titles and search for the requested field.
  for(var i=0; i < tags.length; i++)
  {
    if((tags[i].children.length == 1) && 
       (tags[i].className == “ms-standardheader”) &&
       ((tags[i].children[0].innerText == fieldName) || 
        (tags[i].children[0].innerText == fieldName + ” *”)))
    {
      // Found the field we need to update. Set its 
      tags[i].children[0].innerHTML = fn(tags[i].children[0].innerHTML);
      break;
    }
  }
}

</script>
<!– End Field Link Code –>

Now just edit the body of the AddFieldLinks function to change the title of the relevant fields.

It’s parameters are:

• The title of the field
• A function that returns a string for the title.
  Notice that I used an anonymous function so you can set a different behavior for each field title - for example, one will be a link, the other would be appended some text, etc…

Now just save the file, approve the unghosting, and that’s it!

Here’s the result - click to enlarge:

Dor.