2

I have the following modified version of Curtis Weir's field hiding script from dmcinfo.com which I want to run using the SharePoint OOTB Script Editor:

 <script src="//code.jquery.com/jquery-latest.min.js"></script> <script> function SeparateFields() { //Enter the fields you would like to have a separator at the bottom here. fieldsToSeparate = ["Title","Document Type"] //Get all SharePoint fields var formFieldTitles = $(".ms-formtable td.ms-formlabel h3.ms-standardheader"); //Iterate over each row in the form formFieldTitles.each(function () { //Get the text of the field title var textToMatch = $(this).text(); //Get the table row associated with this title var currentRow = $(this).closest('tr'); //Iterate over our list of fields we wish to separate for (var i = 0; i < fieldsToSeparate.length; i++){ var field = fieldsToSeparate[i]; //Match the SharePoint field name to our field name if (textToMatch.toLowerCase().replace("*", "").trim() === field.toLowerCase().replace("*", "").trim()){ //Separate this field $(currentRow).css({border-bottom: "1px solid black"}) } } }); } function AddToBodyOnLoad(){ //Ensure that our function is called last by pushing it again _spBodyOnLoadFunctionNames.push("SeparateFields"); } //Add our function to the array of onload functions _spBodyOnLoadFunctionNames.push("AddToBodyOnLoad"); </script>

It works great if I want to hide a column, for example "Name" which is normally "blocked" and not editable.(by substituting $(currentRow).css({border-bottom: "1px solid black"}) with $(currentRow).hide(); and naming the variables appropriately.

What I need to do now is to change the style of certain columns like "Title" and "Document Type" to also contain a separator ( a line underneath them to separate section within a form. What I tried does not work at all. Could you please help me achieve this?

PS: I have found that the following code adds a bottom border line for every column in my form but this is outside the scope since I only need to separate certain columns:

 <style type="text/css"> #onetIDListForm .ms-formtable .ms-formlabel, #onetIDListForm .ms-formtable .ms-formbody { border-bottom: 5px solid black; </style>

PS2 : I cannot insert files in the assets lib. Can only use script editor web part.

PS3 : I am new to JS/CSS/HTML and have 0 experience in integrating such features in SharePoint

EDIT 01.03.2017

This is what I got in the console:

HTML1300: Navigation occurred. File: EditForm.aspx

DOM7011: The code on this page disabled back and forward caching. For more information, see: http://go.microsoft.com/fwlink/?LinkID=291337 File: start.aspx

HTML1512: Unmatched end tag. File: EditForm.aspx, Line: 95, Column: 9

HTML1514: Extra "" tag found. Only one "" tag should exist per document. File: EditForm.aspx, Line: 96, Column: 1

SCRIPT1006: Expected ')' File: EditForm.aspx, Line: 862, Column: 1

SEC7115: :visited and :link styles can only differ by color. Some styles were not applied to :visited. File: EditForm.aspx

EDIT 06.03 Here are the new log entries

DOM7011: The code on this page disabled back and forward caching. For more information, see: http://go.microsoft.com/fwlink/?LinkID=291337

HTML1300: Navigation occurred. File: EditForm.aspx

HTML1512: Unmatched end tag. File: EditForm.aspx, Line: 95, Column: 9

HTML1514: Extra "" tag found. Only one "" tag should exist per document. File: EditForm.aspx, Line: 96, Column: 1

SEC7115: :visited and :link styles can only differ by color. Some styles were not applied to :visited. File: EditForm.aspx

Improve this question

1 Answer 1

Reset to default
1

This is probably not the answer you really want but, for my money, Mark Rackley's method for customizing OOTB list forms really gives you the most amount of control over what the end result looks and acts like.

The basic idea, here, is that you build your own HTML framework (I like to use the Office UI Fabric grid system, myself) and then let Rackley's script loop over the actual fields themselves and plop them into my design.

Edit

Rather than try and shove this in the comment, thought I'd add this here, where I have more room.

If you can't convince your site/site collection/farm admins to let you put some js and css files in SiteAssets, let's just take the pieces of Rackley's script that might help. Namely, iterating over the tds in the ms-formtable and identifying the fields we want by that comment text included in the html:

$('table.ms-formtable td').each(function(){ if(this.innerHTML.indexOf('FieldName="Title"')!=-1){ $(this).css('border-bottom','5px solid black'); } }

Edit #2 Inre my comments, below:

So, you wrote:

$('table.ms-formtable td').each(function separate(){ if(this.innerHTML.indexOf('FieldName="Title"')!=-1){ $(this).css('border-bottom','5px solid black'); } }); function AddToBodyOnLoad(){ _spBodyOnLoadFunctionNames.push("separate"); } _spBodyOnLoadFunctionNames.push("AddToBodyOnLoad");

I'm not sure you need to worry about that BodyOnLoad business, I think the script editor web part takes care of that for you. And you don't need to name the function inside of $.each. So we can make sure we're actually selecting things and that our condition is being met, we need to do some console logging, like so:

$('table.ms-formtable td').each(function(){ console.log(this) //to make sure our jQuery selector is working. if(this.innerHTML.indexOf('FieldName="Title"')!=-1){ console.log(true); //to make sure our condition is hitting. $(this).css('border-bottom','5px solid black'); }else{ console.log(false); } });

For the first console.log, you should see a bunch of td's pop up in your Developer tools console. For the second, you should see one true and a bunch of falses, indicating the td that meets our condition and all the tds that don't.

Improve this answer
14
  • Thanks for the tip but I cannot apply it. My company has very strict limitations in terms of what I am allowed to do since the HQ is unwilling to give us access to the main site. I need to find a way to plop some elements in the script editor and make it work. Thanks again for investing your time into this! Commented Feb 21, 2017 at 8:22
  • I'm confused. What I linked to, above, is exactly what you're describing. I mean, it's definitely easier to go the extra step to upload some js and html to a SiteAssets library and then reference those items in a content editor webpart, but I suppose you could accomplish the same thing putting it in a script editor web part. Commented Feb 21, 2017 at 19:01
  • Well, I can't add any extra material in the site assets. Only allowed to run script editor. I tried the script with my ms-standardheader class but it fails for the header fields no longer display. Furthermore, the mechanism to search through the column names works on the script I posted. I just can't get the right instruction to actually add the bottom-border correctly. (need to make the code written at the bottom apply to that certain element found) Commented Feb 22, 2017 at 7:24
  • I could even go for a simpler approach to this like: .ms-formlabel, .ms-formbody that contain "Title" get .css("border.bottom", "2px solid black"). This is how the source html look like: <td width="113" class="ms-formlabel" nowrap="true" valign="top"><h3 class="ms-standardheader"> <nobr>Title</nobr> </h3></td> <td width="350" class="ms-formbody" valign="top"> <!-- FieldName="Title" FieldInternalName="Title" FieldType="SPFieldText" --> //some properties missing </td> Commented Feb 22, 2017 at 8:18
  • It's still not working. This is exactly what i've written in the script editor web part: <script type="text/javascript"> $('table.ms-formtable td').each(function(){ if(this.innerHTML.indexOf('FieldName="Title"')!=-1){ $(this).css('border-bottom','5px solid black'); } } </script> Am I doing something wrong?:( Commented Feb 23, 2017 at 8:35

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.