Add a Detail Page

  1. Add the following route to your routes.js or search.routes.js:

    .state('details', {
    url: '/{slug}/{id}',
    templateUrl: function (params) {
    
        if (params.slug === '') {
            params.slug = defaultPage;
        }
        if (params.id === '') {
            return 'views/' + defaultPage + '.html';
        }
    
        return 'views/' + params.slug + '-detail.html';
    },
    controller: 'MainCtrl'
    })
  2. Create a view called search-detail.html.

  3. Ensure that your controller, search.controller.js or main.js, contains the line, $scope.params = $stateParams;. Also, ensure that $stateParams is injected into your controller.

  4. Add a search:query tag in your search-detail.html page that contains a nested filter with the ID parameter passed in the URL as the filter:

    <search:platform var="platform" conf="YOUR_PLATFORM_HERE"></search:platform>
    
    <search:query var="query" parameters="" results-per-page="1" max-results="1">
        <search:filter field="id" value="{{params.id}}"></search:filter>
    </search:query>
    
    <search:response var="response" platform='platform' query="query">
    </search:response>
  5. In your result, set your URL to link to the new detail page. Use that result’s ID as a parameter:

    <search:field name="title" url="search/{{result.id}}"></search:field>

Invalid characters in the URL

If your ID includes non URL safe characters, you’ll need to create a new unique ID field with these characters removed.

You can refer to these in steps 4 and 5 by doing the following:

Step 4
<search:filter field="my_other_field_name" value="{{params.id}}"></search:filter>
Step 5
<search:field name="title" url="search/{{result | field:'my_other_field_name' | actual | encodeURIComponent}}"></search:field>

Now if the user goes to mysite.com/search/id-of-the-document, it will load that page with the ID passed into the URL.