Sitecore and Coveo: How to Create a Custom Coveo UI Component?

As you guys and gals already know, Coveo offers a componentized search interface so that we can reuse and/or move those components when creating our own search page. Keep this in mind: You should always try to use the out-of-the-box components as much as possible. I can’t stress that enough.

The reason is that it is not easy at all to create those search components from scratch. There are so many different events that you have to raise or listen when executing a query that it’s really easy to miss a few ones when trying to do this yourself. Coveo already did all this hard work so why not take advantage of this?

 

What About the Look And Feel?

Yeah yeah I know, the out-of-the-box search page Coveo provides does not have the same look and feel as your project. That’s normal, don’t worry, you can still use them. The way to go here is to grab those OOTB components and just apply your style by adding or changing a few CSS classes. Not a big deal, right?

This strategy will cover 95% of the cases. However, you may have this very specific need that is not covered by any Coveo component. In this post, I’ll show you how you can leverage the Coveo components to create your own custom search component without overcomplicating your life.

 

The Component: A Collapsible Facets Section

In my hypothetical scenario, the client requested (and I wasn’t able to make him change his mind) a very particular Facets Section: it has to fill the entire search page horizontally and it must be collapsible. The final result should look like this:

After searching on support.coveo.com for this kind of collapsible Facets Section and realizing that there isn’t anything OOTB for that, it’s clear that we have no choice other than creating a custom component. But what is the best way of doing that?

Let’s Do Some Real Work

In summary, those are the steps for creating our new custom UI component:

• Create and change a few CSS classes
• Create the new view file
• Create the new rendering item
• Create a placeholder extender item
• Add the new rendering on your search page
• Be happy 🙂

When we list them like that, they become pretty straightforward, right? Yeah, I know. Now let’s talk a little bit more about each one of them.

Creating/Changing the CSS Classes

Since we will be creating a completely new UI component we have no choice, we must style it. At the same time, the Facets we are going to add to our new Facets Section will have a slightly different style from those added to the original one. So basically, those are the classes we need to add to make everything look properly:

.CoveoSearchInterface .coveo-collapsible-facets-section-button {
  cursor: pointer;
  border: none;
  outline: none;
  background-color: #f7f8f9;
  width: 100%;
  color: #67768b;
  font-size: 13px;
  text-transform: uppercase;
  line-height: 35px;
  margin-top: 5px; }
.CoveoSearchInterface .coveo-collapsible-facets-section-content {
  display: none;
  width: 100%;
  border: 1px solid #cccccc; }
  .CoveoSearchInterface .coveo-collapsible-facets-section-content .CoveoFacet {
    margin: 10px }

 

Creating the New CSHML View File

We need to link the new rendering that will be created in a few minutes to a CSHML view file. Well, there it is:

@using Sitecore.Mvc
@using Coveo.UI.Components.Extensions

<button class="coveo-collapsible-facets-section-button">Filters</button>

 @Html.Sitecore().CoveoDynamicPlaceholder("coveo-ui-facets")



 var elements = document.getElementsByClassName("coveo-collapsible-facets-section-button");
 var i;

 for (i = 0; i 

 

Creating the New Rendering Item

In this case, you can simply duplicate the already existing /sitecore/layout/Renderings/Coveo Hive/Sections/Facets Section and rename it to /sitecore/layout/Renderings/Coveo Hive/Sections/Collapsible Facets Section. Then you change its Path to your brand new view in /Views/Coveo Hive/Sections/Collapsible Facets Section.cshtml and that’s it.

Creating the Placeholder Extender

As Coveo explains here, you can add a new Allowed Control to a given placeholder without changing the original one. By doing that, you can guarantee that your change won’t be overridden during the next upgrade of the Coveo package. All you have to do is create a new Placeholder Extender.

Since the placeholder we are trying to extend is called Main Section, our extender will be named Main Section Placeholder Extender, as you can see in the picture below:

 

Putting Everything Together

Start by publishing your latest changes. If you are using the Coveo Hive search page example, you should also delete the OOTB Facets Section present on the left column. Then click on the Add a new component button (1), then click on placeholder selected below (2) and finally add a new Collapsible Facets Section rendering.

You should see something like this:

So we have this big button FILTERS with a container in the bottom on which you can add your Facets renderings. Make sure you save the page before going ahead and adding a few ones. Remember, you can use the same Add a new component button to do this. You should get something like this:

Publish everything again and then open your published search page. You should be amazed by the coolest collapsible facets section you ever created in your entire life:

 

Is It Really That Simple?

You can bet it is. The example I showed during this post is not the most complicated, but keep in mind that the process would be pretty much the same even if you have a fancier component to be created. Most of the hard work would be CSS and Javascript related and when we talk about those you can always go as fancy as you want. See you in the next post!

 

References

https://docs.coveo.com/en/871/coveo-for-sitecore-v4/integrating-a-custom-component-in-sitecore-using-coveo-for-sitecore-hive-framework

https://docs.coveo.com/en/640/coveo-for-sitecore-v4/inserting-custom-components-in-an-existing-search-interface