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

21-06-2018

4 - Search for Documents

Previous - Code DiffNext

Reset the workspace to step 4:

git checkout -f step-4

Search

In this step the document list in the app is extended with keyword search functionality.

The Document Collection resource described in step 1 supports keyword search through a _query parameter:

http://localhost:8080/site/api/documents/?_query=breakfast

The response will have the same format as before but will only include documents that contain the keywords in the _query parameter.

Code Changes

DocumentsService

The DocumentsService's getList function is extended with a query parameter which is passed on to the REST resource.

app.js

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

DocumentsController

The DocumentsController is extended so that the documents list can be updated any time (e.g. when a search query is submitted by the user) through an update function. A query object (to be bound to a search input box in the view) is passed on to the DocumentsService.

app.js

  if (!$routeParams.uuid) {

    $scope.query = '';

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

    $scope.update($scope);

    $scope.search = function() {
      $scope.update($scope);
    }

  }

View

A search form is added to the documents-list view, consisting of an input field bound to the query object and a button to submit the search query. On form submission the controller's search function is called.

documents-list.html

<h2>Documents</h2>

<form ng-submit="search()">
  <input type="text" ng-model="query" size="30" placeholder="enter keywords">
  <input class="btn-primary" type="submit" value="search">
</form>

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

Summary

In this step a search form was added to the app's document list. Go to step 5 to learn how to add paging to the list.

Previous - Code DiffNext

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?

    We rely on cookies

    to optimize our communication and to enhance your customer experience. By clicking on the Accept and Close button, you agree to the collection of cookies. You can also adjust your preferences by clicking on Manage Preferences. For more information please see our Privacy policy.

    Manage cookies
    Accept & close

    Cookies preferences

    Accept & close
    Back