> ## Documentation Index
> Fetch the complete documentation index at: https://doc.lucidworks.com/llms.txt
> Use this file to discover all available pages before exploring further.

# Topic Pages

export const LwTemplate = ({title = "Key questions to get you started", icon = "sparkles", cta = "Powered by Agent Studio", linkHref = "https://lucidworks.com/demo/?utm_source=docs&utm_medium=referral&utm_campaign=docs_cta_ai"}) => {
  const [isLoaded, setIsLoaded] = useState(false);
  useEffect(() => {
    const timer = setTimeout(() => {
      setIsLoaded(true);
    }, 500);
    return () => clearTimeout(timer);
  }, []);
  return <div className="lw-template-container">
      <Card title={title} icon={icon}>
        {isLoaded && <span dangerouslySetInnerHTML={{
    __html: `<lw-template id="a029c1a9-28be-427e-b0e1-5d918920246a"></lw-template
            >`
  }} />}
        <Link href={linkHref} className="agent-studio-link text-left text-gray-600 gap-2 dark:text-gray-400 text-sm font-medium flex flex-row items-center hover:text-primary dark:hover:text-primary-light group-hover:text-primary group-hover:dark:text-primary-light">Powered by Lucidworks Agent Studio</Link>
      </Card>
    </div>;
};

[localhost link]: http://localhost:3000/docs/4/app-studio/concepts/layout-and-styling/topic-pages

[old doc.lw link]: https//doc.lucidworks.com/app-studio/4.2/3086

[mintlify link]: https://doc.lucidworks.com/docs/4/app-studio/concepts/layout-and-styling/topic-pages

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

<LwTemplate />

<Accordion title="Add a Detail Page">
  {/* // tag::body[] */}

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

     ```javascript theme={"dark"}
     .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:

     ```xml theme={"dark"}
     <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:

     ```xml theme={"dark"}
     <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**

  ```xml theme={"dark"}
  <search:filter field="my_other_field_name" value="{{params.id}}"></search:filter>
  ```

  **Step 5**

  ```xml theme={"dark"}
  <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.

  {/* // end::body[] */}
</Accordion>