Hello, good to see you here.
\nBe sure that it really is not so difficult to post data from a form to a SharePoint List. I would show you the steps and also give you the codes.<\/p>\n
<\/p>\n
Content:<\/b><\/p>\n <\/p>\n If you have any issue though, just let me know. Use the comment box below or the form to left of this page.<\/p>\n <\/p>\n Create a list in SharePoint and called CustomerDetails. We are keeping it very simple so you will understand exactly how it works.<\/p>\n <\/p>\n Create a html page and add AngularJS and BootStrap to the header like shown below: Listing 1<\/b>: Add files in header section<\/p>\n <\/p>\n <\/p>\n Add the following html to the body of your page, in between the <body> and <\/body> tags. This is the form that would be filled to be submitted to the SharePoint list<\/p>\n <\/p>\n <\/p>\n Listing 2:<\/b> Code the HTML Form<\/p>\n <\/p>\n Add the following code to your AngularJS script. Name this script index.js. It’s a bit complicated but I want you to first try it, then I would explain how it works to you or help you debug any error you may be getting. Remember to link this script to your html page and place the two in the same folder<\/p>\n <\/p>\n <\/p>\n Listing 3:<\/b> Content of your index.js file<\/p>\n <\/p>\n <\/p>\n Although it looks complicated, but it is really very simple. Trust me!<\/p>\n Go ahead to view the page. Let me know if you have challenges, I would be able to provide some guidance for you<\/p>\n","protected":false},"excerpt":{"rendered":" Hello, good to see you here. Be sure that it really is not so difficult to post data from a form to a SharePoint List. … <\/p>\n","protected":false},"author":2,"featured_media":622,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_mi_skip_tracking":false,"_monsterinsights_sitenote_active":false,"_monsterinsights_sitenote_note":"","_monsterinsights_sitenote_category":0},"categories":[113],"tags":[],"_links":{"self":[{"href":"https:\/\/kindsonthegenius.com\/blog\/wp-json\/wp\/v2\/posts\/78"}],"collection":[{"href":"https:\/\/kindsonthegenius.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/kindsonthegenius.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/kindsonthegenius.com\/blog\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/kindsonthegenius.com\/blog\/wp-json\/wp\/v2\/comments?post=78"}],"version-history":[{"count":9,"href":"https:\/\/kindsonthegenius.com\/blog\/wp-json\/wp\/v2\/posts\/78\/revisions"}],"predecessor-version":[{"id":1205,"href":"https:\/\/kindsonthegenius.com\/blog\/wp-json\/wp\/v2\/posts\/78\/revisions\/1205"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/kindsonthegenius.com\/blog\/wp-json\/wp\/v2\/media\/622"}],"wp:attachment":[{"href":"https:\/\/kindsonthegenius.com\/blog\/wp-json\/wp\/v2\/media?parent=78"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/kindsonthegenius.com\/blog\/wp-json\/wp\/v2\/categories?post=78"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/kindsonthegenius.com\/blog\/wp-json\/wp\/v2\/tags?post=78"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}\n
Step 1: Create a SharePoint List<\/h3>\n
\nThis list should contain the following fields three fields.<\/p>\n\n
Step 2: Add Bootstrap, AngularJS and JQuery<\/h3>\n
\n<\/p>\n<html><\/span>\r\n<head><\/span>\r\n<title><\/span>AngularJS Tutorial<\/title><\/span>\r\n<script <\/span>type=<\/span>\"text\/javascript\"<\/span> src=<\/span>\"bootstrap.js\"<\/span>><\/span> <\/script><\/span>\r\n<script <\/span>type=<\/span>\"application\/javascript\"<\/span> src=<\/span>\"jquery.min.js\"<\/span>><\/script><\/span>\r\n<script <\/span>type=<\/span>\"application\/javascript\"<\/span> src=<\/span>\"angular.js\"<\/span>><\/script><\/span>\r\n<script <\/span>type=<\/span>\"application\/javascript\"<\/span> src=<\/span>\"index.js\"<\/span>><\/script><\/span>\r\n\r\n<\/head><\/span>\r\n\r\n<body><\/span>\r\n...\r\n\/\/We would place the form here\r\n...\r\n<\/body><\/span>\r\n\r\n<\/html><\/span>\r\n<\/pre>\nStep 3: Add the html Form<\/h3>\n
<form<\/span> name=<\/span>\"userForm\"<\/span> ng-app=<\/span>\"myapp\"<\/span> ng-controller=<\/span>\"myController\"<\/span> ><\/span>\r\n <div<\/span> class=<\/span>\"form-group\"<\/span>><\/span>\r\n <label<\/span> for=<\/span>\"firstname\"<\/span>><\/span>Firstname <\/label><\/span> \r\n <input<\/span> type=<\/span>\"text\"<\/span> ng-model=<\/span>\"Firstname\"<\/span> class=<\/span>\"form-control\"<\/span> id=<\/span>\"firstname\"<\/span> \/><\/span> \r\n <\/div><\/span>\r\n <div<\/span> class=<\/span>\"form-group\"<\/span>><\/span>\r\n <label<\/span> for=<\/span>\"lastname\"<\/span>><\/span>Lastname:<\/label><\/span>\r\n <input<\/span> type=<\/span>\"text\"<\/span> ng-model=<\/span>\"Lastname\"<\/span> class=<\/span>\"form-control\"<\/span> id=<\/span>\"lastname\"<\/span> \/><\/span>\r\n <\/div><\/span>\r\n <div<\/span> class=<\/span>\"form-group\"<\/span>><\/span>\r\n <label<\/span> for=<\/span>\"address\"<\/span>><\/span>Address:<\/label><\/span>\r\n <input<\/span> type=<\/span>\"text\"<\/span> ng-model=<\/span>\"Address\"<\/span> class=<\/span>\"form-control\"<\/span> id=<\/span>\"address\"<\/span> \/><\/span>\r\n <\/div><\/span>\r\n <button<\/span> type=<\/span>\"submit\"<\/span> class=<\/span>\"btn btn-primary\"<\/span> ng-click=<\/span>\"submitCustomer()\"<\/span> class=<\/span>\"btn btn-default\"<\/span> data-dismiss=<\/span>\"modal\"<\/span>><\/span>Submit<\/button><\/span>\r\n<\/form><\/span><\/pre>\nStep 4: Add the Script<\/h3>\n
var<\/span> myapp =<\/span> angular.module('myapp'<\/span>, []);\r\nmyapp.controller('myController'<\/span>, function<\/span>($q, $scope, $http){\r\n\r\n\/\/add nomination to start workflow <\/span>\r\nfunction<\/span> getRequestDigest(){\r\nvar<\/span> deferred =<\/span> $q.defer();\r\n$http ({\r\nurl:<\/span> \"RequestDigest url \"<\/span>, \/\/Get this url from your IT department<\/span>\r\nmethod:<\/span> \"POST\"<\/span>,\r\nheaders:<\/span> {\r\n\"Content-Type\"<\/span>:<\/span> \"application\/json; odata=verbose\"<\/span>,\r\n\"Accept\"<\/span>:<\/span> \"application\/json; odata=verbose\"<\/span>\r\n}\r\n}).success(function<\/span> (response) {\r\nconsole.log('X-RequestDigest value:'<\/span>, response.d.GetContextWebInformation.FormDigestValue);\r\n$scope.requestDigest =<\/span> response.d.GetContextWebInformation.FormDigestValue;\r\ndeferred.resolve(response.d);\r\n}).error(function<\/span> (err) {\r\nconsole.log('Error in POST request digest'<\/span>, err);\r\ndeferred.reject(err);\r\n});\r\nreturn<\/span> deferred.promise;\r\n}\r\n\/\/digest end<\/span>\r\n\r\n\/\/FUNCTION TO POST ITEM TO THE DATABASE<\/span>\r\nfunction<\/span> AddCustomer(listName){\r\n$scope.submitSuccess=<\/span>false<\/span>;\r\n$scope.submitError =<\/span> false<\/span>;\r\nvar<\/span> deferred =<\/span> $q.defer();\r\nvar<\/span> requestData;\r\n\r\nvar<\/span> GetItemTypeForListName =<\/span> function<\/span> (name) {\r\nreturn<\/span> \"SP.Data.\"<\/span> +<\/span> name.charAt(0<\/span>).toUpperCase() +<\/span> name.split(\" \"<\/span>).join(\"\"<\/span>).slice(1<\/span>) +<\/span> \"ListItem\"<\/span>;\r\n};\r\n\r\nvar<\/span> itemType =<\/span> GetItemTypeForListName(listName);\r\n\r\n\/\/JSON BODY OF THE REQUEST<\/span>\r\nrequestData =<\/span> {\r\n\"Title\"<\/span>:<\/span> $scope.Firstname,\r\n\"LastNamePhonetic\"<\/span>:<\/span> $scope.Lastname,\r\n\"WorkAddress\"<\/span>:<\/span> $scope.Address,\r\n__metadata :<\/span> { type:<\/span> itemType }\r\n};\r\n\r\nvar<\/span> postUrl =<\/span> baseUrl +<\/span> \"_api\/web\/lists\/getbytitle(listName)\/items\"<\/span>; \/\/Replace baseUrl<\/span>\r\nvar<\/span> config =<\/span> {\r\nheaders:<\/span> {\r\n\"Content-Type\"<\/span>:<\/span> \"application\/json; odata=verbose\"<\/span>,\r\n'Accept'<\/span>:<\/span> 'application\/json; odata=verbose'<\/span>,\r\n'X-RequestDigest'<\/span>:<\/span> $scope.requestDigest\r\n}\r\n};\r\nconsole.log(\"requestDigest\"<\/span>, $scope.requestDigest);\r\n\r\n$http.post (postUrl, JSON.stringify(requestData), config).then(function<\/span> (data) {\r\nconsole.log(\"success\"<\/span>, data);\r\n$scope.submitSuccess=<\/span>true<\/span>;\r\n\r\n},function<\/span>(error){\r\nconsole.log(\"failed\"<\/span>, error);\r\n$scope.submitError=<\/span>true<\/span>;\r\n});\r\n\r\nreturn<\/span> deferred.promise;\r\n\r\n};\r\n\/\/END OF POST<\/span>\r\n\r\n\/\/button- generate new item in the list and run wf<\/span>\r\n$scope.submitCustomer =<\/span> function<\/span> (){\r\nconsole.log(\"submitCustomer\"<\/span>);\r\nvar<\/span> promise1 =<\/span> getRequestDigest();\r\npromise1.then(function<\/span>(){ \/\/1st run the RequestDigest, then the AddCustomer<\/span>\r\nAddCustomer(\"CustomerDetails\"<\/span>);\r\n});\r\n}\r\n\/\/button end<\/span>\r\n\r\n});\r\n\r\n<\/pre>\nStep 5: Test your page!<\/h3>\n
\nEnter some items in the form and submit and check that the items gets inserted. Then go the list in SharePoint to make sure the item actually got inserted.<\/p>\n