Creating a Share Point List Item in SharePoint Hosted Apps Programmatically

Please allow me to demonstrate how to create a SharePoint list in SharePoint hosted apps programmatically.

Two Important things to understand when working with apps for SharePoint are host webs and app webs:

• Host web is a SharePoint site where the app is installed
• App web is a special isolated site where the app for SharePoint internal components and content are deployed

var hostweburl = decodeURIComponent(getQueryStringParameter("SPHostUrl"));<br />
                var appweburl = decodeURIComponent(getQueryStringParameter("SPAppWebUrl"));

First, I have created a custom form. Create Project Site button handles a site creation action and a list item creation.

The following method is used to create SharePoint list item:

function createProjectListItem(projectSiteUrl, projectManagerId, engagementManagerId){<br />
                var clientContext =new SP.ClientContext(appweburl);<br />
                var appContextSite =new SP.AppContextSite(clientContext, hostweburl);<br />
                var web = appContextSite.get_web();<br />
                var projectsList = web.get_lists().getByTitle("Projects");

var itemCreationInfo =new SP.ListItemCreationInformation();<br />
                var projectListItem = projectsList.addItem(itemCreationInfo);

var projectTitle = $(&#039;#textBoxTitle&#039;).val();<br />
                var projectStatus = $(&#039;select[title=projectStatus]&#039;).val();<br />
                var projectPhase = $(&#039;select[title=projectPhase]&#039;).val();<br />
                var accountId = $(&#039;#taxonomyPickerAccount&#039;).val().substring(8, 44);<br />
                var fullProjectName = projectTitle +" - "+ projectPhase;

var urlValue =new SP.FieldUrlValue();<br />
                urlValue.set_url(hostweburl +"/"+ projectSiteUrl);<br />
                urlValue.set_description("Click to access");

projectListItem.set_item("Title", fullProjectName);<br />
                projectListItem.set_item("Status", projectStatus);<br />
                projectListItem.set_item("Type_x0020_of_x0020_Work", projectPhase);<br />
                projectListItem.set_item("Project_x0020_Site_x0020_URL", urlValue);<br />
                projectListItem.set_item("Project_x0020_Manager", projectManagerId);<br />
                projectListItem.set_item("Engagement_x0020_Manager", engagementManagerId);<br />
                projectListItem.set_item("Account", accountId);<br />
                projectListItem.update();

clientContext.load(projectListItem);<br />
                clientContext.executeQueryAsync(successHandler, onFailed);

function successHandler(){<br />
                // Method executed successfully<br />
                }<br />
                }

As you’ve noticed there are a couple of methods that are called in the code above. Let’s explain each of them:

• The following method is used to get Project Manager from the form.

  
  function getProjectManager(projectSiteUrl){<br />
                                var projectManagerPikerValue = $("#ctl00_PlaceHolderMain_ProjectManagerPeoplePicker").html();

  var indexStart = projectManagerPikerValue.indexOf("i:0#.f");<br />
                                var indexEnd = projectManagerPikerValue.indexOf("Description");<br />
                                var userKey = projectManagerPikerValue.substring(indexStart, indexEnd -3);

  var context =new SP.ClientContext.get_current();<br />
                                var user = context.get_web().ensureUser(userKey);

  context.load(user);<br />
                                context.executeQueryAsync(successHandler, onFailed);

  function successHandler (){<br />
                                var projectManagerId = user.get_id();<br />
                                }<br />
                                }

• The following method is used to get Engagement Manager from the form.

  
  function getEngagementManager(projectSiteUrl, projectManagerId){<br />
                                var engagementManagerPikerValue = $("#ctl00_PlaceHolderMain_EngagementManagerPiplePicker").html();

  var indexStart = engagementManagerPikerValue.indexOf("i:0#.f");<br />
                                var indexEnd = engagementManagerPikerValue.indexOf("Description");<br />
                                var userKey = engagementManagerPikerValue.substring(indexStart, indexEnd -3);

  var context =new SP.ClientContext.get_current();<br />
                                var user = context.get_web().ensureUser(userKey);

  context.load(user);<br />
                                context.executeQueryAsync(successHandler, onFailed);

  function successHandler (){<br />
                                var engagementManagerId = user.get_id();<br />
                                }<br />
                                }

Happy coding!