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

Coveo for Sitecore 4.1 (November 2018)

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

Digging into Its Code

  • There’s a single div element with a class attribute equal to CoveoFacet, which is automatically rendered as a Facet component.
  • A set of options are passed as custom attributes to the component, such as data-title='<%= Model.Title %>':
    • 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 facet.
<%@ Control Language="c#" AutoEventWireup="true" Inherits="Coveo.UI.CoveoFacet" TargetSchema="" %>
<%@ 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) { %>
            <%= Model.GetIconCss() %>
    <% } %>
    <div id='<%= Model.Id %>'
         data-title='<%= Model.Title %>'
         data-field='<%= Model.Field %>'
         data-number-of-values='<%= Model.NumberOfValues %>'
         data-id='<%= Model.Id %>'
         data-enable-collapse='<%= Model.EnableCollapse %>'
         data-enable-more-less='<%= Model.EnableMoreLess %>'
         data-enable-settings='<%= Model.EnableSettings %>'
         data-lookup-field='<%= Model.LookupField %>'
         data-sort-criteria='<%= Model.Sort %>'
         data-is-multi-value-field='<%= Model.IsMultiValueField %>'
         data-show-icon='<%= Model.ShowIcon %>'
         data-computed-field='<%= Model.ComputedField %>'
         data-computed-field-operation='<%= Model.ComputedFieldOperation %>'
         data-computed-field-format='<%= Model.ComputedFieldFormat %>'
         data-computed-field-caption='<%= Model.ComputedFieldCaption %>'
         data-include-in-breadcrumb='<%= Model.IncludeInBreadcrumb %>'
         data-number-of-values-in-breadcrumb='<%= Model.NumberOfValuesInBreadcrumb %>'
         data-include-in-omnibox='<%= Model.IncludeInOmnibox %>'
         data-enable-facet-search='<%= Model.EnableFacetSearch %>'
         data-number-of-values-in-facet-search='<%= Model.NumberOfValuesInFacetSearch %>'
         data-enable-toggling-operator='<%= Model.EnableTogglingOperator %>'
         data-use-and='<%= Model.UseAnd %>'
         data-page-size='<%= Model.MorePageSize %>'
         data-injection-depth='<%= Model.InjectionDepth %>'
         data-available-sorts='<%= String.Join(",", Model.AvailableSorts) %>'></div>

What’s Next?

Proceed to reading Overview of Coveo Sort Components’ Code.