Post
Ask Question

SharePoint Hosted App: Display Link Of Lists On A Default Page

If we create multiple lists in a SharePoint hosted app, we need to type the URL to navigate to various site contents as there is no ‘Site Contents’ link available in app web. To overcome this situation, a simple solution is to keep links of all the lists in default.aspx page or any other page added inside app.

I will give a walk-through on how to achieve this using simple JS.

Prerequisites

SharePoint app is configured and working in the system.

Solution:

  1. Open Visual Studio, go to New Project, then Apps and select App for SharePoint.

  2. Provide appropriate name to the solution, then click OK.



  3. Select your site for debug & deployment, then select SharePoint-hosted and click Finish



  4. Once project is created, add few lists to the project. Right click on project, Add, then New Item. Click List, then provide list name and Add.



  5. Repeat step #4 to create more lists – I created 3 custom lists; Doctors, Outdoor Patients & Registrations.



  6. Now open ‘Default.aspx’ and add placeholder to display list URLs. Inside “PlaceHolderMain”, delete the existing div created by default with page and add a div & UL like the following code snippet:
    1. <%-- The markup and script in the following Content element will be placed in the <body> of the page --%>  
    2. <asp:Content ContentPlaceHolderID="PlaceHolderMain" runat="server">  
    3.     <div id="dvLists">  
    4.         <h1>All Lists</h1>  
    5.         <ul id="list"></ul>  
    6.     </div>  
    7. </asp:Content>  
  7. Inside “PlaceHolderAdditionalPageHead”, add javascript to read web app url, form lists URLs and render it to the page. Final “PlaceHolderAdditionalPageHead” will look like the following:
    1. <%-- The markup and script in the following Content element will be placed in the <head> of the page --%>  
    2. <asp:Content ContentPlaceHolderID="PlaceHolderAdditionalPageHead" runat="server">  
    3.     <script type="text/javascript" src="../Scripts/jquery-1.9.1.min.js"></script>  
    4.     <script type="text/javascript" src="/_layouts/15/sp.runtime.js"></script>  
    5.     <script type="text/javascript" src="/_layouts/15/sp.js"></script>  
    6.     <meta name="WebPartPageExpansion" content="full" />  
    7.   
    8.     <!-- Add your CSS styles to the following file -->  
    9.     <link rel="Stylesheet" type="text/css" href="../Content/App.css" />  
    10.   
    11.     <!-- Add your JavaScript to the following file -->  
    12.     <script type="text/javascript" src="../Scripts/App.js"></script>  
    13.   
    14.     <!-- Script to display lists-->  
    15.     <script type="text/javascript">  
    16.         var page = {  
    17.             alllists: [  
    18.                 { displayName: "Doctors", path: "Doctors" },  
    19.                 { displayName: "Registrations", path: "Registrations" },  
    20.                 { displayName: "Outdoor Patients", path: "Outdoor Patients" }  
    21.             ],  
    22.         };  
    23.   
    24.         function CreateListUrl() {  
    25.             var i;  
    26.             for (i = 0; i < page.alllists.length; i++) {  
    27.                 var list = page.alllists[i];  
    28.                 var url = _spPageContextInfo.webServerRelativeUrl + "/Lists/" + list.path;  
    29.   
    30.                 $("#list").append("<li><a target='_blank' href='" + url + "' >" + list.displayName + "</a></li>");  
    31.             }  
    32.         }  
    33.   
    34.         $(document).ready(function () {  
    35.             CreateListUrl();  
    36.         });  
    37.     </script>  
    38. </asp:Content> 
  8. Build and deploy the app, it will look like the following:



  9. Clicking on any of lists names will open the respective list in a new tab/window.


Similar Articles