1

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

0

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.

  • 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! – Vlad C. Feb 21 '17 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. – ChrisPEditor Feb 21 '17 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) – Vlad C. Feb 22 '17 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> – Vlad C. Feb 22 '17 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?:( – Vlad C. Feb 23 '17 at 8:35

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.