Topic Pages

Appkit has advanced support for specifying custom URL patterns for filtering and grouping search results.

The Topic Pages module includes specialised versions of tags that work together to:

  • Output links with a particular path structure according to a pattern

  • Interpret the path of the current URL to apply filters to a search.

This allows for a rich user interface which can help a user make sense of highly 'categorised' data and map different views of the data to readable URLs.

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 ( === '') {
            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="{{}}"></search:filter>
    <search:response var="response" platform='platform' query="query">
  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/{{}}"></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="{{}}"></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, it will load that page with the ID passed into the URL.