Adding Tabs to a Search Page Using the Interface Editor

You can add tabs to your search pages, which allows your users to quickly switch search context while keeping their original queries.

To add tabs to a search page using the Interface Editor

  1. Access the Interface Editor for the search page you wish to modify (see Accessing the Coveo Interface Editor).

  2. From the menu on the right, drag-and-drop the Tab component to the top of your search page.


  3. In the Tab Creator window:

    1. Under Unique ID, enter a unique ID for your tab. This is not visible by end users, and is used to uniquely identify tabs.

    2. Under Caption, enter your tab caption. This is the title that end users will see and need to click to select your tab.

    3. Select OK to create your tab.

      By default, a new tab displays all of your content.

  4. Add a filter expression so the tab displays only a subset of your results:

    In the Tab Options panel, under Filter expression, enter a query to be added to your search whenever the tab is selected.

    Ensure you follow the Coveo Cloud Query Syntax (see Coveo Cloud Query Syntax Reference).

    In your Coveo Cloud organization, you have a source called My Web Source. You want to make it so your tab only displays results from this specific source. Therefore, under Filter expression, you enter @syssource=="My Web Source".

    To know which fields and values to use, you can inspect your indexed items using the Content Browser of your Coveo Cloud organization (see Content Browser - Page).

    When using the Coveo for Salesforce Free edition, you may have to change the query in the Content Browser to access all your items (see Understanding Coveo for Salesforce Objects and Fields).

  5. In the Tab Options panel, further customize your tab.

    To know more about the available options, hover over the tooltip icon (interfaceeditor-tooltip-icon) next to the option. You can also consult the Coveo JavaScript Search Framework reference documentation (see Coveo Tab Component).

  6. After having customized your options, select Save.

What’s Next?

Continue editing your search page using the Interface Editor (see JavaScript Search Interface Editor).