Add a Detail Page

Table of Contents

Invalid characters in the URL

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'
})

Create a view called search-detail.html.
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.

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>

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 will 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.