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. });
  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. },
  37. function (sender, args) {
  38. console.log("Field Creation failed : " + args.get_message());
  39. });
  40. }, function (sender, args) {
  41. onfail(sender, args);
  42. });
  43. }
  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. }
  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 !!