Switching Between List and Grid View in Coveo Atomic Search
This article describes how to create a custom component to switch between list and grid view for your Coveo Atomic search results. Coveo doesn't offer a built-in toggle component to switch between list and grid layouts. However, you can achieve this functionality using JavaScript (JS) and Cascading Style Sheets (CSS). Here's a step-by-step guide:Define Result Templates: Create two separate result list templates, one for grid view and another for list view. Assign Class Names: Assign appropriate class names to your <atomic-result-list> components. For example, use "list-view" for the list view template and "grid-view" for the grid view template. Create a Custom Button Component: Develop a custom component that displays buttons for switching between list and grid views. Implement Button Functionality: Use the onclick attribute for each button to trigger a JavaScript function when clicked. Inside the function, target the relevant <atomic-result-list> element using document.querySelector with the class name you assigned earlier (e.g., list_view = document.querySelector(".list-view")). Show/Hide Views with CSS:When the "List" button is clicked, set the display style of the list_view element to "block" (visible) and grid_view element to "none" (hidden) using: JavaScript list_view.style.display = "block"; grid_view.style.display = "none"; Implement similar logic for the grid button, showing the grid view and hiding the list view. Set Default View:Include logic to display the desired default view (list or grid) on initial page load. Benefits: Users can switch between list and grid layouts based on their preference. Improved user experience by providing more control over the search results display.Filter results on a specific date range with dates converted to Unix timestamps.
Unfortunately the Vertex Search filtering functionality is pretty limited at the moment. Here is the documentation for how to implement filtering using the API. You'll notice there is no built-in support for date filtering currently, but there is support for filtering on numerical fields. Workaround: One workaround I can think of right now is to ingest documents with their dates converted to Unix timestamps (integers). In the front-end of the application you could provide a normal date picker to provide a date range, and then in the backend convert this to unix time and perform numerical filtering. Example: "Jan 12 2023 to Jan 12 2024" would be equivalent to a unix time filter of between 1673481600 and 1705017600. In Vertex Search this would be applied as a filter in the syntax: date_field_name: IN (1673481600, 1705017600)
