Reading time: 6 min read
Coveo Atomic: Using the Custom Tab Component to Enhance UX and Search Function
Explore the capabilities of Coveo Atomic and learn how to add custom tabs to your search interface.
Coveo Atomic is a component library that allows developers to quickly build lightweight, responsive search experiences. When starting from nothing, Atomic offers the best solution for setting up a simple, feature-rich search interface. Coveo Atomic is the ideal solution when setting up a search page with minimal custom code that does not require advanced knowledge from developers.
While Atomic offers a streamlined option for search setup, it does not excel in terms of customization and the ability to meet specific or unique needs. One of the most noticeable gaps is the availability of a ‘Tabs’ component that would allow users to sort content by larger categories or search hubs. Tabs are set up at the top of search interfaces and allow users to sort content by significant groups.
If you have previously looked for a solution to this, you probably came across this request for help setting up a Tabs component in Coveo Atomic. The response suggests using the atomic-segmented-facet component, which offers a very similar UX compared to tabs, or setting up a custom component by following a tutorial. It’s true the segmented tabs component will look similar to the tabs we are looking for; they do not possess the complete function we’re after. Plus, we chose Atomic for its simplicity and ease of use, so avoiding any custom code is ideal for this situation.
The Custom Tab Element
Just when it seems there’s no solution for us, enter the custom tab created by the Coveo developer community. The key difference between using custom tabs and the segmented facet is that tabs directly change the query expression, adding a constant query value to the query that is entered in the search bar. The segmented facet does not do this; instead, it can only filter content based on a field, which will need to be set up through web scraping or extensions.
How to Set Up Custom Tabs
The setup for custom tabs is extremely simple, which is why it’s the perfect solution for Atomic developers. Follow the steps outlined below to add tabs to your Coveo Atomic search.
We’ll review the custom tab element using an example. A newspaper, The Fishtank Daily, has recently established a website. They want to build a search experience to help readers find relevant stories and reports. Their work covers a wide range of topics, so they would like to add tabs to their search to break up their content into the following categories: All News, Sports News, Weather and Business. They have chosen Atomic because of its simplicity and quick setup, which is ideal for their small team of developers.
1. Add the custom tab script to the head of your file
Copy Coveo the custom tabs script and add it to your page's head below the script that was added to initialize Atomic, just like below. (accessToken, organizationID and organizationEndpoints are from this introduction Coveo Level-Up course. I highly recommend completing this course if you have not worked with Atomic before.)
<script>
(async () => {
await customElements.whenDefined("atomic-search-interface");
const searchInterface = document.querySelector("#search");
await searchInterface.initialize({
accessToken: "xx29e62e9b-f739-4886-b433-c9326cc1b492",
organizationId: "docsdemoslhkhaxyy",
organizationEndpoints: await searchInterface.getOrganizationEndpoints('docsdemoslhkhaxyy'),
});
searchInterface.executeFirstSearch();
})();
</script>
<!-- Coveo custom tabs script -->
<script type='module' src='https://unpkg.com/custom-tab'></script>
2. Add custom tab elements to your code
Just like that, we’re ready to add a custom tab to our page. Start by adding a div with a class of ‘tab-container’ inside of your atomic-search-interface. Then, add custom-tab elements as children to the container, and use the available props (table below) to control your search results.
| Name | Type | Description |
|---|---|---|
| expression | string | Query expression to be applied when the button is toggled |
| label | string | Renders a title for the custom tab |
| is-active | boolean | Defines whether the custom tab is active on render. There should only be one active tab on render; if there are multiple, the last rendered active tab will be active |
| excluded-facets | string | comma-separated list of facetid or facet fields that should be excluded from the tab. |
Once complete, your code should look something like this…
<div class="tab-container">
<custom-tab
label="All News"
expression=""
is-active="true"
excluded-facets="">
</custom-tab>
<custom-tab
label="Sports News"
expression="@uri = '/sports/'"
is-active="false"
excluded-facets="weather_facet, business_facet">
</custom-tab>
<custom-tab
label="Weather"
expression="@uri='/weather/'"
is-active="false"
excluded-facets="sports_facet, business_facet">
</custom-tab>
<custom-tab
label="Business News"
expression="@uri='/business/'"
is-active="false"
excluded-facets="sports_facet, weather_facet">
</custom-tab>
</div>
NOTE: You must include all props in each custom-tab. Simply set the value to an empty string if you do not want the function offered by the prop (ex. We have not excluded any facets from the ‘All News’ tab.)
The expressions setup above will be added to the query entered by the user. In this case, they will only show content that has the expression value in the URL path. Expressions can be changed to cover a wide range of use cases, another reason we’ve chosen custom tabs over segmented facets.
With that code now on the page, your custom tabs should display similar to this. The red box is intended to highlight our elements for you, the reader; it is not a border on the page.
Adding styles to custom-tabs
Now we’re at the fun part. Let’s begin to add styles to our custom tabs to match the branding and UI of the new Fishtank Daily website. We will use a combination of shadow parts provided by the custom-tab element (table below) and flexbox in our ‘tab-container’ div to center our tabs.
| Part | Description |
|---|---|
| "tab-anchor" | part for the tab button styling |
| "tab-label" | part for the label styling |
Add CSS code to your style sheet like so, customizing it to fit the style of your project.
.tab-container{
display: flex;
flex-direction: row;
justify-content: center;
padding-block: 15px;
}
custom-tab::part(tab-label) {
color: white;
font-size: 12px;
padding: 5px 7px;
}
custom-tab::part(tab-anchor) {
cursor: pointer;
border: none;
border-radius: 3px;
text-transform: uppercase;
background-color: #555;
}
custom-tab::part(active) {
font-weight: 700;
background-color: purple;
}
custom-tab::part(tab-anchor):hover {
background-color: purple;
}
And for the final result…
Viola! We’ve now added tabs to our search that will add to the query entered by the user and filter out any facets we do not want to show. Again, this provides our users with an intuitive option that will help them find content that is relevant to their search much faster than before. Imagine searching for info on New York sports teams before tabs were added. Your query would need to be very specific to the results you were looking for. Now, clicking on the ‘Sports News’ tab and searching for ‘New York’ will return much more relevant results, even though it’s a very general query.
In Conclusion
Custom tabs fill a large gap that was previously missing from Coveo Atomic while maintaining the simplicity and coding experience required to work with Atomic. When dealing with a large quantity or variety of content, this simple addition greatly improves user experience, allowing your guests to quickly find the information they are looking for.