Duplicate a component to modify Its HTML

This is for:

Developer System Administrator
Warning
Legacy feature

This article pertains to the Coveo Hive framework which is now in maintenance mode.

Choose one of Coveo’s more modern, lightweight, and responsive libraries for any future search interface development. See the search interface Implementation guide for more details.

You might encounter circumstances where a Coveo for Sitecore component meets your requirements, aside from its HTML rendering. When situations like these arise, you might not need to create an entire new custom component, which is a complex and lengthy process.

Instead, you can probably achieve your goal by duplicating the component rendering item and view file and making the necessary adjustments on these duplicates. Using this technique, your duplicate component benefits from the original Coveo for Sitecore component configuration options available through its data source.

Certain Coveo for Sitecore search interface DOM element class attributes strictly serve to bind the element to Coveo CSS styles (see Configuration Through Markup). Integrators often prefer leveraging a front-end framework (for example, Bootstrap) so that Coveo-powered search interfaces better match the look and feel of their websites and to benefit from element positioning options and responsiveness these tools provide. To do so, integrators change some class attribute values of Coveo for Sitecore renderings, beginning with the Modular Frame component.

Warning
WARNING

Never edit Coveo for Sitecore renderings, layouts and view files directly. Always edit duplicates.

If you want to change Coveo for Sitecore search interface DOM element class attribute values in your duplicate component view files, ensure that you understand which DOM elements serve strictly for visual appearance purposes beforehand (see Configuration Through Markup).

Duplication procedure

Duplicating a Coveo for Sitecore component involves performing the following steps:

  1. Creating and editing the duplicate Coveo for Sitecore rendering item

  2. Creating the duplicate Coveo for Sitecore .cshtml view file

  3. Editing the allowed controls of the target Coveo placeholder

  4. Inserting your duplicate component in a Coveo-powered search page

  5. Editing the .cshtml view file

Important

The new items and file required for your duplicate component have to be stored outside Coveo folders in Sitecore, so as to avoid being overwritten during an upgrade of Coveo for Sitecore. Follow the instructions below carefully.

Creating and editing the duplicate Coveo for Sitecore rendering item

  1. In the Sitecore Content Editor, right-click the /sitecore/layout/Renderings folder and select Insert > Rendering Folder.

  2. Name your new folder Coveo Hive Duplicates.

  3. In the /sitecore/layout/Renderings/Coveo Hive folder, locate the Coveo rendering item you want to duplicate.

  4. Right-click the Coveo rendering item and select Duplicate.

    Screenshot of the Sitecore content tree with the Modular Frame item selected and the Duplicate option highlighted | Coveo

  5. Give your duplicate item a meaningful name.

    Sitecore prompt to enter a name for the new item | Coveo

  6. Move your duplicate item inside your Coveo Hive Duplicates folder.

    Screenshot of the Sitecore content tree with the new item inside the Coveo Hive Duplicates folder | Coveo

  7. In your duplicate item, edit the Path field value. The Path field value represents the location and name of the soon-to-be-created duplicate component view file. The location of the new view file must not be inside the /Views/Coveo Hive/ folder or one of its subfolders.

    Screenshot of the Modular Frame duplicate item showing the path to the modular frame duplicate dot cshtml view file | Coveo

Creating the duplicate Coveo for Sitecore .cshtml view file

  1. In your file manager, create the folder you provided the Path field value for in step 7 of section Creating and editing the duplicate Coveo for Sitecore rendering item.

    Screenshot of Windows file explorer showing the creation of a Coveo Hive duplicates folder inside the views folder

  2. Open the view folder that contains the .cshtml view file to duplicate.

    Screenshot of the Windows file explorer showing the modular frame view file and the other original Coveo Hive frame cshtml view files

  3. Duplicate the .cshtml view file.

  4. Rename the new view file in accordance with the Path field value you specified in step 7 of section Creating and editing the duplicate Coveo for Sitecore rendering item.

    Screenshot of the Windows File explorer showing the file being renamed to Modular Frame Duplicate dot cshtml | Coveo

  5. Move the new view file to its intended folder, in accordance with the Path field value you specified in step 7 of section Creating and editing the duplicate Coveo for Sitecore rendering item.

    Screenshot of the Windows file explorer with the new view file inside the duplicates folder created earlier | Coveo

Editing the allowed controls of the target Coveo placeholder

Add your new rendering item to the list of Allowed Controls for the target placeholder through a Placeholder Extender (see Patching the allowed controls of an existing placeholder).

Screenshot of a new placeholder extender item in the Sitecore content tree with the modular frame duplicate item in the allowed controls

You now have a new Coveo duplicate component that’s protected from being overwritten upon a Coveo for Sitecore upgrade.

Inserting your duplicate component in a Coveo-powered search page

When you duplicate a Coveo for Sitecore rendering as explained in this article, certain characteristics of the original component are automatically carried over to its duplicate, namely:

  • its model

  • its data source template

Hence, in the Sitecore Experience Editor, when you insert your new rendering in the placeholder you’ve extended, the behavior is the same as if you had inserted the original Coveo for Sitecore rendering. For example, if the original component requires a data source, your duplicate also requires a data source of the same type (that is, that’s based off of the same template).

Editing the .cshtml view file

You can now begin editing the .cshtml view file of your duplicate component and test the results as you go.

Warning
WARNING

Never edit Coveo for Sitecore renderings, layouts and view files directly. Always edit duplicates.

If you want to change Coveo for Sitecore search interface DOM element class attribute values in your duplicate component view files, ensure that you understand which DOM elements serve strictly for visual appearance purposes beforehand (see Configuration Through Markup).