SharePoint Add-ins are self-contained extensions of SharePoint websites that you create, and that run without custom code on the SharePoint server.

In SharePoint hosted apps, you can use almost all the SharePoint components like list, content type, pages etc.…

All business logic in a SharePoint-hosted add-in, use JavaScript, either directly on a custom page or as a JavaScript file that is referenced from a custom page. A JavaScript version of the SharePoint Object Model (JSOM) is available to make it simple for the add-in to perform create, read, update, and delete (CRUD) operations on SharePoint data.

Over View of Example

  1. Create List in Office 365 Site
  2. Create Project in Visual Studio (Selecting SharePoint Hosted App)
  3. Provide User Interface
  4. Business logic under .js file (Insert Data)
  5. Deploy the Solution to office 365 Site.

Let’s take an example of SharePoint hosted app.

Step - 1 (Create List in Office 365 Site)

Open your office 365 Share Point site and create one list. Below find the steps and screen shots to create list with columns.

Now, we need to create some columns for this list.















We have done creation of List with columns. Now, we have to insert the data to the list, using User Interface and business logic.

Step - 2 (Create Project in Visual Studio (Selecting SharePoint Hosted App)

Below, find the Screenshots for creating the SharePoint Hosted App through Visual Studio, using SharePoint hosted app.













As of now, we have done creation of project through Visual studio. After creation of project, Project contains different hierarchy like pages, Scripts, AppManifest.xml and etc.

Below find the screen shot for AppManifest.xml file.



Step - 3 (Provide User Interface)

We are going to provide some text boxes, labels, and buttons for Inserting and displaying the data.

After writing the above code, User Interface will look like the below. You will not get a result immediately. Don’t bother about this. I have given this screenshot just for reference.



Step - 4 (Business logic under .js file (Insert and Display Data))

After completion of user Interface, we need to write the business logic for Insertion and Display operations. You can write business logic in App.js file or same page (default.aspx), or you can take separate .js file.

For this example, I am taking App.js file to write business logic. Please follow the below steps to write the code under App.js file.

The following method is used for retrieving data from the list and display in a table.

  1. //Get List items of Employee List
  2. function DisplayEmployeeDetails() {
  4. var contxt = new SP.ClientContext(appWebUrl);
  5. var appContxt = new SP.AppContextSite(contxt, hostWebUrl);
  6. var web = appContxt.get_web(); //Get the Web
  7. var list = web.get_lists().getByTitle("Employees"); //Get the List
  8. var empQuery = new SP.CamlQuery();
  9. empQuery.set_viewXml('<View><RowLimit></RowLimit>50</View>');
  10. var items = list.getItems(empQuery);
  11. contxt.load(list);
  12. contxt.load(items);
  13. var table = $("#tblEmployees");
  14. var html = "<thead><tr><th>EmployeeId</<th><th>Name</th><th>Salary</th><th>Address</th></tr></thead>";
  16. //Execute the Query Asynchronously
  17. contxt.executeQueryAsync(
  18. Function.createDelegate(this, function () {
  19. var itemInfo = '';
  20. var enumerator = items.getEnumerator();
  21. while (enumerator.moveNext()) {
  22. var currentEmpItem = enumerator.get_current();
  23. html += "<tr><td>" + currentEmpItem.get_item('ID') + "</td><td>" + currentEmpItem.get_item('Title') + "</td><td>" + currentEmpItem.get_item('Salary') + "</td><td>" + currentEmpItem.get_item('Address') + "</td></tr>";
  24. }
  25. table.html(html);
  26. }),
  27. Function.createDelegate(this, onQueryFailedGet)
  28. );
  30. }
  32. function onQueryFailedGet() {
  34. $("#dvMessage").text("Display failed " + arguments[1].get_message());
  35. }
The following method is used for inserting the data to Employee List.
  1. //Insert data into Employee List.
  2. function createEmployee() {
  4. var contxt = new SP.ClientContext(appWebUrl);
  5. var appContxt = new SP.AppContextSite(contxt, hostWebUrl);
  6. var web = appContxt.get_web(); //Get the Web
  7. var list = web.get_lists().getByTitle("Employees"); //Get the List
  8. var listCreationInformation = new SP.ListItemCreationInformation();
  9. var listItem = list.addItem(listCreationInformation);
  10. listItem.set_item("Title", $("#empName").val());
  11. listItem.set_item("Salary", $("#empSalary").val());
  12. listItem.set_item("Address", $("#empAddress").val());
  13. listItem.update(); //Update the list Item.
  14. contxt.load(listItem);
  15. //Execute the batch Asynchronously
  17. contxt.executeQueryAsync(
  18. Function.createDelegate(this, onQuerySucceededCreate),
  19. Function.createDelegate(this, onQueryFailedCreate));
  21. }
  24. function onQuerySucceededCreate() {
  26. $("#dvMessage").text("Employee Information Submitted Successfully");
  27. }
  29. function onQueryFailedCreate() {
  31. $("#dvMessage").text("Submission failed " + arguments[1].get_message());
  32. }
And, I have used CSS for table as well as headers.

Open the Content-> App.css file and paste the below css.
  1. /* Place custom styles below */
  2. table.mytable {
  3. border-collapse: collapse;
  4. width: 100%;
  5. }
  7. th, td {
  8. text-align: left;
  9. padding: 8px;
  10. }
  12. tr:nth-child(even){background-color: #f2f2f2}
  14. th {
  15. background-color: #4CAF50;
  16. color: white;
  17. }
Finally, App.js file looks like below and copy paste the below code under App.js.
  1. //-------------------------------------------------------------------------------//
  2. 'use strict';
  4. var hostWebUrl;
  5. var appWebUrl;
  7. var context = SP.ClientContext.get_current();
  8. var user = context.get_web().get_currentUser();
  10. // This code runs when the DOM is ready and creates a context object which is needed to use the SharePoint object model
  11. $(document).ready(function () {
  15. hostWebUrl = decodeURIComponent(manageQueryStringParameter('SPHostUrl'));
  16. appWebUrl = decodeURIComponent(manageQueryStringParameter('SPAppWebUrl'));
  19. DisplayEmployeeDetails();
  21. $("#btnCreate").on('click', function () {
  22. createEmployee();
  23. DisplayEmployeeDetails();
  26. });
  29. $("#btnClear").on('click', function () {
  30. $(".csValue").val('');
  31. });
  33. });
  37. function manageQueryStringParameter(paramToRetrieve) {
  38. var params =
  39. document.URL.split("?")[1].split("&");
  40. var strParams = "";
  41. for (var i = 0; i < params.length; i = i + 1) {
  42. var singleParam = params[i].split("=");
  43. if (singleParam[0] == paramToRetrieve) {
  44. return singleParam[1];
  45. }
  46. }
  47. }
  52. //Get List items of Employee List
  53. function DisplayEmployeeDetails() {
  55. var contxt = new SP.ClientContext(appWebUrl);
  56. var appContxt = new SP.AppContextSite(contxt, hostWebUrl);
  57. var web = appContxt.get_web(); //Get the Web
  58. var list = web.get_lists().getByTitle("Employees"); //Get the List
  59. var empQuery = new SP.CamlQuery();
  60. empQuery.set_viewXml('<View><RowLimit></RowLimit>50</View>');
  61. var items = list.getItems(empQuery);
  62. contxt.load(list);
  63. contxt.load(items);
  64. var table = $("#tblEmployees");
  65. var html = "<thead><tr><th>EmployeeId</<th><th>Name</th><th>Salary</th><th>Address</th></tr></thead>";
  67. //Execute the Query Asynchronously
  68. contxt.executeQueryAsync(
  69. Function.createDelegate(this, function () {
  70. var itemInfo = '';
  71. var enumerator = items.getEnumerator();
  72. while (enumerator.moveNext()) {
  73. var currentEmpItem = enumerator.get_current();
  74. html += "<tr><td>" + currentEmpItem.get_item('ID') + "</td><td>" + currentEmpItem.get_item('Title') + "</td><td>" + currentEmpItem.get_item('Salary') + "</td><td>" + currentEmpItem.get_item('Address') + "</td></tr>";
  75. }
  76. table.html(html);
  77. }),
  78. Function.createDelegate(this, onQueryFailedGet)
  79. );
  81. }
  83. function onQueryFailedGet() {
  85. $("#dvMessage").text("Display failed " + arguments[1].get_message());
  86. }
  90. //Insert data into Employee List.
  91. function createEmployee() {
  93. var contxt = new SP.ClientContext(appWebUrl);
  94. var appContxt = new SP.AppContextSite(contxt, hostWebUrl);
  95. var web = appContxt.get_web(); //Get the Web
  96. var list = web.get_lists().getByTitle("Employees"); //Get the List
  97. var listCreationInformation = new SP.ListItemCreationInformation();
  98. var listItem = list.addItem(listCreationInformation);
  99. listItem.set_item("Title", $("#empName").val());
  100. listItem.set_item("Salary", $("#empSalary").val());
  101. listItem.set_item("Address", $("#empAddress").val());
  102. listItem.update(); //Update the list Item.
  103. contxt.load(listItem);
  104. //Execute the batch Asynchronously
  106. contxt.executeQueryAsync(
  107. Function.createDelegate(this, onQuerySucceededCreate),
  108. Function.createDelegate(this, onQueryFailedCreate));
  110. }
  113. function onQuerySucceededCreate() {
  115. $("#dvMessage").text("Employee Information Submitted Successfully");
  116. }
  118. function onQueryFailedCreate() {
  120. $("#dvMessage").text("Submission failed " + arguments[1].get_message());
  121. }
  124. // This function prepares, loads, and then executes a SharePoint query to get the current users information
  125. function getUserName() {
  126. context.load(user);
  127. context.executeQueryAsync(onGetUserNameSuccess, onGetUserNameFail);
  128. }
  130. // This function is executed if the above call is successful
  131. // It replaces the contents of the 'message' element with the user name
  132. function onGetUserNameSuccess() {
  133. $('#message').text('Hello ' + user.get_title());
  135. }
  137. // This function is executed if the above call fails
  138. function onGetUserNameFail(sender, args) {
  139. alert('Failed to get user name. Error:' + args.get_message());
  140. }
  142. //------------------------------------------------------------//
Step- 5 (Deploy the Solution to Office 365 Site)

Deploy the solution to Office 365 site. Follow these steps to deploy the solution.







We have done the Share point hosted app basic operations, like Insertion and Display the data. Please let me know if you have any queries.

References used- https://msdn.microsoft.com/en-us/library/office/fp179930.aspx