SharePoint form: present fields side-by-side

I got this request from Khan:

Alexander,
… Another question I have is how I can display two fields (and their labels) in the same row? I know I am asking too much. But I really hope you can give me some advice o this. Thanks man.

Here is an image of a few random fields put side-by-side:
IMG

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/DispForm/EditForm with this code:

<script type="text/javascript" src="/test/English/Javascript/jquery-1.3.2.min.js"></script>
<script type="text/javascript" src="/test/English/Javascript/FieldsSideBySide.js"></script>
<script type="text/javascript">
  // Append fields to the field "User"
  arrToPutSideBySide = ['StartTime','EndTime'];
  customSideBySide(arrToPutSideBySide,'User');
  // Appends another set of fields to the field "User"
  arrToPutSideBySide = ['FirstName','MiddleName','LastName'];
  customSideBySide(arrToPutSideBySide,'User');

  // To append the fields to the top use this code:
  //arrToPutSideBySide = ['FirstName','MiddleName','LastName'];
  //customSideBySide(arrToPutSideBySide,'',true);
</script>

This code is not the full code from the screenshot above. Each horizontal “section” is made with a separate call to the function “customSideBySide()”.

Parameters explained:

  • arr: Array or fields to put in one line.
  • insertAfterField: If you want to append the fields below another field, insert the FieldInternalName here. Set this parameter to “” if you want to use the next parameter.
  • appendToTop: To insert the fields in the top of the form, set it to true. To insert at the bottom of the form, set it to false.

The sourcecode for the file “FieldsSideBySide.js” looks like this:

/* Sharepoint form: Present fields side-by-side
 * ---------------------------------------------
 * Created by Alexander Bautz
 * alexander.bautz@gmail.com
 * https://spjsblog.com
 * v1.0
 * LastMod: 26.01.2010
 * ---------------------------------------------
 * Must include reference to:
 *  jQuery - http://jquery.com
 * ---------------------------------------------
*/

function customSideBySide(arr,insertAfterField,appendToTop){
if(typeof(fields)=='undefined')fields = init_fields();
// Does the field specified as "insertAfterField" exist?
if(insertAfterField!='' && typeof(fields[insertAfterField])=='undefined'){
	alert("The FieldInternalName "" + insertAfterField + "", which is specified as "insertAfterField" does not exist.");
	return false;
}
	var str = '';
	$.each(arrToPutSideBySide,function(i,fin){
		// Check if FieldInternalName is correct
		if(typeof(fields[fin])=='undefined'){
			alert("The FieldInternalName "" + fin + "" does not exist.");
			return false;
		}
		// Adapt width of single line and multi lines of text
		if($(fields[fin]).html().indexOf('FieldType="SPFieldText"')>0){
			$(fields[fin]).find('input').css({'width':'100%'});
		}else if($(fields[fin]).html().indexOf('FieldType="SPFieldNote"')>0){
			$(fields[fin]).find('textarea').css({'width':'100%'});
		}
		var tdWidth = Math.round(100/arr.length);
		str += "<td class='ms-formbody' style='width:"+tdWidth+"%'>" + $(fields[fin]).find('.ms-formlabel').html() + $(fields[fin]).find('.ms-formbody').html() + "</td>";
		// Remove original field
		$(fields[fin]).remove();			
	});
	str = "<tr><td colspan='2'><table cellpadding='0' cellspacing='0' style='width:100%'><tr>" + str + "</tr></table></td></tr>";	
	if(insertAfterField!=''){
		$(fields[insertAfterField]).after(str);
	}else{
		if(appendToTop){
			$("table.ms-formtable tbody:first").prepend(str);
		}else{
			$("table.ms-formtable tbody:first").append(str);
		}
	}
}

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;
}

Save as “FieldsSideBySide.js” – mind the file extension, and upload to the script library as shown above.

Ask if something is unclear.

Regards
Alexander

78 Comments on “SharePoint form: present fields side-by-side”

  4. Pingback: Links (1/31/2010) « Steve Pietrek-Everything SharePoint/Silverlight

  6. hi i am trying to use the field side by side and I can get it to work for the first section but how do you have it skip a few fileds and go to another set to be side by side.

    Do you have and example of the CEWP for the screenshot that would probably answeer my question

    1. Hi,
      This is archived by using “insertAfterField” = “User” like this:

        arrToPutSideBySide = ['FirstName','MiddleName','LastName'];
  customSideBySide(arrToPutSideBySide,'User');

      Alexander

    2. So if I wanted to have first name ,middle name, and last name on a line and lets say have start time and end time vertical and then have address and telephone vertical which is the default for a form would I just just set a new array and call it the same as the example with endtime being my insertafterfield?

  8. I tried to update the and additional array and have been unsuccessful. it just keeps posting the the first array instead of rolling down to the next custom side by side 

    arrToPutSideBySide = ['FirstName','MiddleName','LastName'];
arrToPutSideBySide2 = ['starttime','endtime'];
customSideBySide(arrToPutSideBySide,'User');
customSideBySide(arrToPutSideBySide2,'');

    1. Hi,
      You are missing one argument in the function call. You must provide either “insertAfterField” or “appendToTop”.

      customSideBySide(arrToPutSideBySide2,'',true); // true = appendToTop

      Alexander

    2. Hi Alexander,

      I followed your instructions and the fields are dropping to the correct place but it keeps replicating the firstname,middlename,and lastname field instead of populating starttime and endtime on the second customsidebyside

      I am using the following…

      arrToPutSideBySide = ['RequestorsName','ApplicationOwner','Sponsor'];
arrToPutSideBySide2 = ['Duration','ExpirationDate'];
customSideBySide(arrToPutSideBySide,'',true);// true = appendToTop
customSideBySide2(arrToPutSideBySide2,'ProjectInformation');

  11. I do not have the option to add a CEWP the ‘editform.aspx’ page.

    I have tried including the list in a web part page, but when editing items from within this web part page – the edit page does not open within the web part page…it forward to the editform.aspx page.

    Any ideas?

    Thanks muchly!

  12. Hey Alexander,
    I have create list as show in the picture , when i add the code in CEWP am getting error FieldInternalError “FirstName” does not exit in window pop . am new to developer role could u please explain how add the code where to place the code. i have jquery-1.4.1 & FieldsSideBySide.js in doc library

    this is following code i have add in CEWP

    // Append fields to the field “User”
    //arrToPutSideBySide = [‘StartTime’,’EndTime’];
    //customSideBySide(arrToPutSideBySide,’User’);
    // Appends another set of fields to the field “User”
    arrToPutSideBySide = [‘MiddleName’,’LastName’];
    customSideBySide(arrToPutSideBySide,’User’);

    // To append the fields to the top use this code:
    //arrToPutSideBySide = [‘FirstName’,’MiddleName’,’LastName’];
    //customSideBySide(arrToPutSideBySide,”,true);

  13. Hi Alexander,

    This is my JS Code

    // Append fields to the field “User”
    //arrToPutSideBySide = [‘StartTime’,’EndTime’];
    //customSideBySide(arrToPutSideBySide,’User’);
    // Appends another set of fields to the field “User”
    arrToPutSideBySide = [‘FirstName’,’MiddleName’,’LastName’];
    customSideBySide(arrToPutSideBySide,’User’);

    // To append the fields to the top use this code:
    //arrToPutSideBySide = [‘FirstName’,’MiddleName’,’LastName’];
    //customSideBySide(arrToPutSideBySide,”,true);

    1. You have to check your FieldInternalName. Follow Alexander’s directions just above. It is important to understand that your FieldInternalName most likely does not match your display name.

      Once you confirm you have the correct FieldInternalName for all your fields and ‘User’ is one of your fields your JS should work.

    1. This script brakes the page apart and basically deletes the original fields. The hiding will work if the fields are not wrapped, but not if they are.

      You would have to write another function to identify the fields after they are wrapped (the init_fields() does not work after the fields are wrapped).

      Try to make a function like init_fields() and run it after the fields are wrapped. Use the “object” you get from that function like you do with the object “fields”.

      Give it a go, and let me know if you get it working.

      Alexander

    2. Hi, I’m having the same problem with the side-by-side script not working with the show/hide script. I don’t understand how to create the second init_fields script. Can you point me in the right direction please?

      Thank you

  16. Hi Alex I did like you said and it worked. I just had to initiate the fields after I made them side by side and it worked like a charm. Thanks for all all you do it is greatly appreciated.

    1. Alexander/Mark :

      I am trying to do the exact same thing, tried init_fields() after wrapping but it is not working for me, can you point me in the right direction, please!..Thanks much!!

  17. Please help. Everythang checks out but my code fail at the “typeof(fields[insertAfterField])” area. The code return an “The FieldInternalName does not exist.” error. I have confirmed that the am using valid FieldInternalNames. Any Ideas?
    .

    1. Hi John
      I would like to Know how u have solved your problem, am also getting same problem, I have checked the FieldInternalName is correct, even i have given The FieldInternalName as Title, still am getting same error.

      The FieldInternalName does not exist.” error.

    1. Hi,
      Just change the FieldInternalName to match your fields in the function call

      arrToPutSideBySide = ['Title','User'];

      Alexander

    3. Another question: how do I put a field beside the field I’m using to append to/below? Using your example how would you put a field beside User?

    4. Hi, my solution to this question was to create a “dummy” field which will be used as the first field. The code to hide this field is simple and it solves the problem to your question.

  21. Hi Alexander
    I have checked the FieldInternalName is correct, even i have given The FieldInternalName as Title, still am getting same error.

    The FieldInternalName does not exist.” error.

    Could please help me in this issuse

  22. Hi All,

    I have resolved The FieldInternalName does not exist.” error.
    Just add ContentEditorWebPart below all web part (At bottom of the main webpart zone.)

  24. Is there a way to suppress the error prompts? I have content types on a list and certain content types have arranged fields. Others do not, hence the error.

  25. Hi Alexander. Is there any way to combine this solution with your Tabs in Sharepoint Forms solution? I tried to put both scripts on my DispForm and it “worked” but with undesireable results.

    For example: the side by side fields picked up strange styles, and they appear on every tab instead of just after the single appended field that I specified in the CEWP.

    1. The error says, “The Field Internal Name does not exist”, but again, it does work in IE

      It looks like in Firefox, the last letter of the field internal name is being cut off.

      Thanks!

  28. This is working great with the exception of date fields. The calendar pop-up is not working. I am not getting any errors, the pop-up just does not display Did anyone else run into this issue? If so, how did you resolve?

  29. This will not work on a custom form as there is no FiledInternalName…

    The function init_fields needs to be flexible to accomodate this i.e.

    function init_fields(type)

    1. There is no way you could have a function that identifies fields in all customized forms. The fact that the form is customized by individual users makes it impossible to span them all in one function. If you read the topmost note on the front page of this site, I have given an example on how you can make your own custom “init_fields” function.

      Alexander

  30. I am receiving the following message: “The FieldInternalName “User”, which is specified as “insertAfterField” does not exist.

    Any ideas?

    Thanks,
    Brian

      1. Thanks Alexander! I will review it. Another Question? I have a list that has over 200 columns and when viewing and editing the contents of the list, I have to scroll through the entire list to review fields that have information in them traversing fields that are blank. The fields are unique for each record and may be populated depending on the record so hiding them is not an option. Is there a way without using SharePoint Designer to dynamically sort fields on a list on New, Edit, and Disp form that have content in them for each unique record?

        Your feedback is greatly appreciated.

        Regards,
        Brian

    2. Hi,
      I’m not sure I understand. What do you mean by “each unique record”? How would the script know which fields to show or hide?

      Please answer by adding a new comment (with the full explanation) in the requests-page

      Alexander

  31. Hi Alexander,

    First, I got the side by side functionality to work. It was the “Field Internal Name”. Thanks! I have a list that has a large number of records and some of those records do not have values in all of the columns. Some of the fields are blank which is why I called them unique. I am importing a spreadsheet into SharePoint as a list. The data is an output from another system. The issue is that each record is too long to scroll through. When I display a record or edit I have to scroll down through all of these fields in the record that some of them are blank. I am only interested in seeing the ones with content in them. I can’t hide them because while one record may have a column that is empty it maybe populated in another record. I am looking to better display the list record when viewing or editing by not having to scroll an entire record for information. I want the ability to show the record with fields that have content first then the blank fields to appear after them on a sharepoint list.

    Thanks,
    Brian

  32. Hi Alexander,

    your code is working fine for me. But I need to customize the page like both label and textbox field should together (in one line), not one below the other.

    Can you please suggest me?

    Thanks,
    Gomathy

  33. Hello Alexander,
    this code works great for me but I tried to combine this with your Script “Tabs for SharePoint Forms v.2.0”.
    Both scripts in one form are not working. Do you know how I can use both scripts?

    Regards,
    uddu

  34. Hi Alexander

    This works great, however the issue I have on a from that is quite wide is the spacing between the fields.

    I have three fields with about 3 inches between them.

    Is it possible using jquery to set the width between fields on a form ?

    Iain

  35. Hi Alexander,

    Thank you so much for this post. I have a question… How can adjust the field name to the right side (only for the first field) – I want the form to look like below:

    Middle Name Last Name
    First Name [text box] [text box] [text box]

    Thanks again,
    Srikanth

  36. I used scripts as said above but still did not solve anything. I’ve tried to follow other options and they gave nothing, I was wondering if it was possible to give me some help with this issue.

    In init_fields() {… says “un canght reference error: $ is not defined.”

  37. I’ve got a custom list with 3 fields:
    1 Promo Code (FieldInternalName=”Title”)
    2. Pxt (FieldInternalName=”PXT”)
    3. test2 (FieldInternalName=”test2″)

    I want to put Pxt and test2 side by side on my newform.

    I’ve added the FieldsSideBySide.js to my site, and below is my code which I’ve added directly after ” on newform.aspx, however it’s not working. Any ideas?

    Cheers,
    Matt

    arrToPutSideBySide = [‘PXT’,’test2′];
    customSideBySide(arrToPutSideBySide, ‘Title’);

  38. Hi,
    I cannot get this one to work. I have your great WrapChoiceFields working beautifully using the same newform. The function tip you suggest using has a function not defined for customSideBySide but I cannot figure it out.
    I am using
    arrToPutSideBySide = [‘Side1’, ‘Side2’];
    customSideBySide(arrToPutSideBySide, ‘User’);
    I confirmed Side1, Side2 and User are the internalfieldnames.
    I even changed the jquery version from 1.9.1 back to 1.3.2 in case it was a jquery issue.
    Thank you!

  39. Pingback: SharePoint form: present fields side-by-side: Updated version « SharePoint JavaScripts

  40. Hello Alexander-

    I am stumped on the CEWP with SP 2010. I add the CEWP below the new form as stated in the instructions. I add the files to the document library. I change the jquery to reference 1.10. When I save the webpart nothing changes. Am I missing something?

  41. Same solution Iam trying at SP 2013. It works as expected but side by side field values are not saving into list. Can you pls. look into this.

Leave a Reply

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