1

I am pretty new with AngularJS, and I need to be able to edit some entries of a Sharepoint list but from an AngularJS list that I made.
This is my code right now:

<!DOCTYPE html>
<html>
<head>
   <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
   <script src="angular.js"></script>

   <style>
        .myTable th {
            padding: 10px;
            cursor: pointer;
        }
        .myTable, .myTable tr, .myTable td {
            border: 1px solid #ccc;
            border-collapse: collapse;
            padding: 6px;
        }
        .material-icons {
            font-size: 17px;
        }
   </style>
   <script>
        var myApp = angular.module("myApp", []);  
        myApp.controller("myController", function($scope, $http) {
            $scope.editablerow = '';

            //Here I call the Sharepoint List
            $http({
                method:'GET',
                url:_spPageContextInfo.webAbsoluteUrl + "/_api/web/lists/getByTitle('Contacts List')/items?$select=*,Name/Title&$expand=Name",
                headers: { "Accept": "application/json;odata=verbose" }
            }).success(function(data, status, headers, config) {
                var dataResults = data.d.results;
                $scope.contacts = dataResults;
            }).error(function(data, status, headers, config) {
                alert("Error! The list's data cannot be found.");
            });

            //And this is for the edit options
            $scope.editContent = function(contact) {
                $scope.editablerow = angular.copy(contact);
            }
            $scope.loadTemplate = function(contact) {
                if(contact.ID === $scope.editablerow.ID) return 'edit';
                else return 'view';
            }
            $scope.saveData = function(indx) {
                $scope.rows[indx] = angular.copy($scope.editablerow);
                $scope.reset();
            };
            $scope.reset = function() {
                $scope.editablerow = [];
            }
        });
    </script>
</head>
<body>
    <div ng-app="myApp">
        <div ng-controller="myController" class="myCode">
            <table class="myTable">
                <thead>
                    <tr>
                        <!--So these are the columns of my list-->
                        <th>
                            <i class="material-icons">attach_file</i>
                        </th>
                        <th>Edit</th>
                        <th>ID</th>
                        <th>Name</th>
                        <th>Title</th>
                        <th>Message</th>
                    </tr>
                </thead>
                <tbody>
                    <!--Here I call the results which are in the following scripts-->
                    <tr ng-repeat="contact in contacts" ng-include="loadTemplate(contact)">
                    </tr>
                </tbody>
            </table>

            <!--This is the Script to show the results normally-->
            <script type="text/ng-template" id="view">
                <td>
                    <i ng-if="contact.Attachments" class="material-icons">attach_file</i>
                </td>
                <td>
                    //This is the button to open the "Edition mode"
                    <a ng-click="editContent(contact)" style="cursor:pointer">
                        <i class="material-icons">mode_edit</i>
                    </a>
                </td>
                <td>{{contact.ID | number}}</td>
                <td>{{contact.Name.Title}}</td>
                <td>{{contact.LinkTitle}}</td>
                <td>{{contact.Message}}</td>
            </script>

            <!--This is the Script to show the results in the Edit mode-->
            <script type="text/ng-template" id="edit">
                <td style="text-align: center;">
                    <i ng-if="contact.Attachments" class="material-icons">attach_file</i>
                </td>
                <td>
                    <button ng-click="saveData($index)">Save</button>
                    <button ng-click="reset()">Cancel</button>
                </td>
                <td>{{contact.ID | number}}</td>
                <td>{{contact.Name.Title}}</td>
                <td><input type="text" ng-model="editablerow.LinkTitle" /></td>
                <td><input type="text" ng-model="editablerow.Message" /></td>
            </script>
        </div>
    </div>
</body>
</html>

So the thing with my code is that when you click on the Edit button of each row it will open the Edition mode, there it will only be able to edit the LinkTitle and the Message fields. Obiously the code doesn't work, when you click Save it doesn't upload the changes to the list.

I know I'm missing something and I'd like to know what is it ..and I would appreciate if someone can work an answer using my example code :D Thanks


CODE UPDATE:

<!DOCTYPE html>
<html>
<head>
   <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
   <script src="angular.js"></script>

   <style>
        .myTable th {
            padding: 10px;
            cursor: pointer;
        }
        .myTable, .myTable tr, .myTable td {
            border: 1px solid #ccc;
            border-collapse: collapse;
            padding: 6px;
        }
        .material-icons {
            font-size: 17px;
        }
   </style>
   <script>
        var myApp = angular.module("myApp", []);  
        myApp.controller("myController", function($scope, $http) {
            $scope.editablerow = '';

            //Here I call the Sharepoint List
            $http({
                method:'GET',
                url:_spPageContextInfo.webAbsoluteUrl + "/_api/web/lists/getByTitle('Contacts List')/items?$select=*,Name/Title&$expand=Name",
                headers: { "Accept": "application/json;odata=verbose" }
            }).success(function(data, status, headers, config) {
                var dataResults = data.d.results;
                $scope.contacts = dataResults;
            }).error(function(data, status, headers, config) {
                alert("Error! The list's data cannot be found.");
            });

            //And this is for the edit options
            $scope.editContent = function(contact) {
                $scope.editablerow = angular.copy(contact);
            }
            $scope.loadTemplate = function(contact) {
                if(contact.ID === $scope.editablerow.ID) return 'edit';
                else return 'view';
            }

            //Here's the part that was missing, but still doesn't work :/
            $scope.saveData = function(indx) {
                $scope.rows[indx] = angular.copy($scope.editablerow);
                var data = {
                    __metadata: { "type": "SP.Data.Contacts_x0020_ListListItem" },
                    Title: "Some Title"
                };
                $http({
                    method:'POST',
                    url:_spPageContextInfo.webAbsoluteUrl + "/_api/web/lists/getByTitle('Contacts List')/getItemById("+indx+")",
                    headers: {
                        "Accept": "application/json;odata=verbose",
                        "X-RequestDigest": document.getElementById("__REQUESTDIGEST").value,
                        "content-type": "application/json;odata=verbose",
                        "X-HTTP-Method": "PATCH", //Not sure if maybe it is "MERGE"?
                        "If-Match": "*"
                    },
                    data: JSON.stringify(data)
                }).success(function(data, status, headers, config) {
                    alert("Updated");
                }).error(function(data, status, headers, config) {
                    alert("Error! The data cannot be updated.");
                });
                $scope.reset();
            };
            $scope.reset = function() {
                $scope.editablerow = [];
            }
        });
    </script>
</head>
<body>
    <div ng-app="myApp">
        <div ng-controller="myController" class="myCode">
            <table class="myTable">
                <thead>
                    <tr>
                        <!--So these are the columns of my list-->
                        <th>
                            <i class="material-icons">attach_file</i>
                        </th>
                        <th>Edit</th>
                        <th>ID</th>
                        <th>Name</th>
                        <th>Title</th>
                        <th>Message</th>
                    </tr>
                </thead>
                <tbody>
                    <!--Here I call the results which are in the following scripts-->
                    <tr ng-repeat="contact in contacts" ng-include="loadTemplate(contact)">
                    </tr>
                </tbody>
            </table>

            <!--This is the Script to show the results normally-->
            <script type="text/ng-template" id="view">
                <td>
                    <i ng-if="contact.Attachments" class="material-icons">attach_file</i>
                </td>
                <td>
                    //This is the button to open the "Edition mode"
                    <a ng-click="editContent(contact)" style="cursor:pointer">
                        <i class="material-icons">mode_edit</i>
                    </a>
                </td>
                <td>{{contact.ID | number}}</td>
                <td>{{contact.Name.Title}}</td>
                <td>{{contact.LinkTitle}}</td>
                <td>{{contact.Message}}</td>
            </script>

            <!--This is the Script to show the results in the Edit mode-->
            <script type="text/ng-template" id="edit">
                <td style="text-align: center;">
                    <i ng-if="contact.Attachments" class="material-icons">attach_file</i>
                </td>
                <td>
                    <button ng-click="saveData($index)">Save</button>
                    <button ng-click="reset()">Cancel</button>
                </td>
                <td>{{contact.ID | number}}</td>
                <td>{{contact.Name.Title}}</td>
                <td><input type="text" ng-model="editablerow.LinkTitle" /></td>
                <td><input type="text" ng-model="editablerow.Message" /></td>
            </script>
        </div>
    </div>
</body>
</html>
  • Yes @Sunil is right. You are missing code for updating your list.. – Rohit Waghela Jan 12 '18 at 8:56
0

You are missing the update/post request on save click, in your script there is no post request is mention so how SharePoint will know what to update if you are not having a post request same like you are having a get request for the Contact list.

Please add a post request in below line

    $scope.saveData = function(indx) {
     alert(indx);
     $scope.rows[indx] = angular.copy($scope.editablerow);
     var data = {
        __metadata: { "type": "SP.Data.Contacts_x0020_ListListItem" },
        Title: "Some title"};

       $http({
                method:'POST',
                url:_spPageContextInfo.webAbsoluteUrl + "_api/Web/Lists/GetByTitle('Contacts List')/getItemById("+indx+")",
                headers: {
                    "accept": "application/json;odata=verbose",
                 "X-RequestDigest": $("#__REQUESTDIGEST").val(),
                 "content-Type": "application/json;odata=verbose",
                 "X-Http-Method": "PATCH",
                    "If-Match": "*"
                },
                data: JSON.stringify(data),
                }).success(function(data, status, headers, config) {
                alert("updated");
                }).error(function(data, status, headers, config) {
                alert("Error! The  data cannot be updated.");
             });
                $scope.reset();
            };

Refer this link

  • Okay I added the code as the one you are telling me, but still the code runs the same: when I try to edit something and click "Save", it just recharges the page and no update is made. Is there something else I'm missing? Also from where are you taking the name "SP.Data.ContactsListListItem" in the"__metadata" part? – Soul Eeater Jan 12 '18 at 22:08
  • are you getting error alert , And to get SP.Data.ContactsListListItem you have to make a get request or you can check the below hitting endpoint on browser. "your site url/" _api/web/lists/getbytitle('Contacts List')/listItemEntityTypeFullName – Sunil Sahu Jan 13 '18 at 7:02
  • No, I'm not getting any alerts... It just realoads the page with no change in the list. Second doubt: the "Title" part after the "__metadata", what is that? – Soul Eeater Jan 13 '18 at 17:32
  • its column name in the list , and please refer the link i mention in the answer, queries related updating in the list. – Sunil Sahu Jan 14 '18 at 8:37
  • I referred to the link but sincerely I don't understand a lot of this.. :( I updated my Code as you can see above, there's how I added the part that you told me. But I'm still kinda blocked because I don't really know a lot about REST APIs and still learning about Angular – Soul Eeater Jan 15 '18 at 21:48

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.