Support Menu

Class ComponentOptions

Class ComponentOptions

The ComponentOptions static class contains methods allowing the Coveo JavaScript Search Framework to initialize component options.

Typically, each Component that exposes a set of options contains a static options property.

This property "builds" each option using the ComponentOptions method corresponding to its type (e.g., buildBooleanOption, buildFieldOption, buildStringOption, etc.)

Index

Methods

Static buildBooleanOption

  • Builds a boolean option.

    Markup Examples:

    data-foo="true"

    data-foo="false"

    Parameters

    • Optional optionArgs: IComponentOptions<boolean>

      The arguments to apply when building the option.

    Returns boolean

    The resulting option value.

Static buildColorOption

  • Builds a color option.

    Normally, this simply builds a string that matches a CSS color.

    Note:

    In the markup, this offers no advantage over using a plain string. This is mostly useful for the Coveo JavaScript Interface Editor.

    Markup Examples:

    data-foo="coveo-sprites-user"

    data-foo="coveo-sprites-database"

    Parameters

    • Optional optionArgs: IComponentOptions<string>

      The arguments to apply when building the option.

    Returns string

    The resulting option value.

Static buildFieldOption

Static buildFieldsOption

Static buildHelperOption

  • Builds a helper option.

    Normally, this simply builds a string that matches the name of a template helper.

    Note:

    In the markup, this offers no advantage over using a plain string. This is mostly useful for the Coveo JavaScript Interface Editor.

    Markup Examples:

    data-foo="date"

    data-foo="dateTime"

    Parameters

    • Optional optionArgs: IComponentOptions<string>

      The arguments to apply when building the option.

    Returns string

    The resulting option value.

Static buildIconOption

  • Builds an icon option.

    This takes an SVG icon name, validates it and returns the name of the icon. Markup Examples:

    data-foo="search"

    data-foo="facet-expand"

    Parameters

    • Optional optionArgs: IComponentOptions<string>

      The arguments to apply when building the option.

    Returns string

    The resulting option value.

Static buildJsonObjectOption

  • buildJsonObjectOption<T>(optionArgs?: IComponentJsonObjectOption<T>): T

Static buildJsonOption

  • buildJsonOption<T>(optionArgs?: IComponentJsonObjectOption<T>): T
  • Tries to parse a stringified JSON option.

    If unsuccessful (because of invalid syntax), the JSON option is ignored altogether, and the console displays a warning message.

    Markup Example:

    data-foo='{"bar" : "baz"}'

    Note:

    A JSON option can always be set as a property in the init call of the framework rather than as a data- property in the corresponding HTMLElement markup.

    Initialization Example:

    Coveo.init(root, {
      Facet : {
        foo : {
          "bar" : "baz"
        }
      }
    })
    

    Type parameters

    Parameters

    • Optional optionArgs: IComponentJsonObjectOption<T>

      The arguments to apply when building the option.

    Returns T

    The resulting option value.

Static buildListOption

  • Builds an array of strings option.

    As with all options that expect an array, you should use commas to delimit the different values.

    Markup Example:

    data-foo="bar,baz"

    Type parameters

    • T

    Parameters

    Returns T[] | string[]

    The resulting option value.

Static buildLocalizedStringOption

  • Builds a localized string option.

    A localized string option can be any arbitrary string.

    When parsing the value, the Coveo JavaScript Search Framework tries to load the localization for that string, if it is available.

    If it is not available, it returns the non-localized value.

    This should be used for options that will be rendered directly to the end users.

    Markup Example:

    data-foo="bar"

    Parameters

    • Optional optionArgs: IComponentOptions<string>

      The arguments to apply when building the option.

    Returns string

    The resulting option value.

Static buildNumberOption

Static buildSelectorOption

  • Builds an option that allow to select an HTMLElement.

    The option accepts a CSS selector matching the required HTMLElement. This selector can either be a class, or an ID selector.

    Markup Examples:

    data-foo-selector=".bar"

    data-foo-selector="#bar"

    Parameters

    • Optional optionArgs: IComponentOptions<HTMLElement>

      The arguments to apply when building the option.

    Returns HTMLElement

    The resulting option value.

Static buildStringOption

  • Builds a string option.

    A string option can be any arbitrary string in the markup.

    Markup Example:

    data-foo="bar"

    Parameters

    • Optional optionArgs: IComponentOptions<string>

      The arguments to apply when building the option.

    Returns string

    The resulting option value.

Static buildTemplateOption

  • Builds a template option.

    The option accepts a CSS selector matching a valid template. This selector can either be a class, or an ID selector.

    When building a template option using an ID selector, the matching template must be registered in the TemplateCache, however.

    Markup Examples:

    data-foo-id="#bar"

    data-foo-selector=".bar"

    Parameters

    Returns Template

    The resulting option value.

Static initComponentOptions

  • initComponentOptions(element: HTMLElement, component: any, values?: any): any
  • Loads and parses the options of the current element.

    Each component calls this method in its constructor.

    Parameters

    • element: HTMLElement

      The element whose markup options the method should load and parse.

    • component: any

      The class of the component whose options the method should load and parse (e.g., Searchbox, Facet, etc.)

    • Optional values: any

      The additional options which the method should merge with the specified markup option values.

    Returns any

Hierarchy

  • ComponentOptions