Skip to main content
Appkit has advanced support for specifying custom URL patterns for filtering and grouping search results. The Topic Pages module includes specialized versions of tags that work together to:
  • Output links with a particular path structure according to a pattern
  • Interpret the path of the current address to apply filters to a search.
This allows for a rich user interface which can help a user make sense of highly ‘categorized’ data and map different views of the data to readable URLs. See also 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 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.