0

I am a beginner in Angular. I am trying to combine several TASKS list into single Angular table. It works well and here is part of my code, JS part:

$http({
    method: 'GET',
    url: $urllist[1],
    headers: {
        "Accept": "application/json;odata=verbose"
    }
}).then(function successCallback(response) {
    $scope.myTasks = $scope.myTasks.concat(response.data.d.results)

    angular.element(document).ready(function() {
        dTable = $('#user_table')
        dTable.DataTable();
})}, function errorCallback(response) {

});

Html part:

<table width="100%" cellspacing="0" id="user_table" class="users list dtable" border="1">
      <thead id="TblHead">
         <tr>
            <td class="RightMargin">Edit</td>
            <td class="RightMargin">Ref</td>
            <td class="RightMargin">Task Name</td>
            <td class="RightMargin">Start Date</td>
            <td class="RightMargin">Due Date</td>
            <td class="RightMargin">Task Status</td>
            <td class="RightMargin">% completed</td>
            <td class="RightMargin">Milestone</td>
         </tr>
      </thead>
      <tbody>
      <tr ng-repeat="MyTask in myTasks | filter:singleSelect">
          <td><a title='Click to edit' href="{{MyTask.url}}/EditForm.aspx?ID={{MyTask.ID}}" target='_blank' class='btn btn-info btn-md'><span class='glyphicon glyphicon-user'></span> Edit</a></td>
          <td>{{MyTask.Ref}}</td>
          <td>{{MyTask.Title}}</td>
          <td>{{MyTask.StartDate | date}}</td>
          <td>{{MyTask.DueDate | date}}</td>
          <td>{{MyTask.Status}}</td>
          <td>{{MyTask.PercentComplete}}</td>
          <td>{{MyTask.Milestone}}</td>
      </tr>
      </tbody>
   </table>

I would like to add additional column "EDIT" with a button link to the edit form for each task item (e.g. /Lists/Schedule/EditForm.aspx?ID=1&IsDlg=1)

My question is:

  1. Is there any existing URL field in the list so that I can call with Angular directly?
  2. If not, I can build it myself (e.g. {{MyTask.url}}/EditForm.aspx?ID={{MyTask.ID}}). The task list have "ID" field but do not have "url" field. How can I add a field (url) in the $scope.myTasks?
  • Which version of SharePoint you are using? How many task list you have? How are you getting tasks from all these lists, by calling REST on these list one after another or what? – Ganesh Sanap Sep 16 '19 at 9:59
  • I am using sp2016 and target to combine 10 task lists (same site collection but different subsite) . I have a for loop on urllist[10]. The code is calling the API with Get method. Is it "Rest"? – Mark L Sep 16 '19 at 10:30
  • 1
    Ok. So, you must be having URL's of subsites with you in this array. If your list name (in URL) is same then you can build the URL on your own after getting results from REST like siteUrl/lists/ListName/EditForm.aspx?ID=itemID and push it with new property against each result you got from REST – Ganesh Sanap Sep 16 '19 at 11:08
  • @GaneshSanap would you give me some reference or sample? I understand the logic but not the syntax – Mark L Sep 16 '19 at 11:26
  • I dont know how to add the url into $scope.myTask – Mark L Sep 16 '19 at 11:48
0

Thanks Ganesh for the hints. Eventually I solved the problem. I have tried syntax like push or angular.extend($scope.myTasks, $scope.myTasks, response.data.d.results); but it is not working (the new get results always override the existing values in myTasks)

Here is my code for future reference. In html part, add a td cell to hold the Edit button:

<td class="ms-cellstyle ms-vb1"><a title='Edit' href='#' ng-click='OpenPopUpPage(MyTask.url+MyTask.ID)', RefreshOnDialogClose, 800, 600); ' class='pointerCursor'><img border="0" alt="edit" src="/_layouts/15/images/edititem.gif?rev=40"></a></td>

In JS part, add the "url" string into results "url" field with a forEach loop :

// $urllist[] hold a list of URLs for different subsites
let url = $urllist[i]+"Lists/Schedule/EditForm.aspx?ID=";
let resturl = $urllist[i]+"_api/web/lists/GetByTitle('Schedule')/Items";

$http({
    method: 'GET',
    url: resturl,
    headers: {
        "Accept": "application/json;odata=verbose"
    }
}).then(function successCallback(response) {
    angular.forEach(response.data.d.results, function(value, key) {
        response.data.d.results[key].url = url;
    })
    //angular.extend($scope.myTasks, $scope.myTasks, response.data.d.results);  <-- not working T_T
    $scope.myTasks = $scope.myTasks.concat(response.data.d.results)
    angular.element(document).ready(function() {
        dTable = $('#user_table')
        dTable.DataTable();
})}, function errorCallback(data) {
        // hmm... how to write error handling?
});
| improve this answer | |

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.