2

I created a list with AngularJS, using ng-repeat. The data comes from a SharePoint list. In my SharePoint list when I open to see the detail I can see the version history of the "Comments" field, it looks like this:

enter image description here

But when I open the detail in my Angular list, it only shows the latest message (And only the message, without the name of the person who wrote it and the date). My list looks like this:

enter image description here

So my question is how can I look for the version history and display it with Angular? And if possible with the name of the person and date.


Edit:

Thanks to @Marko_Tica I know there is an api to call version history of each item, as it says in this answer. With this I have what I needed: to only show the version history of the "Comment's field". The thing now is that this formula forces me to make a call for each Item, because I need to specify the Item ID in the url:

https://myDomain.com/sites/mySite/_api/web/Lists/getbytitle('MyListName')/items(ITEMID)/versions

My list contains like a thousand items. Also I'm already doing a call to show the List items in a table. When you click an item, a modal shows the detailed info, I need to put the version history of Comments within this modal.
How can I achieve that when you click on a certain item, the Version history of only the selected item is displayed?

0

Look at this solution and change it to your needs. https://joeldsouzasite.wordpress.com/2015/12/06/display-version-history-through-javascript-list/

Basically you need to call _layouts/15/Versions.aspx

 url:weburl+’_layouts/15/Versions.aspx?list=’ + currentListGUID + ‘&ID=’+item1+’&Source=’+weburl+’/Lists/’+title+’/AllItems.aspx’,

Stackoverflow answer here https://stackoverflow.com/questions/24423657/sharepoint-2013-get-splistitem-versions-via-rest

| improve this answer | |
  • Thanks, the first link didn't help that much as it only calls the Version's page, which shows all the changes the item has had. I need to call the changes from a specific column. Your second link seems interesting as it says I can use this url: https://url/to/site/_api/web/Lists/getbytitle('MyListName')/items(ITEMID)/versions which works fine because it returns version history data like JSON format... problem now is I need to loop this call for every item, this while calling the normal angular table. I edited my question explaining this issue – Soul Eeater Oct 15 at 7:12
0

So I've found a way to do this. When I make the call (or request) of the SharePoint list, I just did another one inside the modal's function to call the version history of the selected item.

HTML:
I make an ng-repeat of the elements requested and put an ng-click to open the modal when you click on the item's title

<table>
   <tr>
      <th>ID</td>
      <th>name</th>
   </tr>
   <tr ng-repeat="x in data">
      <td>{{x.ID}}</div>
      <td ng-click="showDetails(x)">{{x.LinkTitle}}</div>
   </tr>
</table>

JS:
A normal http request. And in the Modal's function I make the request for the version history

$http({
   method: "GET",
   url: "https://myDomain.com/sites/mySite/_api/web/lists/getByTitle('MyListName')/items?$select=*,LinkTitle,&$top=10000",
   headers: { "Accept": "application/json; odata=verbose" }
}).then(function onSuccess(response) {
   $scope.data = response.data.d.results;
         
   //Code that opens the modal when a certain item is clicked
   $scope.showDetails = function(x){

      //Request the versions of the clicked item. Notice in the URL I put the ID of current clicked item
      $http({
         method: "GET",
         url: "https://myDomain.com/sites/mySite/_api/web/lists/getbytitle('MyListName')/items(" + x.ID + ")/versions",
         headers: { "Accept": "application/json; odata=verbose" }
      }).then(function onSuccess(response) {
         $scope.versionsData = response.data.d.results;
      });

      $scope.x = x;
      $('#myModal').modal('show');
   }
});

Here is the modal's HTML, I'm using Bootstrap's modal.
I've made a list within a list. In the Comments I put an ng-repeat for the versions, filtering only the ones where the "comments" changed (with ng-if).

<div id="myModal" class="modal fade" role="dialog" tabindex="-1">
   <div class="modal-dialog">
      <div class="modal-content">
         <div class="modal-header">
            <button type="button" class="close" data-dismiss="modal">&times;</button>
         </div>
         <div class="modal-body">
            <ul class="detail-view">
               <li><b>Title</b></li>
               <li>{{x.LinkTitle}}</li>
               <li><b>Comments</b></li>
               <ul>
                  <li ng-repeat="f in versionsData" ng-if="f.Comments">
                     <!-- I tried to replicate the way SharePoint shows the info (with name, date and comment --->
                     {{f.Editor.LookupValue}} ({{f.Modified | date: 'MM/dd/yyyy'}}): {{f.Comments}}
                  </li>
               </ul>
               <li><b>Status</b></li>
               <li>{{x.Status}}</li>
                .
                .
                .
            </ul>
         </div>
      </div>
   </div>
</div>
| 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.