THIS IS ARCHIVED DOCUMENTATION

Using Many Layouts for Coveo Components Using the Coveo for Sitecore Legacy Search UI Framework

This is for:

Developer System Administrator

Coveo for Sitecore 4.1 (November 2018)

When building a search-enabled web site, one often needs to display the same content in many different ways. This article explains how to use different layouts with the Coveo components.

Creating a New Sublayout

To change how Coveo components are rendered, you should create a new sublayout based on the existing one.

Duplicating the Component Sublayout

The first thing to do is to duplicate the sublayout of the component that you want to modify. The available components are: Coveo Search, Coveo Facet, and Coveo Sort. In this example, the Coveo Search component is used, but the same method applies to any other component.

  1. Open the Sitecore Content Editor.
  2. Select the sublayout to duplicate. The Coveo Search sublayout is located under sitecore/Layout/Sublayouts/Coveo/Coveo Search.
  3. Right-click and choose Duplicate.
  4. In the next screen, enter a meaningful name, such as Custom Coveo Search.

We strongly recommend that you move custom items from the sitecore/Layout/Sublayouts/Coveo folder to a separate folder. By leaving custom items in the Coveo sublayout folder, you may encounter upgrade issues. You should give the separate folder a meaningful name, such as CustomSublayouts.

Duplicating the .ascx Sublayout File

Now that you have a specific sublayout item, you must use a specific sublayout file as well. You’ll need to create a new copy of the sublayout file.

With Local Access to Sitecore Instance

  1. Open the following folder <SITECORE_INSTANCE_ROOT>\Website\layouts\Coveo and copy the CoveoSearch.ascx file. By default, the Sitecore instance folder is located in C:\inetpub\wwwroot.

    We strongly recommend that you move custom sublayout files outside of the <SITECORE_INSTANCE_ROOT>\Website\layouts\Coveo folder. By leaving custom sublayout files in this folder, you may encounter upgrade issues. It’s best to create a separate folder, such as CustomSublayouts.

  2. Give the copied sublayout file a meaningful name, ideally the same name as the sublayout item.

Without Local Access to Sitecore Instance

  1. Open Sitecore in Desktop mode.
  2. Open the File Explorer from Sitecore menu > Development Tools> File Explorer.
  3. Navigate to the layouts/Coveo folder and select the CoveoSearch.ascx file.
  4. Click Download from the toolbar.
  5. Save the file, and give it a meaningful name.
  6. Navigate to the destination folder in which you want to copy the sublayout file.
  7. Click Upload from the toolbar.
  8. Select and upload the file.

Linking the Sitecore Sublayout With the .ascx Sublayout File

  1. Open the Sitecore Content Editor.
  2. Select the sublayout that you duplicated at the beginning of this section.
  3. Select the Content tab and set the value of the Ascx file field (in the Data section) with the path of the duplicated sublayout file.
  4. Save the sublayout.

Allowing the Sitecore Sublayout in the Page Editor

If you want to be able to use your custom sublayout from the Page Editor, you must add it to the allowed renderings list.

  1. Open the Sitecore Content Editor.
  2. Select the placeholder in which you want to allow your sublayout. The placeholders are located at the following location: sitecore/Layout/Placeholder Settings.
  3. Select the Content tab.
  4. In the Data section, find the Allowed Controls list and click Edit just above the field name.
  5. Select your sublayout from the tree on the left and click the right arrow to add it to the Allowed Controls list. Click OK.
  6. Save the placeholder.

Allowing Your Custom Search Page to Be Inserted

If you want to be able to insert your custom search page, you must create a custom template with a duplicate of the Coveo-Powered Search Page.

  1. Open the Sitecore Content Editor.
  2. Within Templates, create a new folder with an appropriate name (for example, CoveoTemplates).
  3. Duplicate the templates/CoveoModule/Search/Coveo-Powered Search Page and name it accordingly.
  4. Move this custom template to the folder that you’ve created previously.
  5. On the __Standard Values node of your Custom Search Page, replace the Coveo Search sublayout with your custom sublayout. Make sure to use the same placeholder, that is, coveo-search. Use the Layout Details panel accessible under Presentation > Details to complete this step.
  6. Choose the Home item, and then choose the Home menu.
  7. Expand the Insert box to reveal a dialog allowing you to add your custom template as a selectable item.