Form modification, Javascript, SharePoint

Modify formlabel in SharePoint form

27 Comments

I got a request for a method to edit the form label of a SharePoint form. Basically this i very easy.

This is how it looks by default:
IMG

By adding a few lines of code it can look like this:
IMG

How is it done?

As always we start like this:
Create a document library to hold your scripts (or a folder on the root created in SharePoint Designer). In this example i have made a document library with a relative URL of “/test/English/Javascript” (a sub site named “test” with a sub site named “English” with a document library named “Javascript”):
IMG

The jQuery-library is found here. The pictures and the sourcecode refers to jquery-1.3.2.min. If you download another version, be sure to update the script reference in the sourcecode.

Add a CEWP below your NewForm list-form (and EditForm if you like) like this:
IMG

With this code:

<script type="text/javascript" src="/test/English/Javascript/jquery-1.3.2.min.js"></script>
<script type="text/javascript">
fields = init_fields();

var myNewLabel = "<br><div>Here is some custom text added by adressing the formlabel with jQuery!</div>" +
				 "<br><div>You can insert images to:<br><img src='/test/English/Shared%20Documents/jQuery_img.jpg' border='0'></div>"

$(fields['MyChoice']).find(".ms-formlabel h3").after(myNewLabel);

function init_fields(){
  var res = {};
  $("td.ms-formbody").each(function(){
	  if($(this).html().indexOf('FieldInternalName="')<0) return;	
	  var start = $(this).html().indexOf('FieldInternalName="')+19;
	  var stopp = $(this).html().indexOf('FieldType="')-7; 
	  var nm = $(this).html().substring(start,stopp);
	  res[nm] = this.parentNode;
  });
  return res;
}
</script>

The function init_fields() is a modified version of Erucy’s function for finding fields in a SharePoint form. My modified version uses FieldInternalName rather than DisplayName to locate the fields.

Thats it!
Alexander

If you want to add individual labels for each of the choices in the choice list- read this post to learn how.

27 thoughts on “Modify formlabel in SharePoint form”

  2. Pingback: Get variables in a script from another list « SharePoint JavaScript’s
  3. Pingback: Add individual label for each choice in multichoice list « SharePoint JavaScript’s

  5. I did find one small bug, but not anything major. When I first implemented the script, I did not make my change to the FieldInternalName. My result was all fields had the same text and image. Once I made the change it only appeared in the named field area. Still all in all great job.

  8. Hey Alexander, I began implementing this script on a project. I added it to the NewForm with no issues. I added it to the DispForm, and nothing extra is written to the page. does this need to be modified for it to work on the DispForm?
    $(fields[‘question1’]).find(“.ms-formlabel h3”).after(q1);

  10. sorry for bothering you. not really sure what i did. I am working with several scripts and was combining a few to share files and links. I just opened it up and working with no issues. sorry to bother you. thanks

  11. when this is applied to the survey form no go. I did notice the difference. the survey form does not have the h3 after the ms-formlabel but even when I change to this
    [sourcecode type="text/javascript"]
    $(fields[‘Myfield’]).find(".ms-formlabel").after(myNewLabel);

    nothing is written to the page. did I miss something?

    2. this is what I have. I noticed in the survey no h3 after formlabel. Added you check for list or survey and swapped out the variable. still wont write. can you c what I’m missing here?

      [sourcecode type="text/javascript"]
      var q1 = "test";
      $(fields[‘_x0071_1’]).find("td.ms-formlabel").after(q1);
      // Array of all descriptions – must be the same number of elements as the number of choices in the choice-list
      var arrMyChoice = [‘ = Not Applicable’,
      ‘ = Never’,
      ‘ = Rarely’,
      ‘ = Sometimes’,
      ‘ = Most of the time’,
      ‘ = Always’
      ];

      descriptionAfterChoice(‘_x0071_1’,arrMyChoice,75);

      // Standard list
      var tdClassToFind = ‘.ms-formbody’;
      // Is it a survey?
      if($("td.ms-formbodysurvey").length>0){
      tdClassToFind = ‘.ms-formbodysurvey’;
      }

      function descriptionAfterChoice(FieldInternalName,arrName,widthOfCustomLabel){

      $(fields[FieldInternalName]).find(tdClassToFind).find(":radio").each(function(idx){ //(":checkbox")
      // Add alternating style to make it easier to follow the lines in the form
      var trClass = ”;
      if(idx%2==0){
      //trClass = ‘ms-alternatingstrong’;
      trClass = ”;
      }
      $(this).next().after("<span style=’display:inline-block;width:" + widthOfCustomLabel + ";white-space:nowrap’>" + arrName[idx] + "</span>")

      .parent().css({‘white-space’:’nowrap’})
      .parents(‘tr:first’).addClass(trClass);
      });
      }

    3. Hi,
      I was confused a minute as this question should have been posted in this article: Add individual label for each choice in multichoice list.

      I will nevertheless answer here:

      <script type="text/javascript" src="/test/English/Javascript/jquery-1.3.2.min.js"></script>
<script type="text/javascript">
fields = init_fields();
// Array of all descriptions - must be the same number of elements as the number of choices in the choice-list
var arrMyChoice = [
'&nbsp;= Not Applicable',
'&nbsp;= Never',
'&nbsp;= Rarely',
'&nbsp;= Sometimes',
'&nbsp;= Most of the time',
'&nbsp;= Always'
];
// Call the script that inserts the descriptions
descriptionAfterChoice('MyChoice',arrMyChoice,300);

function descriptionAfterChoice(FieldInternalName,arrName,widthOfCustomLabel){
	$(fields[FieldInternalName]).find(".ms-formbodysurvey").find(":radio").each(function(idx){
		// Add alternating style to make it easier to follow the lines in the form
		var trClass = '';
		if(idx%2==0){
			trClass = 'ms-alternatingstrong';
		}
		$(this).next().after("<span style='display:inline-block;width:" + widthOfCustomLabel + ";white-space:nowrap'>" + arrName[idx] + "</span>")
			.parent().css({'white-space':'nowrap'})
			.parents('tr:first').addClass(trClass);
	});
}

function init_fields(){
  var res = {};
  $("td.ms-formbodysurvey").each(function(){
	  if($(this).html().indexOf('FieldInternalName="')<0) return;
	  var start = $(this).html().indexOf('FieldInternalName="')+19;
	  var stopp = $(this).html().indexOf('FieldType="')-7;
	  var nm = $(this).html().substring(start,stopp);
	  res[nm] = this.parentNode;
  });
  return res;
}
</script>

      Alexander

    4. I am sorry if I was confusing. This is the right post area. if you look at the script I posted lines one and two

      var q1 = "test";  
$(fields['_x0071_1']).find("td.ms-formlabel").after(q1);

      is what I cannot get working in the survey. do you mind one more look to see what I missed on that?

    5. Hi again,
      Sorry, i misunderstood.

      In a survey the label is in a separate TR, use this line to add to the formlabel in a survey:

      // Label
$(fields[FieldInternalName]).prev().find(".ms-formlabel").append("<div>Add this text to the label</div>");

      Alexander

  12. back to bug you again with labels. I know this is for forms, but is a list view, setup as a boxed view with labels, How can I use this script or what do i need to modify, to add a label for the field label in a boxed view with labels?

    I found the cell with style .ms-stylelabel, but there must be something else I am missing.

    1. I implemented this code, and it replaced all the names with testing. my fieldinternalname is “question1”. the display name is “01”

      var c = $("td.ms-stylelabel");

c.html.val(c.html().replace(/01/g, "Testing"));

      the page source shows this

      <TD class="ms-stylelabel">
			01
			</TD>

      I just want to replace the 01 with something else, can this be done?

    2. Like this?
      [sourcecode laguage="javascript"]
      $("td.ms-stylelabel").each(function(){
      var oldHtml = $(this).html();
      var newHtml = oldHtml.replace(/01/g, "Testing");
      $(this).html(newHtml);
      });

      Alexander

    1. Paul,
      This is fairly simple. One good thing about CSS is that the last one read on page load is the winner. By applying your style or class in the var you can change it to what ever you want like this:

      var myNewLabel = "<br><div style='width:190px;color:red;'>Here is some custom text added by adressing the formlabel with jQuery!</div>"

      or this

      <style>
.myNewStyle {
color:red;
font-weight:normal;
}
</style>
<script>
...
var myNewLabel = "<br><div class='myNewStyle'>Here is some custom text added by adressing the formlabel with jQuery!</div>" 

..
</script>

    2. one last thing I forgot to mention. I have found once I starting playing with my styles and formatting I needed to add a width attribute of at least 190px. The amount is a personal preference. I needed to add this width mostly with ordered and unordered lists to prevent wrapping and so it would flow with the rest of the page layout.

    1. I figured it out. I ended up not using the var myNewLabel and instead putting my code right in the after() function:

      after(‘Link to Google‘)

      This also worked well since I had several fields and I wanted a different link on each field.

Leave a Reply

This site uses Akismet to reduce spam. Learn how your comment data is processed.