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.
- Employees Instance
- Elements.xml
- 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,
-
- var context;
- var lists;
-
- var listItems;
- var tileArea;
-
-
- $(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");
-
- while (tileArea.hasChildNodes())
- {
- tileArea.removeChild(tileArea.lastChild);
- }
-
- 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: