none
SharePoint Online List Accordion for my NewForm.aspx or EditForm.aspx RRS feed

  • Question

  • am trying to create a accordion for my splist in SPO site.

    i followed the below link  but am not getting the correct results.

    am having 4 sections say :

      General --> with splist columns containing  --> column1,column2,column3

      Admin  - with splist columns containing  --> column4,column5,column6

      Misce -- with splist columns containing  --> column7,column8,column9, column10

    the code i have referred is here:

    https://sharepoint.stackexchange.com/questions/249578/sharepoint-online-list-accordion

     
    <html>
    <head>

    <script src="/_layouts/15/sp.runtime.js" type="text/javascript"></script>
    <script src="/_layouts/15/sp.js" type="text/javascript"></script>

      <link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
      <script src="https://code.jquery.com/jquery-1.12.4.js"></script>
      <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script> 

    <script type="text/javascript">  
    $(document).ready(function(){  
    GetItems();
    });
    function GetItems(){
    var siteURL = _spPageContextInfo.webServerRelativeUrl;
        $.ajax({
                url: siteURL + "/_api/web/lists/GetByTitle('tracking list')/items",   //change the list name
                type: "GET",
                dataType: "json",
                headers: {
                Accept: "application/json;odata=verbose"
                },
            success: function(data) {
             if (data.d.results.length > 0) 
               {
                $('#accordion').append(GenerateAccordionFromJson(data.d.results));  
                $( "#accordion" ).accordion();
               }
             else{  
                $('#accordion').append("<span>No Records Found.</span>");  
                }
            },
            error: function(error){
                alert(JSON.stringify(error));
            }  
        });
    }  
    function GenerateAccordionFromJson(objArray) 
        {  
        var accordionContent = "";
        for (var i = 0; i < objArray.length; i++) 
        {  
            accordionContent += '<h3>' + objArray[i].Title + '</h3>';               
                   //change the column name
          //  accordionContent += '<div><p>' + objArray[i].Issue_Title + '</p></div>';           //change the column name
        }
        return accordionContent;
        }

    </script>  
    </head>
    <body>
    <div id="accordion">
    </div>
    </body>
    </html>

     

    but,  am not able to get the accurate display of sections

     the below is, i got it aftr applying the above code:

       

    by the way, am looking for creating the one, which is similar here:

    https://spjsblog.com/category/accordion/

     
     
    • Edited by SaMolPP Wednesday, April 3, 2019 5:25 PM
    Wednesday, April 3, 2019 5:13 PM

Answers

  • Hi,

    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.

    • Marked as answer by SaMolPP Thursday, April 4, 2019 3:54 PM
    Thursday, April 4, 2019 2:20 AM
    Moderator

All replies

  • Hi,

    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.

    • Marked as answer by SaMolPP Thursday, April 4, 2019 3:54 PM
    Thursday, April 4, 2019 2:20 AM
    Moderator
  •  Its kinda working as far as the UI is concerned.

    10 one issue is :, save cancel buttons are placed on the top of these sections! i would like to get these button on the bottom/immediately below of the last section. 

    Also, I have 3 mandatory columns with single line of text and multi line of text and dropdown.

    when i click on the save button am getting the error, that's mentioned in the  

     """alertErrorText: "Form errors exist. Please fix form errors and try again" "

    am stuck, at why am getting this error, my question is

    1) Should I disable the SPlist's default mandatory option  and i do need to depend on the jQuery/JS custom validation

    2) When the mandatory fields are kept blank and i clicked on save button, the splist's mandatory error message is not highlighted , and end user would be confused , whether from which section , which field throws error message!

    4) should i comment the alerterrortext : call in the js file?  




    • Edited by SaMolPP Thursday, April 4, 2019 3:55 PM
    Thursday, April 4, 2019 10:24 AM
  • Hi,

    Please modify the code as below.

    <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: false,
    		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>
    <div id="accordion">   
    </div>
    <p>
    <span class="hillbillyFormSave"></span>
    <span class="hillbillyFormCancel"></span>
    </p>

    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.

    Friday, April 5, 2019 12:47 AM
    Moderator