locked
create a custom html form with create/update functionalitywith expand/collapse sections RRS feed

  • Question

  • I would like to create a custom html form with expand/collapse sections with client side code in SP Online.


    Das

    Wednesday, April 3, 2019 10:15 AM

Answers

  • Hi,

    If you want to create a custom list form with expand/collapse sections, the following example for your reference.

    1. Create a custom list.

    2. Add 6 columns(column1,column2,column3,column4,column5,column6) to the list.

    3. Download the HillbillyTemplate.js from: https://github.com/mrackley/HillbillyTemplate

    4. Upload the HillbillyTemplate.js file into Site Assets library.

    5. Add the following code into script editor web part in the list New/Edit form page. 

    <script type="text/javascript" src="//code.jquery.com/jquery-1.11.1.min.js"></script> 
    <link type="text/css" rel="stylesheet" href="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.0/themes/start/jquery-ui.css" > 
    <script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.0/jquery-ui.min.js"></script> 
    <script type="text/javascript" src="../../SiteAssets/HillbillyTemplate.js"></script> 
    <style type="text/css">  
    .ms-formtable{display:none;}
    </style>
    
    <script type="text/javascript">
    jQuery(document).ready(function($) {
    	var tabsObj = [ 
    		["General", ["Title", "column1", "column2"]], 
    		["Admin", ["column3", "column4"]],
    		["Misce", ["column5", "column6"]]
    	];
    	buildAccordion(tabsObj);
    	$().HillbillyTemplate({
    		genericAlert: true,
    		alertErrorText: "Form errors exist. Please fix form errors and try again"
    	});
    	$("#accordion").accordion();
    });
    function buildAccordion(tabsObj){
    	for(var i=0;i<tabsObj.length;i++){
    		var section=tabsObj[i][0];
    		var columns=tabsObj[i][1];
    		var accordionHTML="<h3>"+section+"</h3><div><p><table>";
    		for(var j=0;j<columns.length;j++){
    			accordionHTML+="<tr><td>"+columns[j]+":</td><td><span class='hillbillyForm' data-displayName='"+columns[j]+"'></span></td></tr>";
    		}
    		accordionHTML+="</table></p></div>";
    		$("#accordion").append(accordionHTML);
    	}
    }
    </script>
    <span class="hillbillyFormSave"></span>
    <span class="hillbillyFormCancel"></span>
    <div id="accordion">   
    </div>

    Best Regards,

    Dennis


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

    SharePoint Server 2019 has been released, you can click here to download it.
    Click here to learn new features. Visit the dedicated forum to share, explore and talk to experts about SharePoint Server 2019.

    Thursday, April 4, 2019 3:05 AM

All replies

  • Hi,

    If you want to create a custom list form with expand/collapse sections, the following example for your reference.

    1. Create a custom list.

    2. Add 6 columns(column1,column2,column3,column4,column5,column6) to the list.

    3. Download the HillbillyTemplate.js from: https://github.com/mrackley/HillbillyTemplate

    4. Upload the HillbillyTemplate.js file into Site Assets library.

    5. Add the following code into script editor web part in the list New/Edit form page. 

    <script type="text/javascript" src="//code.jquery.com/jquery-1.11.1.min.js"></script> 
    <link type="text/css" rel="stylesheet" href="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.0/themes/start/jquery-ui.css" > 
    <script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.0/jquery-ui.min.js"></script> 
    <script type="text/javascript" src="../../SiteAssets/HillbillyTemplate.js"></script> 
    <style type="text/css">  
    .ms-formtable{display:none;}
    </style>
    
    <script type="text/javascript">
    jQuery(document).ready(function($) {
    	var tabsObj = [ 
    		["General", ["Title", "column1", "column2"]], 
    		["Admin", ["column3", "column4"]],
    		["Misce", ["column5", "column6"]]
    	];
    	buildAccordion(tabsObj);
    	$().HillbillyTemplate({
    		genericAlert: true,
    		alertErrorText: "Form errors exist. Please fix form errors and try again"
    	});
    	$("#accordion").accordion();
    });
    function buildAccordion(tabsObj){
    	for(var i=0;i<tabsObj.length;i++){
    		var section=tabsObj[i][0];
    		var columns=tabsObj[i][1];
    		var accordionHTML="<h3>"+section+"</h3><div><p><table>";
    		for(var j=0;j<columns.length;j++){
    			accordionHTML+="<tr><td>"+columns[j]+":</td><td><span class='hillbillyForm' data-displayName='"+columns[j]+"'></span></td></tr>";
    		}
    		accordionHTML+="</table></p></div>";
    		$("#accordion").append(accordionHTML);
    	}
    }
    </script>
    <span class="hillbillyFormSave"></span>
    <span class="hillbillyFormCancel"></span>
    <div id="accordion">   
    </div>

    Best Regards,

    Dennis


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

    SharePoint Server 2019 has been released, you can click here to download it.
    Click here to learn new features. Visit the dedicated forum to share, explore and talk to experts about SharePoint Server 2019.

    Thursday, April 4, 2019 3:05 AM
  • Hi,

    Any update?

    If my reply help you, please mark the reply as answer, it will make others who stuck with the similar issue easier to search for valid solutions in this forum.

    Best regards,
    Dennis


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

    SharePoint Server 2019 has been released, you can click here to download it.
    Click here to learn new features. Visit the dedicated forum to share, explore and talk to experts about SharePoint Server 2019.

    Thursday, April 11, 2019 7:20 AM