CRUD SharePoint-Hosted App

Tags: SharePoint 2013, CRUD, CSOM, SharePoint-Hosted app

I will walk through the process of creating a very simple CRUD app for SharePoint 2013. SharePoint-Hosted app could be crafted only using client side technology i.e JavaScript this this case. If you want to develop it using server side technologies like C# or VB, you might want to consider cloud-hosted app. This is a very simple demo just show the CRUD mechanism involved in developing SharePoint-Hosted app. 

Here is the end result:

 

Without further ado, let

FinalView

First you have to create a list that will be used clicking on ‘Create Contact list’ button. Once contact add is added, contact items could be entered. For the demo purpose I am only adding first name. This is fairly primitive CRUD.

Without further ado, here is the JS code snippet:

   1:  // 
   2:  "use strict";
   3:   
   4:  // create namespace
   5:  var FooNameSpace = window.FooNameSpace || {}
   6:   
   7:  FooNameSpace.ListItems;
   8:  FooNameSpace.Collections = function () {
   9:      var createList = function () {
  10:          var clientContext = new SP.ClientContext.get_current();
  11:          var listCreationInfo = new SP.ListCreationInformation();
  12:          listCreationInfo.set_title("Contacts");
  13:          listCreationInfo.set_description("List to store all the contacts");
  14:          listCreationInfo.set_templateType(SP.ListTemplateType.contacts);
  15:          clientContext.get_web().get_lists().add(listCreationInfo);
  16:          clientContext.executeQueryAsync(ListCreationSuccess, failure);
  17:      },
  18:      ListCreationSuccess = function () {
  19:          alert("list created");
  20:      },
  21:      addItem = function (firstName) {
  22:          var clientContext = new SP.ClientContext.get_current();
  23:          var contactList = clientContext.get_web().get_lists().getByTitle("Contacts");
  24:          clientContext.load(contactList);
  25:          var listItemCreationInfo = new SP.ListItemCreationInformation();
  26:          var contactListItem = contactList.addItem(listItemCreationInfo);
  27:          contactListItem.set_item("Title", "testItem");
  28:          contactListItem.set_item("FirstName", firstName);
  29:          contactListItem.update();
  30:          clientContext.executeQueryAsync(success, failure);
  31:      },
  32:      success = function () {
  33:          displayListItem();
  34:      },
  35:   
  36:      failure = function (sender, args) {
  37:          alert(args.get_message());
  38:      },
  39:      deleteItem = function (id) {
  40:          var clientContext = new SP.ClientContext.get_current();
  41:          var contactList = clientContext.get_web().get_lists().getByTitle("Contacts");
  42:          clientContext.load(contactList);
  43:          var contactListItem = contactList.getItemById(id);
  44:          contactListItem.deleteObject();
  45:          clientContext.executeQueryAsync(success, failure);
  46:      },
  47:      editItem = function (id, firstName) {
  48:          var clientContext = new SP.ClientContext.get_current();
  49:          var contactList = clientContext.get_web().get_lists().getByTitle("Contacts");
  50:          clientContext.load(contactList);
  51:   
  52:          var contactListItem = contactList.getItemById(id);
  53:          contactListItem.set_item("FirstName", firstName);
  54:          contactListItem.update();
  55:          clientContext.executeQueryAsync(success, failure);
  56:      },
  57:   
  58:      displayListItem = function () {
  59:          var clientContext = new SP.ClientContext.get_current();
  60:          var query = "<View><Query><OrderBy><FieldRef Name='Title' />" +
  61:              "FieldRef Name='FirstName' />" +
  62:              "</OrderBy>" + "</Query>" +
  63:              "<ViewFields><FieldRef Name='Title'/>" +
  64:              "<FieldRef Name='FirstName' /></ViewFields></View>";
  65:   
  66:          var camlQuery = new SP.CamlQuery();
  67:          camlQuery.set_viewXml(query);
  68:          var list = clientContext.get_web().get_lists().getByTitle("Contacts");
  69:          clientContext.load(list);
  70:          FooNameSpace.ListItems = list.getItems(camlQuery);
  71:          clientContext.load(FooNameSpace.ListItems, 'Include(ID, Title, FirstName)');
  72:          clientContext.executeQueryAsync(readAll, failure);
  73:      },
  74:      readAll = function () {
  75:          var html = [];
  76:          html.push("<table><tr><td>ID</td><td>First Name</td></tr>");
  77:   
  78:          var enumerator = FooNameSpace.ListItems.getEnumerator();
  79:          while (enumerator.moveNext()) {
  80:              var contactItem = enumerator.get_current();
  81:              html.push("<tr><td>");
  82:              html.push(contactItem.get_item("ID"));
  83:              html.push("</td><td>");
  84:              html.push(contactItem.get_item("Title"));
  85:              html.push("</td><td>");
  86:              html.push(contactItem.get_item("FirstName"));
  87:              html.push("</td></tr>");
  88:          };
  89:          html.push("</table>");
  90:          $("#data").html(html.join(''));
  91:      }
  92:   
  93:      return {
  94:          AddItemToList: addItem,
  95:          CreateContactList: createList,
  96:          EditContactListItem: editItem,
  97:          DeleteContactListItem: deleteItem
  98:      }
  99:  }();
 100:   
 101:  $(document).ready(function () {
 102:      
 103:  });

It’s a very simple JS script and is self explanatory. Please refer to http://addyosmani.com/resources/essentialjsdesignpatterns/book/#modulepatternjavascript if you aren’t familiar with the JS patterns.

Now, here static portion of the default.aspx

   1:   <div id="CRUD">
   2:          <table>
   3:              <tr>
   4:                  <td colspan="2" style="text-align:right">
   5:                      <input type="button" value="Create Contact list" onclick="FooNameSpace.Collections.CreateContactList();" />
   6:                  </td>
   7:              </tr>
   8:              <tr>
   9:                  <td colspan="2">
  10:                  Add a contact
  11:                      </td>
  12:              </tr>
  13:              <tr>
  14:                  <td>
  15:                      <label class="myLabel">First Name</label>
  16:                  </td>
  17:                  <td>
  18:                      <input type="text" id="firstName" class="myInput" />
  19:                  </td>
  20:              </tr>
  21:              <tr>
  22:                  <td colspan="2" style="text-align:right">
  23:   
  24:                      <input type="button" value="Add Contact" onclick="FooNameSpace.Collections.AddItemToList($('#firstName').val());">
  25:                  </td>
  26:              </tr>
  27:              <tr>
  28:                  <td>Edit a contact
  29:                  </td>
  30:              </tr>
  31:              <tr>
  32:                  <td>
  33:                      <label class="myLabel">Id</label>
  34:                  </td>
  35:                  <td>
  36:                      <input type="text" id="idEdit" class="myInput" />
  37:                  </td>
  38:              </tr>
  39:   
  40:              <tr>
  41:                  <td>
  42:                      <label class="myLabel">First Name</label>
  43:                  </td>
  44:                  <td>
  45:                      <input type="text" id="firstNameEdit" class="myInput" />
  46:                  </td>
  47:              </tr>
  48:              <tr>
  49:                  <td colspan="2" style="text-align:right">
  50:                      <input type="button" value="Edit Contact" onclick="FooNameSpace.Collections.EditContactListItem($('#idEdit').val(), $('#firstNameEdit').val())" />
  51:                  </td>
  52:              </tr>
  53:   
  54:              <tr>
  55:                  <td>Delete a contact
  56:                  </td>
  57:              </tr>
  58:   
  59:              <tr>
  60:                  <td>
  61:                      <label class="myLabel">Id</label>
  62:                  </td>
  63:                  <td>
  64:                      <input type="text" id="idDelete" class="myInput" />
  65:                  </td>
  66:              </tr>
  67:              <tr>
  68:                  <td colspan="2" style="text-align:right">
  69:                      <input type="button" value="Delete Contact" onclick="FooNameSpace.Collections.DeleteContactListItem($('#idDelete').val());" />
  70:                  </td>
  71:              </tr>
  72:          </table>
  73:      </div>
  74:      <div id="data"></div>

 

Again, this is just a simple demo of CRUD SharePoint-Hosted app and is pretty primitive in nature.

Please let me know if you have any questions.

1 Comment

Add a Comment

Recent Posts