SharePoint

App Web Tile Navigator For SharePoint Hosted App Using Office 365

Please refer the following link to create SharePoint hosted app with Office 365 account.

What is App Web

App web is an isolated domain but it is still inside the same site collection as host web. SharePoint components get deployed to this special website. It prevent cross site scripting attacks. We need to set app level permission when app wants to communicate with SharePoint Environment using CSOM.

Step 1: Add New List into SharePoint Hosted App as follow,

Project - Right Click, Add, New Item and Select List and give proper name.

In this example I created 3 different lists for demo purpose.

Employees, MarketSize, Sales

Project structure looks like the following,


Step 2: Visual Studio List Structure

When a new list is created, list itself is having the following mentioned content in it.

  1. Employees Instance



  2. Elements.xml

    Employees code

  3. Schema.xml
    1. <?xml version="1.0" encoding="utf-8"?>  
    2.     <List xmlns:ows="Microsoft SharePoint" Title="Employees" FolderCreation="FALSE" Direction="$Resources:Direction;" Url="Lists/Employees" BaseType="0" xmlns="http://schemas.microsoft.com/sharepoint/">  
    3.         <MetaData>  
    4.             <ContentTypes>  
    5.                 <ContentType ID="0x0100682bace5125f4d25be36abd5693059f4" Name="ListFieldsContentType">  
    6.                     <FieldRefs>  
    7.                         <FieldRef ID="{fa564e0f-0c70-4ab9-b863-0177e6ddd247}" Name="Title" />  
    8.                         <FieldRef ID="{d604b626-dc0f-4509-bcef-0492092e2188}" Name="Name1" />  
    9.                         <FieldRef ID="{8d5eaba7-1aa7-4f41-9b2e-e293941e886d}" Name="Office1" />  
    10.                     </FieldRefs>  
    11.                 </ContentType>  
    12.                 <ContentTypeRef ID="0x01">  
    13.                     <Folder TargetName="Item" /> </ContentTypeRef>  
    14.                 <ContentTypeRef ID="0x0120" />  
    15.             </ContentTypes>  
    16.             <Fields>  
    17.                 <Field ID="{fa564e0f-0c70-4ab9-b863-0177e6ddd247}" Type="Text" Name="Title" DisplayName="$Resources:core,Title;" Required="TRUE" SourceID="http://schemas.microsoft.com/sharepoint/v3" StaticName="Title" MaxLength="255" />  
    18.                 <Field Name="Name1" ID="{d604b626-dc0f-4509-bcef-0492092e2188}" DisplayName="EmployeeName" Type="Text" Required="TRUE" />  
    19.                 <Field Name="Office1" ID="{8d5eaba7-1aa7-4f41-9b2e-e293941e886d}" DisplayName="Office" Type="Text" Required="TRUE" />  
    20.             </Fields>  
    21.             <Views>  
    22.                 <View BaseViewID="0" Type="HTML" MobileView="TRUE" TabularView="FALSE">  
    23.                     <Toolbar Type="Standard" />  
    24.                     <XslLink Default="TRUE">main.xsl</XslLink>  
    25.                     <RowLimit Paged="TRUE">30</RowLimit>  
    26.                     <ViewFields>  
    27.                         <FieldRef Name="LinkTitleNoMenu"></FieldRef>  
    28.                     </ViewFields>  
    29.                     <Query>  
    30.                         <OrderBy>  
    31.                             <FieldRef Name="Modified" Ascending="FALSE"></FieldRef>  
    32.                         </OrderBy>  
    33.                     </Query>  
    34.                     <ParameterBindings>  
    35.                         <ParameterBinding Name="AddNewAnnouncement" Location="Resource(wss,addnewitem)" />  
    36.                         <ParameterBinding Name="NoAnnouncements" Location="Resource(wss,noXinviewofY_LIST)" />  
    37.                         <ParameterBinding Name="NoAnnouncementsHowTo" Location="Resource(wss,noXinviewofY_ONET_HOME)" /> </ParameterBindings>  
    38.                 </View>  
    39.                 <View BaseViewID="1" Type="HTML" WebPartZoneID="Main" DisplayName="$Resources:core,objectiv_schema_mwsidcamlidC24;" DefaultView="TRUE" MobileView="TRUE" MobileDefaultView="TRUE" SetupPath="pages\viewpage.aspx" ImageUrl="/_layouts/15/images/generic.png" Url="AllItems.aspx">  
    40.                     <Toolbar Type="Standard" />  
    41.                     <XslLink Default="TRUE">main.xsl</XslLink>  
    42.                     <JSLink>clienttemplates.js</JSLink>  
    43.                     <RowLimit Paged="TRUE">30</RowLimit>  
    44.                     <ViewFields>  
    45.                         <FieldRef Name="LinkTitle"></FieldRef>  
    46.                         <FieldRef Name="Name1" />  
    47.                         <FieldRef Name="Office1" />  
    48.                     </ViewFields>  
    49.                     <Query>  
    50.                         <OrderBy>  
    51.                             <FieldRef Name="ID"></FieldRef>  
    52.                         </OrderBy>  
    53.                     </Query>  
    54.                     <ParameterBindings>  
    55.                         <ParameterBinding Name="NoAnnouncements" Location="Resource(wss,noXinviewofY_LIST)" />  
    56.                         <ParameterBinding Name="NoAnnouncementsHowTo" Location="Resource(wss,noXinviewofY_DEFAULT)" /> </ParameterBindings>  
    57.                 </View>  
    58.             </Views>  
    59.             <Forms>  
    60.                 <Form Type="DisplayForm" Url="DispForm.aspx" SetupPath="pages\form.aspx" WebPartZoneID="Main" />  
    61.                 <Form Type="EditForm" Url="EditForm.aspx" SetupPath="pages\form.aspx" WebPartZoneID="Main" />  
    62.                 <Form Type="NewForm" Url="NewForm.aspx" SetupPath="pages\form.aspx" WebPartZoneID="Main" /> </Forms>  
    63.         </MetaData>  
    64.     </List>  
Step 3: Employees

I added some data manually for Employee List into Elements.xml file, it is a file which exist below EmployeesInstance as shown in the preceding image,

  1. <?xml version="1.0" encoding="utf-8"?>  
  2.     <Elements xmlns="http://schemas.microsoft.com/sharepoint/">  
  3.         <ListInstance Title="Employees" OnQuickLaunch="TRUE" TemplateType="10001" Url="Lists/Employees" Description="My List Instance">  
  4.             <Data>  
  5.                 <Rows>  
  6.                     <Row>  
  7.                         <Field Name="Title">General Manager</Field>  
  8.                         <Field Name="EmployeeName">Rupali Shinde</Field>  
  9.                         <Field Name="Office">India</Field>  
  10.                     </Row>  
  11.                     <Row>  
  12.                         <Field Name="Title">CEO</Field>  
  13.                         <Field Name="EmployeeName">Shrikant Shinde</Field>  
  14.                         <Field Name="Office">UK</Field>  
  15.                     </Row>  
  16.                     <Row>  
  17.                         <Field Name="Title">Technical Content Manager</Field>  
  18.                         <Field Name="EmployeeName">Vishnu Jadhav</Field>  
  19.                         <Field Name="Office">India</Field>  
  20.                     </Row>  
  21.                     <Row>  
  22.                         <Field Name="Title">Technical Content Manager</Field>  
  23.                         <Field Name="EmployeeName">DJ Jadahv</Field>  
  24.                         <Field Name="Office">India</Field>  
  25.                     </Row>  
  26.                 </Rows>  
  27.             </Data>  
  28.         </ListInstance>  
  29.     </Elements>  

Step 4: MarketSize

  1. <?xml version="1.0" encoding="utf-8"?>  
  2.     <Elements xmlns="http://schemas.microsoft.com/sharepoint/">  
  3.         <ListInstance Title="MarketSize" OnQuickLaunch="TRUE" TemplateType="10002" Url="Lists/MarketSize" Description="My List Instance">  
  4.             <Data>  
  5.                 <Rows>  
  6.                     <!-- The following data populates the custom list that is deployed with this App. -->  
  7.                     <!-- The list has two columns: Country (text) and Population (number). -->  
  8.                     <Row>  
  9.                         <Field Name="Country">Brazil</Field>  
  10.                         <Field Name="Population">193946886</Field>  
  11.                         <Field Name="MarketSize">19394688</Field>  
  12.                     </Row>  
  13.                     <Row>  
  14.                         <Field Name="Country">India</Field>  
  15.                         <Field Name="Population">1210193422</Field>  
  16.                         <Field Name="MarketSize">121019342</Field>  
  17.                     </Row>  
  18.                     <Row>  
  19.                         <Field Name="Country">Japan</Field>  
  20.                         <Field Name="Population">127530000</Field>  
  21.                         <Field Name="MarketSize">12753000</Field>  
  22.                     </Row>  
  23.                     <Row>  
  24.                         <Field Name="Country">Nigeria</Field>  
  25.                         <Field Name="Population">167629000</Field>  
  26.                         <Field Name="MarketSize">16762900</Field>  
  27.                     </Row>  
  28.                     <Row>  
  29.                         <Field Name="Country">USA</Field>  
  30.                         <Field Name="Population">314826000</Field>  
  31.                         <Field Name="MarketSize">31482600</Field>  
  32.                     </Row>  
  33.                 </Rows>  
  34.             </Data>  
  35.         </ListInstance>  
  36.     </Elements>  

Step 5: Sales

  1. <?xml version="1.0" encoding="utf-8"?>  
  2.     <Elements xmlns="http://schemas.microsoft.com/sharepoint/">  
  3.         <ListInstance Title="Sales" OnQuickLaunch="TRUE" TemplateType="10000" Url="Lists/Sales" Description="My List Instance">  
  4.             <Data>  
  5.                 <Rows>  
  6.                     <Row>  
  7.                         <Field Name="Title">ShowMe SharePoint</Field>  
  8.                         <Field Name="Customer">Litware</Field>  
  9.                         <Field Name="Amount">999.00</Field>  
  10.                         <Field Name="PO">1234</Field>  
  11.                         <Field Name="Invoice">2345</Field>  
  12.                     </Row>  
  13.                     <Row>  
  14.                         <Field Name="Title">ShowMe Dynamics CRM</Field>  
  15.                         <Field Name="Customer">Litware</Field>  
  16.                         <Field Name="Amount">999.00</Field>  
  17.                         <Field Name="PO">1235</Field>  
  18.                         <Field Name="Invoice">2346</Field>  
  19.                     </Row>  
  20.                     <Row>  
  21.                         <Field Name="Title">ShowMe Windows 8</Field>  
  22.                         <Field Name="Customer">Litware</Field>  
  23.                         <Field Name="Amount">99.00</Field>  
  24.                         <Field Name="PO">1236</Field>  
  25.                         <Field Name="Invoice">2347</Field>  
  26.                     </Row>  
  27.                     <Row>  
  28.                         <Field Name="Title">ShowMe SharePoint</Field>  
  29.                         <Field Name="Customer">Contoso</Field>  
  30.                         <Field Name="Amount">799.00</Field>  
  31.                         <Field Name="PO">1239</Field>  
  32.                         <Field Name="Invoice">2350</Field>  
  33.                     </Row>  
  34.                     <Row>  
  35.                         <Field Name="Title">ShowMe SharePoint</Field>  
  36.                         <Field Name="Customer">Adventure Works</Field>  
  37.                         <Field Name="Amount">3999.00</Field>  
  38.                         <Field Name="PO">1240</Field>  
  39.                         <Field Name="Invoice">2351</Field>  
  40.                     </Row>  
  41.                 </Rows>  
  42.             </Data>  
  43.         </ListInstance>  
  44.     </Elements>  

Step 6: Tile Navigator creation code

The following code is used to create tile navigator user interface,

  1. // Variables used to hold objects for use in callback functions  
  2. var context;  
  3. var lists;  
  4. //var list;  
  5. var listItems;  
  6. var tileArea;  
  7. // This code runs when the DOM is ready and creates a context object which is needed  
  8. // to use the SharePoint object model  
  9. $(document).ready(function()  
  10. {  
  11.     context = SP.ClientContext.get_current();  
  12.     var web = context.get_web();  
  13.     lists = context.get_web().get_lists();  
  14.     context.load(lists);  
  15.     context.executeQueryAsync(function()  
  16.     {  
  17.         renderListTiles();  
  18.     }, function()  
  19.     {  
  20.         errorLoadingLists();  
  21.     });  
  22. });  
  23.   
  24. function errorLoadingLists()  
  25. {  
  26.     tileArea = document.getElementById("tileArea");  
  27.     // Remove all nodes from the chart <DIV> so we have a clean space to write to  
  28.     while (tileArea.hasChildNodes())  
  29.     {  
  30.         tileArea.removeChild(tileArea.lastChild);  
  31.     }  
  32.     // Write a message to let the user know the operation has failed  
  33.     var errMessage = document.createElement("div");  
  34.     errMessage.appendChild(document.createTextNode("Lists could not be retrieved."));  
  35. }  
  36.   
  37. function renderListTiles()  
  38. {  
  39.     debugger  
  40.     tileArea = document.getElementById("tileArea");  
  41.     var listEnumerator = lists.getEnumerator();  
  42.     while (listEnumerator.moveNext())  
  43.     {  
  44.         var list = listEnumerator.get_current();  
  45.         var listTitle = list.get_title();  
  46.         if ((listTitle == "Employees") || (listTitle == "MarketSize") || (listTitle == "Sales"))  
  47.         {  
  48.             var itemCount = list.get_itemCount();  
  49.             var tile = document.createElement("a");  
  50.             tile.setAttribute("class", "tile");  
  51.             tile.setAttribute("href", "../Lists/" + listTitle);  
  52.             tile.appendChild(document.createTextNode(listTitle));  
  53.             tileArea.appendChild(tile);  
  54.             var tileBody = document.createElement("div");  
  55.             tileBody.setAttribute("class", "tileNumber");  
  56.             tileBody.appendChild(document.createTextNode(itemCount.toString()));  
  57.             tile.appendChild(tileBody);  
  58.         }  
  59.     }  
  60. }   
Output 

if we click on any of the tile, it will show corresponding list data. For example, let us click employee list, output will be like the following,

Frequent Error coming in App Deployment as in the following,


Error occurred in deployment steps ‘Install App for SharePoint’: A different version of this app is already installed with same version number.
Solution:

Up Next
    Ebook Download
    View all
    Learn
    View all
    Get Started

    You need to be a premium member to use this feature. To access it, you'll have to upgrade your membership.

    Become a sharper developer and jumpstart your career.

    Basic

    $0

    $

    . 00

    monthly

    For Basic members:

    • Standard Profile
    • Access learning courses
    • Access free e-books
    • 1x point
    Premium

    $20

    $

    . 00

    monthly

    For Premium members:

    • Earn 2x reward points
    • Premium profile with Verified check
    • Premium Avatar with status update
    • Learning courses
    • Unlimited Certifications and badges on profile
    • Unlimited Book downloads
    • Access to Premium content
    • Online Training
    • Unlimited PDF conversions and downloads
    • Professional Resume Writing
    • Interview Preparations Guide
    • 25 messages per month
    • 1 "Kodzu" avatar, basic
    Elite

    $45

    $

    . 00

    monthly

    For Elite members:

    • Bundle E-books
    • Access to all Learn Series
    • Unlimited Apply Jobs