none
Add headings between the fields in SharePoint list form

    Question

  • Hi,

    I wanted to add some headings to my SharePoint form, I am using default custom SharePoint list. I heard that we can achieve this with JSLink functionality. I saw the below article but it needs to be done through VS.  I can't use VS and InfoPath. Can anyone please share code with JSLink without using VS? Thanks in advance.

    http://andreaswijayablog.blogspot.com/2013/10/sharepoint-2013-list-form-headings.html

    Thanks,

    Cherry


    • Edited by CherryP Friday, November 10, 2017 8:51 PM
    Friday, November 10, 2017 8:50 PM

Answers

  • Hi Cherry,

    Here are two solutions for your reference:

    ONE: Use JSLink

    First we need to upload our JS file into a document list (you can also upload to other list).

    Full code of JS file as below which refer to that blog you provided.

    var scriptObj = document.createElement("script"); 
        scriptObj.src = "https://code.jquery.com/jquery-3.2.1.min.js"; 
    	scriptObj.type = "text/javascript"; 	   
    	document.getElementsByTagName("head")[0].appendChild(scriptObj);
    
    	  
        window.onload=function () {
            //Headings
             $('<tr><td><h2>Contact details</h2></td></tr>').insertBefore($('h3:contains("Title")').parent().parent());
            $('<tr><td><h2>Company code</h2></td></tr>').insertBefore($('h3:contains("Company")').parent().parent());
            $('<tr><td><h2>Company details</h2></td></tr>').insertBefore($('h3:contains("Employee")').parent().parent());
            //Hide content type dropdown in Edit
            $("select[id*='ContentTypeChoice']").closest('tr').hide();
        }

    Then in your DispForm.aspx/EditForm.aspx/NewForm.aspx page, click “Edit Page”.

    Next click “Edit Web Part”

    insert your JS file path. For more information about JS Link path, you can refer to: http://www.learningsharepoint.com/2013/09/16/set-js-link-webpart-property-in-sharepoint-2013/

    Finally, click “Stop EDiting” to save your changes, and you will see what you want.

    Screenshot of result:

    TWO:

    We can insert JS code directly into our DispForm.aspx/EditForm.aspx/NewForm.aspx page.

    First, click “Edit Page”.

    Second, add a Script Editor web part.

    Then, click “EDIT SNIPPET” to insert JS code into this web part.

    Next insert the JS Code into it. My full code which refer to the blog you provided is shown below:

    <script type="text/javascript" src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
    <script type="text/javascript">
    
        $(document).ready(function () {
            //Headings
            $('<tr><td><h2>Contact details</h2></td></tr>').insertBefore($('h3:contains("Title")').parent().parent());
            $('<tr><td><h2>Company code</h2></td></tr>').insertBefore($('h3:contains("Company")').parent().parent());
            $('<tr><td><h2>Company details</h2></td></tr>').insertBefore($('h3:contains("Employee")').parent().parent());
    
            //Hide content type dropdown in Edit
            $("select[id*='ContentTypeChoice']").closest('tr').hide();
        });
    
    </script>

    Last, click “stop editing” to save you change and you will see what you want.

    Best regards

    Lee Liu


    Please remember to mark the replies as answers if they help.
    If you have feedback for TechNet Subscriber Support, contact tnmff@microsoft.com



    Monday, November 13, 2017 3:01 AM

All replies

  • Hello Cherry,

    You can use below link to achieve your requirement. It explains you how to configure JSLink through UI, VS and powershell. 

    https://zimmergren.net/sp-2013-using-the-spfield-jslink-property-to-change-the-way-your-field-is-rendered-in-sharepoint-2013/ 

    Regards,

    Ratnesh 

    Friday, November 10, 2017 9:37 PM
  • Hi,

    You dont have to specifically use JSLink to achieve this. You can get this done by adding the below jQuery in the blog you had shared to the Custom New Form/Edit Form /Display Form. 

    $(document).ready(function () {
        //Headings
        $('<tr><td><h2>Contact details</h2></td></tr>').insertBefore($('h3:contains("Title")').parent().parent());
        $('<tr><td><h2>Application details</h2></td></tr>').insertBefore($('h3:contains("Application")').parent().parent());
        $('<tr><td><h2>Request details</h2></td></tr>').insertBefore($('h3:contains("Description")').parent().parent());
     
        //Hide content type dropdown in Edit
        $("select[id*='ContentTypeChoice']").closest('tr').hide();
    });

    - Open the SharePoint Designer and Go to the New Form/Edit Form/Display Form of the list. 

    - Add the above jQuery to the Forms. 

    You can add the jQuery reference after the below line in the List Form

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


    More Reference

    Regards,

    Priyan


    Please Up Vote and Mark this as Answer if it helps.

    Saturday, November 11, 2017 6:24 AM
  • Hi Cherry,

    Here are two solutions for your reference:

    ONE: Use JSLink

    First we need to upload our JS file into a document list (you can also upload to other list).

    Full code of JS file as below which refer to that blog you provided.

    var scriptObj = document.createElement("script"); 
        scriptObj.src = "https://code.jquery.com/jquery-3.2.1.min.js"; 
    	scriptObj.type = "text/javascript"; 	   
    	document.getElementsByTagName("head")[0].appendChild(scriptObj);
    
    	  
        window.onload=function () {
            //Headings
             $('<tr><td><h2>Contact details</h2></td></tr>').insertBefore($('h3:contains("Title")').parent().parent());
            $('<tr><td><h2>Company code</h2></td></tr>').insertBefore($('h3:contains("Company")').parent().parent());
            $('<tr><td><h2>Company details</h2></td></tr>').insertBefore($('h3:contains("Employee")').parent().parent());
            //Hide content type dropdown in Edit
            $("select[id*='ContentTypeChoice']").closest('tr').hide();
        }

    Then in your DispForm.aspx/EditForm.aspx/NewForm.aspx page, click “Edit Page”.

    Next click “Edit Web Part”

    insert your JS file path. For more information about JS Link path, you can refer to: http://www.learningsharepoint.com/2013/09/16/set-js-link-webpart-property-in-sharepoint-2013/

    Finally, click “Stop EDiting” to save your changes, and you will see what you want.

    Screenshot of result:

    TWO:

    We can insert JS code directly into our DispForm.aspx/EditForm.aspx/NewForm.aspx page.

    First, click “Edit Page”.

    Second, add a Script Editor web part.

    Then, click “EDIT SNIPPET” to insert JS code into this web part.

    Next insert the JS Code into it. My full code which refer to the blog you provided is shown below:

    <script type="text/javascript" src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
    <script type="text/javascript">
    
        $(document).ready(function () {
            //Headings
            $('<tr><td><h2>Contact details</h2></td></tr>').insertBefore($('h3:contains("Title")').parent().parent());
            $('<tr><td><h2>Company code</h2></td></tr>').insertBefore($('h3:contains("Company")').parent().parent());
            $('<tr><td><h2>Company details</h2></td></tr>').insertBefore($('h3:contains("Employee")').parent().parent());
    
            //Hide content type dropdown in Edit
            $("select[id*='ContentTypeChoice']").closest('tr').hide();
        });
    
    </script>

    Last, click “stop editing” to save you change and you will see what you want.

    Best regards

    Lee Liu


    Please remember to mark the replies as answers if they help.
    If you have feedback for TechNet Subscriber Support, contact tnmff@microsoft.com



    Monday, November 13, 2017 3:01 AM
  • Thank you so much Lee for your step by step explanation. I will try it and let you know the update.
    Monday, November 13, 2017 2:06 PM
  • Thank you Priyan.
    Monday, November 13, 2017 2:07 PM
  • hello,

    if you only need to add some text (e.g. between FieldA and FieldB) you may do it without customizations: go to List settings > FieldA > add your text to Description of the field. It will appear under FieldA and between FieldB.


    Blog - http://sadomovalex.blogspot.com
    Dynamic CAML queries via C# - https://github.com/sadomovalex/camlex

    Monday, November 13, 2017 2:49 PM
  • Worked like a charm. Thank you so much. 
    Monday, November 13, 2017 3:03 PM