THIS IS ARCHIVED DOCUMENTATION

Coveo for Sitecore Legacy Search UI Framework - Overview of CoveoTab.ascx

This is for:

Developer System Administrator

Coveo for Sitecore 4.1 (November 2018)

CoveoTab.ascx is a sublayout file that represents a facet component. Its default location is c:\inetpub\wwwroot\SitecoreInstanceName\Website\layouts\Coveo\CoveoTab.ascx.

Digging into Its Code

  • There’s a single a element with a class attribute equal to CoveoTab, which is automatically rendered as a Tab component.
  • The data-iconattribute specifies that the span element that shows the icon should always be output. 
    • The Model.GetIconCss() method outputs CSS, which binds the span element to the selected icon.
    • This icon is optional and needs to be defined using the Tab properties in Sitecore.
  • A set of options are passed as initialization options to the component using the CoveoForSitecore.componentsOptions Javascript object.
    • These options customize the behavior as well as the look and feel of the component.
    • Model refers to a property of the user control, which wraps the different properties associated with the tab.
  • The Tab can be configured to hide elements based on the current selected tab. The binding is done in Javascript using the CoveoForSitecore.tabsBinding object, which contains code to handle these exclusions.

CoveoTab.ascx

<%@ Control Language="c#" AutoEventWireup="true" Inherits="Coveo.UI.CoveoTab" TargetSchema="http://schemas.microsoft.com/intellisense/ie5" %>
<%@ Register TagPrefix="coveoui" Namespace="Coveo.UI.Controls" Assembly="Coveo.UIBase" %>

<%-- When customizing this component, ensure to use "Coveo.$" instead of the regular jQuery "$" to
     avoid any conflicts with Sitecore's Page Editor/Experience Editor.  --%>


<coveoui:ErrorSummary runat="server" />
<coveoui:WhenConfigured runat="server">
    <% if (Model.IconProperties != null) { %>
        <style>
            <%= Model.GetIconCss() %>
        </style>
    <% } %>
    <a id="<%= Model.TabId %>" 
       class="CoveoTab" 
       data-caption="<%= Model.TabCaption %>" 
       data-icon="no-icon"></a>
    <script type="text/javascript">
        Coveo.$(function() {
            var tabId = "<%= Model.TabId %>";
            CoveoForSitecore.componentsOptions[tabId] = <%= Model.InitializationOptions %>;
            var excludedItemIds = [<%= String.Join(",", Model.ExcludedItemIds.Select(itemId => '"' + itemId + '"')) %>];
            CoveoForSitecore.tabsBinding.excludeItemsIdsInTab(excludedItemIds, tabId);
        });
    </script>
</coveoui:WhenConfigured>