Step by Step guide to develop and host SharePoint Hosted APP
Open Visual Studio
File -> New Project -> SharePoint Add-In
Select SharePoint Site Where you want to Host SharePoint APP
Select SharePoint Hosted in hosting location
Select “SharePoint 2016”
Click Finish
SharePoint APP Project is created as shown in an Image .
This Add-in inserts data into “Student” list. Lets look HTML of Page which is in Default.aspx page.
<%-- The following 4 lines are ASP.NET directives needed when using SharePoint components --%> <%@ Page Inherits="Microsoft.SharePoint.WebPartPages.WebPartPage, Microsoft.SharePoint, Version=15.0.0.0, Culture=neutral, PublicKeyToken=71e9bce111e9429c" MasterPageFile="~masterurl/default.master" Language="C#" %> <%@ Register TagPrefix="Utilities" Namespace="Microsoft.SharePoint.Utilities" Assembly="Microsoft.SharePoint, Version=15.0.0.0, Culture=neutral, PublicKeyToken=71e9bce111e9429c" %> <%@ Register TagPrefix="WebPartPages" Namespace="Microsoft.SharePoint.WebPartPages" Assembly="Microsoft.SharePoint, Version=15.0.0.0, Culture=neutral, PublicKeyToken=71e9bce111e9429c" %> <%@ Register TagPrefix="SharePoint" Namespace="Microsoft.SharePoint.WebControls" Assembly="Microsoft.SharePoint, Version=15.0.0.0, Culture=neutral, PublicKeyToken=71e9bce111e9429c" %> <%-- The markup and script in the following Content element will be placed in the <head> of the page --%> <asp:Content ContentPlaceHolderID="PlaceHolderAdditionalPageHead" runat="server"> <script type="text/javascript" src="../Scripts/jquery-1.9.1.min.js"></script> <SharePoint:ScriptLink name="sp.js" runat="server" OnDemand="true" LoadAfterUI="true" Localizable="false" /> <meta name="WebPartPageExpansion" content="full" /> <!-- Add your CSS styles to the following file --> <link rel="Stylesheet" type="text/css" href="../Content/App.css" /> <link rel="Stylesheet" type="text/css" href="../Content/bootstrap.min.css" /> <!-- Add your JavaScript to the following file --> <script type="text/javascript" src="../Scripts/App.js"></script> <script type="text/javascript" src="../Scripts/Student.js"></script> </asp:Content> <%-- The markup in the following Content element will be placed in the TitleArea of the page --%> <asp:Content ContentPlaceHolderID="PlaceHolderPageTitleInTitleArea" runat="server"> SharePoint Hosted APP - Student Info </asp:Content> <%-- The markup and script in the following Content element will be placed in the <body> of the page --%> <asp:Content ContentPlaceHolderID="PlaceHolderMain" runat="server"> <div> <p id="message" style="display:none"> <!-- The following content will be replaced with the user name when you run the app - see App.js --> initializing... </p> </div> <div class="container"> <h2>Add Student Information</h2> <form> <div class="form-group"> <label for="email">Name:</label> <input type="name" class="form-control" id="name" placeholder="Enter Name"> </div> <div class="form-group"> <label for="contactnumber">Contact Number:</label> <input type="contactnumber" class="form-control" id="contactnumber" placeholder="Enter Contact Number"> </div> <div class="form-group"> <label for="email">Email:</label> <input type="email" class="form-control" id="email" placeholder="Enter Email"> </div> <div class="form-group"> <label for="BirthDate">BirthDate:</label> <input type="BirthDate" class="form-control" id="BirthDate" placeholder="Enter Contact Number"> </div> <div class="form-group"> <label for="BirthDate">Gender:</label> <input type="radio" name="gender" value="Male" />Male <input type="radio" name="gender" value="Female" />Female </div> <input type="button" class="btn btn-default" value="Submit" id="btnCreate" /> </form> </div> </asp:Content>
JavaScript File for CRUD Operation of Student List named “Student.js”.
$(document).ready(function () {
$("#btnCreate").on('click', function () {
AddListItem();
});
//Add New Item In List and Return Result
function AddListItem() {
var listName = "Students";
var name = $('#name').val();
var number = $('#contactnumber').val();
var email = $('#email').val();
var dob = new Date().toISOString();
var gender = $('input[name="gender"]:checked').val();
var itemType = GetItemTypeForListName(listName);
var item = {
"__metadata": { "type": itemType },
'Name': name, 'ContactNumber': number, 'Email': email, 'Gender': gender, 'DOB': dob
};
jQuery.ajax({
url: _spPageContextInfo.siteAbsoluteUrl + "/_api/web/lists/getbytitle('" + listName + "')/items",
type: "POST",
data: JSON.stringify(item),
headers: {
"accept": "application/json;odata=verbose",
"content-type": "application/json;odata=verbose",
"X-RequestDigest": $("#__REQUESTDIGEST").val()
},
success: function (d) {
alert("Student Information Added Successfuly.");
},
error: function () { alert("An Error Occured while adding Student Information"); }
});
return false;
}
// Get List Item Type metadata
function GetItemTypeForListName(name) {
return "SP.Data." + name.charAt(0).toUpperCase() + name.split(" ").join("").slice(1) + "ListItem";
}
});
Please note that I have used bootstrap CSS file to enhance look and feel.
In Student.js file AddListItem() method is used to create Item using REST service
After completion of Code deploy Add-In. It will appear in Site Contents and you can access it
While Adding record below error will raise
It indicates that user doesn’t have rights to insert item in website’s list.Which means we need to add access permission for user so that he can add item in list.
To give access to use click on AppManifest.xml. Go to Permissions Tab. Add Write rights as shown in Image.
Now Deploy Add-In.
While Accessing Add-In it will now ask for permission which user needs to allow to use Add-in.
Trust APP and perform Insert Operation.
Now it will add an item into list and also gives success method message.
Data in SharePoint List
Nilesh Rathod 