SharePoint: Add-in To Show List Data In Accordion View

We will create a SharePoint hosted app. To know more on how to create a SharePoint App, check this link.

1. In the newly-created App project open the default.aspx page.
   
   Replace the existing div with the following code:
   

   <div id="configSection" style="padding-top:15px">
       <table class="table">
           <tr>
               <td>List Name: </td>
               <td>
                   <input type="text" id="listName" /> </td>
           </tr>
           <tr>
               <td>Header Column Name: </td>
               <td>
                   <input type="text" id="headerColumn" /> </td>
           </tr>
           <tr>
               <td>Body Column Name: </td>
               <td>
                   <input type="text" id="bodyColumn" /> </td>
           </tr>
           <tr>
               <td colspan="2">
                   <div class="btn btn-primary" id="btnConfig">Configure</div>
               </td>
           </tr>
       </table>
   </div>
   <div class="panel-group" id="accordion" style="padding-top:15px">
   </div>

2. As we will be using the bootstrap accordion we need to add the following references to the page.
   

   <!-- Latest compiled and minified CSS -->
   <link rel="stylesheet"href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
   
   <!-- Latest compiled and minified JavaScript -->
   <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>

3. The next step is to set up the list from which we will pull the data for the accordion. Let’s keep the structure flat and simple. The list will have two columns, Head and Body. Here the data in the ‘Head’ column will map to the header of the accordion section and the respective body will be mapped with the ‘Body’ column.
   
   The list will appear as below.
   
   
   
4. Now move back to the app project in Visual Studio. We need to write the code in the App.js to pull the list data and bind it to the accordion div. Remove the existing code in the App.js and paste the below code.
   

   var context = SP.ClientContext.get_current();
   var user = context.get_web().get_currentUser();
   var spHost = window.location.href.slice(window.location.href.indexOf('SPHostUrl')).split('&');
   var configListItemCollection = null;
   var listAccordian = null;
   var listAccordianCollection = null;
   for (var i = 0; i < spHost.length; i++)
   {
       var urlparam = spHost[i].split('=');
       if (urlparam[0] == 'SPHostUrl')
       {
           spHost = decodeURIComponent(urlparam[1]);
       }
   }
   $(document).ready(function ()
   {
       $("#btnConfig").click(function ()
       {
           createAccordian();
       });
   });
   ///Create the accordian
   function createAccordian()
   {
       var clientContext = new SP.AppContextSite(context, spHost)
       var web = clientContext.get_web();
       context.load(web)
       var listName = $("#listName").val();
       listAccordian = web.get_lists().getByTitle(listName);
       var camlQuery = new SP.CamlQuery();
       camlQuery.set_viewXml('<View><RowLimit>5000</RowLimit></View>');
       listAccordianCollection = listAccordian.getItems(camlQuery);
       context.load(listAccordianCollection);
       context.load(listAccordian);
       context.executeQueryAsync(loadAccordianData, onQueryFailed);
   }
   
   function loadAccordianData()
   {
       var listEnumerator = listAccordianCollection.getEnumerator();
       //Get the textbox values
       var headerColumn = $("#headerColumn").val();
       var bodyColumn = $("#bodyColumn").val();
       var c = 0;
       while (listEnumerator.moveNext())
       {
           var oItem = listEnumerator.get_current();
           var headerContent = oItem.get_item(headerColumn);
           var bodyContent = oItem.get_item(bodyColumn)
           c = c + 1;
           var stringVal = "<div class='panel panel-default'>\
   <div class='panel-heading'>\
   <h4 class='panel-title'>\
   <a data-toggle='collapse' data-parent='#accordion' href='#collapse" + c + "'>" + headerContent + "</a>\
   </h4>\
   </div>\
   <div id='collapse" + c + "' class='panel-collapse collapse in'>\
   <div class='panel-body'>" + bodyContent + "</div>\
   </div>\
   </div>";
           $('#accordion').append(stringVal);
       }
       $("#configSection").hide();
   }
   
   function onQueryFailed(sender, args)
   {
       alert('Request failed. ' + args.get_message() + '\n' + args.get_stackTrace());
   }

5. In the above code, we have first declared some global variables, then retrieved the SPHost url to create the client context.
   
   
6. Initially we are taking user inputs List Name, Header Column Name and Body Column Name. Once the user clicks on the Configure button the accordion is created.
   
   
   
7. On the ‘Configure’ button click the ‘createAccordian()’ method is executed, which asynchronously loads data in the ‘loadAccordianData()’ method and binds with the accordion div.
   
   
   
8. You need to give the App (Add-in) permission to read the site collection data. This change has to be done in the App manifest.
   
   

This Add-in can be extended to save the source list details in another config list and load the data on each page load, this way we can avoid taking user inputs every time.