Walkthrough: Adding search functionality to your page


How to use and configure search in SXA.

To enable visitors to quickly find what they are looking for, SXA comes with flexible out-of-the-box search functionality. There are different search renderings available from the Toolbox, for example, renderings that add a search box, renderings that sort or filter the search results, and so on. This makes it easy to set up a simple search solution for your site.

For example, you can add a basic search solution to your page that contains a search query box and lists the results with pagination.


You must switch to Preview mode to view the search request results of your search components.

This walkthrough describes how to:

  • Add the Search Box rendering

  • Add the Search Results rendering

  • Add the Page Selector rendering

For users to view the results of their search, you must add the Search Results rendering on the page. For simple solutions, you can have the search results appear on the same page.

To add the Search Results rendering:

  1. To add a search results section to your page, from the Toolbox, drag the Search Results rendering to the page.

  2. To change the text of the search box on the page, in the Search Results toolbar, click Edit component configuration itemE9DBB5659C0B4AADBFC8AF485DA9D9F8.png and enter the text that you want to appear when the search returns no results. Click OK.

  3. To change the Search Results rendering parameters, for example, to determine how many results should be loaded at once, or how the results are sorted, in the Select the Associated Content dialog box, select the Default item.

  4. In the Control Properties dialog box, edit the following fields to specify how to arrange the search results:

    • Search results signature – enter the unique signature of a specific Search Results rendering to limit the search results. This can be convenient when you have more than one search result rendering on the page and you only want to filter on specific search results. When you leave this field empty, it filters all Search Results renderings with no signature.

    • Search scope – select a scope to limit the search results.

    • Page size – enter the number of results you want to be loaded by the rendering.

    • Default language filtering – select the language you want to use for the search.

    • Default sort order – select the way the results are sorted on the page. This is only used when the Sort Results rendering is not used.

    • Automatically fire search when no criteria set - when selected search is not triggered until the users provides search criteria.

With the Page Selector rendering, you can determine how to display the results pages. The number of pages displayed depends on the default page size configured in the Search Results rendering or, if the Page Size rendering is used, on the page size configured in the Page Size rendering.

To add the Page Selector rendering:

  1. From the Toolbox, drag the Page Selector rendering to the page.

  2. In the Page Selector toolbar, click Edit component configuration item93581C7A08B446E69F50AD3ECE04CE8E.png .

  3. In the dialog box, fill in the fields and click OK.

    For example, the following fields:

    Enter the page selector fields.

    Appear as:

    Page selector display after setting the fields.
  4. To change the properties of the Page Selector rendering, for example, to determine how many pages are displayed in buttons, in the Search box, click More, and click Edit component properties.

  5. In the Control Properties dialog box, edit the following fields and then click OK:

    • Search results signature – if you want to filter on specific Search Results renderings, enter the signature(s) (separated by a comma) of the Search Results rendering(s) that you want to search on.

    • Collapsed mode threshold – if you expect results on many pages, you can replace some of these pages by dots.

    For example, if you enter 10 in the Collapsed mode threshold field, the following is displayed for the search results:

    Example of using the collapsed mode threshold.