How to Edit SharePoint 2013 Custom List in SharePoint Designer

Do you want to customize your SharePoint 2013 list? Do you have big number of columns in your list? Do you want to create customize online form for it? If Yes, then this post is specially made for you! In this post we will edit custom list in SharePoint Designer 2013.

Let me explain you in brief about what exactly we are going to do in next half an hour. Suppose you have a list with 50 columns. Now when you create a new item in your list, it becomes a big form with scrollbar, which is not user friendly. So what if we make sections of those columns and make an online form like structure which has different sections to be filled by user? Sounds great, right?

For making step by step tutorial for this customization of list, I have created one list named TestList. In this list I have columns named Title, First Name, Last Name, Employee Number and Contact Number. Now when you try to create a new item in this list, you will see a form like this:

Now here we have only 5 columns so its looks good, but what if you have 50 columns? Does it looks great? Say you have 10 fields for Personal information, 10 fields for address and so on. So we can make section of these fields and can make online form with it. Just click on section to expand or collapse the fields. We can make it possible through SharePoint Designer. So let us start customizing SharePoint list step by step.

Step 1: Open you list in SharePoint Designer (SPD 2013). By default there are three forms: NewForm.aspx, EditForm.aspx, DispForm.aspx. So click on New button under Forms section to create New Custom Form.Now we want to create custom form for New Item, so enter name for your new form (NewCustomForm) and click on New Item Radio button. Keep other fields as it is and click OK. Similarly you can follow this step for Display form and Edit form.

Step 2: You can now see NewCustomForm in Forms section. Click on it to customize our list. Now the coding part starts here!

We want to make two sections as Section A and Section B. We will put Title, First Name and Last name in Section A. Also Employee Number and Contact Number in Section B.

So find <tr> tag for Title field and paste the following code just above it.

 <div id="divSectionA" style="background-color:gray; cursor:pointer; height:26px; width:74%; background-color:orange; color:black; font-weight:bold; margin-bottom:3px">Section A</div>  
 <tbody id="bodySectionA" style="display:none; border:medium; border-color:orange" >  

Similarly find </tr> tag of last field of this section that is Last Name and end the <div>, <tbody> and one more tag of <table>. So our code will look like this:

    <table border="0" cellspacing="0" width="100%">
        <div id="SectionA" style="background-color:gray; cursor:pointer; height:26px; width:74%; background-color:orange; color:black; font-weight:bold; margin-bottom:3px"> Section A</div>  
        <tbody id="ASection" style="display:none; border:medium; border-color:orange" >  
               <tr>  
               ..........
               </tr>  
               <tr>  
               ..........
               </tr>  
               <tr>  
               ..........
               </tr>  
        </tbody>  
    </table>  

Now to add Section B for Employee Number and Contact Number fields copy same code after </table> tag of first section. Make sure that we have to add one more <table> tag for section B. So our code for Section B will look like this:

     <table>  
        <div id="divSectionB" style="background-color:gray; cursor:pointer; height:26px; width:74%; background-color:orange; color:black; font-weight:bold; margin-bottom:3px"> Section B</div>  
        <tbody id="bodySectionB" style="display:none">  
               <tr>  
                               
               </tr>  
               <tr>                                
                           
               </tr>  
        </tbody>  

Now here we don’t need to close <table> tag manually because there is </table> tag already available which was for first <table> tag.

Step 3: Now we have to include the jQuery in the page. So find the below code in your page

 <script>  
      var elm = document.getElementById(&quot;idAttachmentsTable&quot;);  
      if (elm == null || elm.rows.length == 0)  
      document.getElementById(&quot;idAttachmentsRow&quot;).style.display=&apos;none&apos;;  
 </script>  

and paste below code just after above code:

 <script src="//code.jquery.com/jquery-1.10.1.min.js" type="text/javascript"></script>  
 <script language="javascript" type="text/javascript">  
      $(document).ready(function() {  
        $(&quot;#divSectionA&quot;).click(function(){  
           $(&quot;#bodySectionA&quot;).toggle();  
        });  
        $(&quot;#divSectionB&quot;).click(function(){  
           $(&quot;#bodySectionB&quot;).toggle();  
        });  
      });  
 </script>  

That’s it! You are done! Now your form will look like this.

Finally make sure that you have selected NewCustomForm as default. To make this form as default, Select the form in Forms section of SharePoint Designer. See below screenshot.

If you like this article, please share it with your friends and like or facebook page for future updates. Subscribe to our newsletter to get notifications about our updates via email. If you have any queries, feel free to ask in the comments section below. Have a nice day!

The post How to Edit SharePoint 2013 Custom List in SharePoint Designer appeared first on MyClassBook.