Uncategorized

Table Layouts in Coveo for Sitecore 4.1 (Hive)

Out of the box, Coveo Hive does not support table layouts.  Your options are either card or list.  But, there are situations where a table layout is absolutely necessary.  Having run into this a few times, I found a way to force a table layout when needed.  Just follow the steps below.

 

Step one – Add Table to Coveo Results Layouts

When selecting your layout type in … Coveo determines your options based on the items in /sitecore/system/Settings/Indexing and Search/Coveo/UI Result Layouts.  To enable the ability to select “Table” as an option, simply create an item in this folder with the name “Table”.

Under “Basic Settings”, make sure the Value is set to “table”.

 

If you now go and edit your data source for the Results List on your search page, you’ll see Table as an option:

Step two – hack your template

Here’s where things get a little odd, and you’ll just have to trust me that this works.  It took quite a bit of trial and error to figure it out. This is based on some of the documentation around the Javascript Framework, translated into the way Coveo for Sitecore assembles a page.  Essentially what we are doing is creating two templates, a header and a results list, in a single template file.

Let’s take a look at some sample code below:

 

 

 

First off, you have to put your results template before your header template.  You also need to add a </script> tag after the template, but, no opening <script> tag.  This is because Coveo will automatically add the opening <script> tag and specify that its role is as a results template.

You don’t need a table row tag to wrap the table cells, just list the cells.

Then, you can specify a template for the table header.  The opening script tag is important to specify the type and data role of the script.  These should stay the same as shown in the sample code.  Id and classes are not essential and can vary as needed.

For each header that you want over your columns, you can specify a number of options, some of which I’ve shown here.  The classes shown above are required.  You can add others as needed.  The data sort and data display attributes are optional, but, add nice functionality.  You can see all the options in Coveo’s Javascript Framework documentation here: https://coveo.github.io/search-ui/globals.html

 

I hope this post helps to guide you the next time you find yourself in need of a table layout in Coveo Hive!  For more expert advice on Coveo for Sitecore, drop us a note here. (link to contact us)

 

 

 

 

About The Author