Add Custom Fields In Host Web SP List Using SharePoint Hosted App

In this blog I would like to share the code to add the custom fields on SharePoint host web list using SharePoint hosted app.
 
In *.aspx page add HTML Button
 
<button type="button" id="btnCreate">Add Field</button>
 
Write below code on *.js file,
  1. //get Current Context  
  2. var context = SP.ClientContext.get_current();  
  3. // This code runs when the DOM is ready and creates a context object which is needed to use the SharePoint object model  
  4. $(document).ready(function () {  
  5. console.log("page loading...");  
  6. $("#btnCreate").click(function () {  
  7. addField();  
  8. });  
  9. });  
  10.   
  11. //this method is used to add the fields on custom list  
  12. function addField() {  
  13. //Get host web URL  
  14. var hostWebUrl = decodeURIComponent(manageQueryStringParameter('SPHostUrl'));  
  15. //get app context using host web url  
  16. var appCtxSite = new SP.AppContextSite(context, hostWebUrl);  
  17. //get current web  
  18. var currentWEB = appCtxSite.get_web();  
  19. //get list from host web  
  20. var list = currentWEB.get_lists();  
  21. //load the list  
  22. context.load(list);  
  23. context.executeQueryAsync(function () {  
  24. //get custom list by name  
  25. var currentList = list.getByTitle("sampleList");  
  26. //get field collection from current list  
  27. var fldCollection = currentList.get_fields();  
  28. //set the type and field details  
  29. var f1 = context.castTo(fldCollection.addFieldAsXml('<Field Type="Text" DisplayName="Person Name" Name="PersonName" />'true, SP.AddFieldOptions.addToDefaultContentType), SP.FieldText);  
  30. f1.set_title("PersonName");  
  31. //update  
  32. f1.update();  
  33. context.executeQueryAsync(function () {  
  34. console.log("Field Creation Success");  
  35. },  
  36.   
  37. function (sender, args) {  
  38. console.log("Field Creation failed : " + args.get_message());  
  39. });  
  40. }, function (sender, args) {  
  41. onfail(sender, args);  
  42. });  
  43. }  
  44.   
  45. // This function is executed if the above call fails  
  46. function onfail(sender, args) {  
  47. alert('Failed to add field in list. Error:' + args.get_message());  
  48. }  
  49.   
  50. // this method used split the query string  
  51. function manageQueryStringParameter(paramToRetrieve) {  
  52. var params = document.URL.split("?")[1].split("&");  
  53. var strParams = "";  
  54. for (var i = 0; i < params.length; i = i + 1) {  
  55. var singleParam = params[i].split("=");  
  56. if (singleParam[0] == paramToRetrieve) {  
  57. return singleParam[1];  
  58. }  
  59. }  
  60. }  
Note - In app manifest file provide full control permission to the web as shown in below,
 
 
Summary
 
In this blog we have explored how to add the custom fields in host web list using SharePoint hosted app with JavaScript Object model. Happy coding !!