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.

• SharePoint Hosted App Creation With Office 365

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
   
   
   
   
3. Schema.xml
   

   <?xml version="1.0" encoding="utf-8"?>
       <List xmlns:ows="Microsoft SharePoint" Title="Employees" FolderCreation="FALSE" Direction="$Resources:Direction;" Url="Lists/Employees" BaseType="0" xmlns="http://schemas.microsoft.com/sharepoint/">
           <MetaData>
               <ContentTypes>
                   <ContentType ID="0x0100682bace5125f4d25be36abd5693059f4" Name="ListFieldsContentType">
                       <FieldRefs>
                           <FieldRef ID="{fa564e0f-0c70-4ab9-b863-0177e6ddd247}" Name="Title" />
                           <FieldRef ID="{d604b626-dc0f-4509-bcef-0492092e2188}" Name="Name1" />
                           <FieldRef ID="{8d5eaba7-1aa7-4f41-9b2e-e293941e886d}" Name="Office1" />
                       </FieldRefs>
                   </ContentType>
                   <ContentTypeRef ID="0x01">
                       <Folder TargetName="Item" /> </ContentTypeRef>
                   <ContentTypeRef ID="0x0120" />
               </ContentTypes>
               <Fields>
                   <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" />
                   <Field Name="Name1" ID="{d604b626-dc0f-4509-bcef-0492092e2188}" DisplayName="EmployeeName" Type="Text" Required="TRUE" />
                   <Field Name="Office1" ID="{8d5eaba7-1aa7-4f41-9b2e-e293941e886d}" DisplayName="Office" Type="Text" Required="TRUE" />
               </Fields>
               <Views>
                   <View BaseViewID="0" Type="HTML" MobileView="TRUE" TabularView="FALSE">
                       <Toolbar Type="Standard" />
                       <XslLink Default="TRUE">main.xsl</XslLink>
                       <RowLimit Paged="TRUE">30</RowLimit>
                       <ViewFields>
                           <FieldRef Name="LinkTitleNoMenu"></FieldRef>
                       </ViewFields>
                       <Query>
                           <OrderBy>
                               <FieldRef Name="Modified" Ascending="FALSE"></FieldRef>
                           </OrderBy>
                       </Query>
                       <ParameterBindings>
                           <ParameterBinding Name="AddNewAnnouncement" Location="Resource(wss,addnewitem)" />
                           <ParameterBinding Name="NoAnnouncements" Location="Resource(wss,noXinviewofY_LIST)" />
                           <ParameterBinding Name="NoAnnouncementsHowTo" Location="Resource(wss,noXinviewofY_ONET_HOME)" /> </ParameterBindings>
                   </View>
                   <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">
                       <Toolbar Type="Standard" />
                       <XslLink Default="TRUE">main.xsl</XslLink>
                       <JSLink>clienttemplates.js</JSLink>
                       <RowLimit Paged="TRUE">30</RowLimit>
                       <ViewFields>
                           <FieldRef Name="LinkTitle"></FieldRef>
                           <FieldRef Name="Name1" />
                           <FieldRef Name="Office1" />
                       </ViewFields>
                       <Query>
                           <OrderBy>
                               <FieldRef Name="ID"></FieldRef>
                           </OrderBy>
                       </Query>
                       <ParameterBindings>
                           <ParameterBinding Name="NoAnnouncements" Location="Resource(wss,noXinviewofY_LIST)" />
                           <ParameterBinding Name="NoAnnouncementsHowTo" Location="Resource(wss,noXinviewofY_DEFAULT)" /> </ParameterBindings>
                   </View>
               </Views>
               <Forms>
                   <Form Type="DisplayForm" Url="DispForm.aspx" SetupPath="pages\form.aspx" WebPartZoneID="Main" />
                   <Form Type="EditForm" Url="EditForm.aspx" SetupPath="pages\form.aspx" WebPartZoneID="Main" />
                   <Form Type="NewForm" Url="NewForm.aspx" SetupPath="pages\form.aspx" WebPartZoneID="Main" /> </Forms>
           </MetaData>
       </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,

<?xml version="1.0" encoding="utf-8"?>
    <Elements xmlns="http://schemas.microsoft.com/sharepoint/">
        <ListInstance Title="Employees" OnQuickLaunch="TRUE" TemplateType="10001" Url="Lists/Employees" Description="My List Instance">
            <Data>
                <Rows>
                    <Row>
                        <Field Name="Title">General Manager</Field>
                        <Field Name="EmployeeName">Rupali Shinde</Field>
                        <Field Name="Office">India</Field>
                    </Row>
                    <Row>
                        <Field Name="Title">CEO</Field>
                        <Field Name="EmployeeName">Shrikant Shinde</Field>
                        <Field Name="Office">UK</Field>
                    </Row>
                    <Row>
                        <Field Name="Title">Technical Content Manager</Field>
                        <Field Name="EmployeeName">Vishnu Jadhav</Field>
                        <Field Name="Office">India</Field>
                    </Row>
                    <Row>
                        <Field Name="Title">Technical Content Manager</Field>
                        <Field Name="EmployeeName">DJ Jadahv</Field>
                        <Field Name="Office">India</Field>
                    </Row>
                </Rows>
            </Data>
        </ListInstance>
    </Elements>

Step 4: MarketSize

<?xml version="1.0" encoding="utf-8"?>
    <Elements xmlns="http://schemas.microsoft.com/sharepoint/">
        <ListInstance Title="MarketSize" OnQuickLaunch="TRUE" TemplateType="10002" Url="Lists/MarketSize" Description="My List Instance">
            <Data>
                <Rows>
                    <!-- The following data populates the custom list that is deployed with this App. -->
                    <!-- The list has two columns: Country (text) and Population (number). -->
                    <Row>
                        <Field Name="Country">Brazil</Field>
                        <Field Name="Population">193946886</Field>
                        <Field Name="MarketSize">19394688</Field>
                    </Row>
                    <Row>
                        <Field Name="Country">India</Field>
                        <Field Name="Population">1210193422</Field>
                        <Field Name="MarketSize">121019342</Field>
                    </Row>
                    <Row>
                        <Field Name="Country">Japan</Field>
                        <Field Name="Population">127530000</Field>
                        <Field Name="MarketSize">12753000</Field>
                    </Row>
                    <Row>
                        <Field Name="Country">Nigeria</Field>
                        <Field Name="Population">167629000</Field>
                        <Field Name="MarketSize">16762900</Field>
                    </Row>
                    <Row>
                        <Field Name="Country">USA</Field>
                        <Field Name="Population">314826000</Field>
                        <Field Name="MarketSize">31482600</Field>
                    </Row>
                </Rows>
            </Data>
        </ListInstance>
    </Elements>

Step 5: Sales

<?xml version="1.0" encoding="utf-8"?>
    <Elements xmlns="http://schemas.microsoft.com/sharepoint/">
        <ListInstance Title="Sales" OnQuickLaunch="TRUE" TemplateType="10000" Url="Lists/Sales" Description="My List Instance">
            <Data>
                <Rows>
                    <Row>
                        <Field Name="Title">ShowMe SharePoint</Field>
                        <Field Name="Customer">Litware</Field>
                        <Field Name="Amount">999.00</Field>
                        <Field Name="PO">1234</Field>
                        <Field Name="Invoice">2345</Field>
                    </Row>
                    <Row>
                        <Field Name="Title">ShowMe Dynamics CRM</Field>
                        <Field Name="Customer">Litware</Field>
                        <Field Name="Amount">999.00</Field>
                        <Field Name="PO">1235</Field>
                        <Field Name="Invoice">2346</Field>
                    </Row>
                    <Row>
                        <Field Name="Title">ShowMe Windows 8</Field>
                        <Field Name="Customer">Litware</Field>
                        <Field Name="Amount">99.00</Field>
                        <Field Name="PO">1236</Field>
                        <Field Name="Invoice">2347</Field>
                    </Row>
                    <Row>
                        <Field Name="Title">ShowMe SharePoint</Field>
                        <Field Name="Customer">Contoso</Field>
                        <Field Name="Amount">799.00</Field>
                        <Field Name="PO">1239</Field>
                        <Field Name="Invoice">2350</Field>
                    </Row>
                    <Row>
                        <Field Name="Title">ShowMe SharePoint</Field>
                        <Field Name="Customer">Adventure Works</Field>
                        <Field Name="Amount">3999.00</Field>
                        <Field Name="PO">1240</Field>
                        <Field Name="Invoice">2351</Field>
                    </Row>
                </Rows>
            </Data>
        </ListInstance>
    </Elements>

Step 6: Tile Navigator creation code

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

// Variables used to hold objects for use in callback functions
var context;
var lists;
//var list;
var listItems;
var tileArea;
// This code runs when the DOM is ready and creates a context object which is needed
// to use the SharePoint object model
$(document).ready(function()
{
    context = SP.ClientContext.get_current();
    var web = context.get_web();
    lists = context.get_web().get_lists();
    context.load(lists);
    context.executeQueryAsync(function()
    {
        renderListTiles();
    }, function()
    {
        errorLoadingLists();
    });
});

function errorLoadingLists()
{
    tileArea = document.getElementById("tileArea");
    // Remove all nodes from the chart <DIV> so we have a clean space to write to
    while (tileArea.hasChildNodes())
    {
        tileArea.removeChild(tileArea.lastChild);
    }
    // Write a message to let the user know the operation has failed
    var errMessage = document.createElement("div");
    errMessage.appendChild(document.createTextNode("Lists could not be retrieved."));
}

function renderListTiles()
{
    debugger
    tileArea = document.getElementById("tileArea");
    var listEnumerator = lists.getEnumerator();
    while (listEnumerator.moveNext())
    {
        var list = listEnumerator.get_current();
        var listTitle = list.get_title();
        if ((listTitle == "Employees") || (listTitle == "MarketSize") || (listTitle == "Sales"))
        {
            var itemCount = list.get_itemCount();
            var tile = document.createElement("a");
            tile.setAttribute("class", "tile");
            tile.setAttribute("href", "../Lists/" + listTitle);
            tile.appendChild(document.createTextNode(listTitle));
            tileArea.appendChild(tile);
            var tileBody = document.createElement("div");
            tileBody.setAttribute("class", "tileNumber");
            tileBody.appendChild(document.createTextNode(itemCount.toString()));
            tile.appendChild(tileBody);
        }
    }
}

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: