This article covers a Bloomreach Experience Manager version 11. There's an updated version available that covers our most recent release.

1 - Get a List of Documents

Previous - Code DiffNext

Reset the workspace to step 1:

git checkout -f step-1

The most important changes are listed below. You can see the full diff on GitHub.

The Document Collection Resource

In this step a documents list view is added to the app. The list is populated with data retrieved from the Content REST API's Document Collection resource, available from your local Hippo CMS server at the following URL:

http://localhost:8080/site/api/documents

The response consists of a JSON object with some properties concerning page navigation (they will be used in step 5) and an items array of objects representing documents in Hippo's content repository:

{
   "offset":0,
   "max":100,
   "count":13,
   "total":13,
   "more":false,
   "items":[
      {
         "name":"breakfast",
         "id":"b8f5eb45-7200-452a-b26e-3118a0dc60b8",
         "link":{
            "type":"local",
            "id":"b8f5eb45-7200-452a-b26e-3118a0dc60b8",
            "url":"http://localhost:8080/site/api/documents/b8f5eb45-7200-452a-b26e-3118a0dc60b8"
         }
      },
      {
         "name":"introduction-speech",
         "id":"18e36c35-429d-4fee-b76e-eeabcbfc08bb",
         "link":{
            "type":"local",
            "id":"18e36c35-429d-4fee-b76e-eeabcbfc08bb",
            "url":"http://localhost:8080/site/api/documents/18e36c35-429d-4fee-b76e-eeabcbfc08bb"
         }
      }
   ]
}

Note that each item includes a link to the URL at which the content of the document can be accessed. That's covered in the next step.

Rendering the Documents List in the App

This step adds a DocumentsService to retrieve the data from the Document Collection resource and a documents-list view to render a list of documents. The DocumentsController calls the DocumentsService and adds the response to the scope so the view can render the list.

Dependencies

Dependencies to the ngRoute and ngResource services are added to the app:

index.html

    <script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.8/angular-resource.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.8/angular-route.js"></script>

app.js

var hippoRestApp = angular.module('hippoRestApp', [ 'ngRoute', 'ngResource' ]);

DocumentsService

A new DocumentsService implements a getList function which uses the $resource service to retrieve the data from the Documents resource.

app.js

hippoRestApp.constant('apiPrefix', 'http://localhost:8080/site/api/');

app.js

hippoRestApp.factory('DocumentsService', function($resource, apiPrefix) {
  return {
    getList : function() {
      return $resource(apiPrefix + 'documents/', {}).get();
    }
  }
});

DocumentsController

The DocumentsController calls the DocumentsService's getList function and adds the response to the scope as documents:

app.js

hippoRestApp.controller('DocumentsController', function($scope,
    DocumentsService, apiPrefix) {

  DocumentsService.getList().$promise.then(function(response) {
    $scope.documents = response;
  });

});

View and Routing

The new documents-list view iterates through the items array in the Document Collection resource's response and renders each item's name property in a list. Routing is added to map a URL ('/') to the view's template and the controller.

documents-list.html

<h2>Documents</h2>

<ul>
  <li ng-repeat="document in documents.items">{{document.name}}</li>
</ul>

index.html

<body ng-app="hippoRestApp">
  <div class="container" ng-controller="DocumentsController">
      <div ng-view></div>
  </div>
</body>

app.js

hippoRestApp.config(function($routeProvider) {
  $routeProvider.when('/', {
    templateUrl : 'document-list.html',
    controller : 'DocumentsController'
  }).otherwise('/');
});

Experiments

Summary

This step added a view to the app which renders a list of documents retrieved from a Hippo CMS server using the Content REST API's Document Collection resource. Now go to step 2 to learn how to retrieve and render a single document's actual content.

Previous - Code Diff - Next

Did you find this page helpful?
How could this documentation serve you better?
On this page
    Did you find this page helpful?
    How could this documentation serve you better?