# 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

- buildBooleanOption
- buildColorOption
- buildFieldConditionOption
- buildFieldOption
- buildFieldsOption
- buildHelperOption
- buildIconOption
- buildJsonObjectOption
- buildJsonOption
- buildListOption
- buildLocalizedStringOption
- buildNumberOption
- buildQueryExpressionOption
- buildSelectorOption
- buildStringOption
- initComponentOptions

## Methods

### Static buildBooleanOption

- buildBooleanOption(optionArgs?: IComponentOptions<boolean>): boolean

- - Defined in ui/Base/ComponentOptions.ts :68

  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

- buildColorOption(optionArgs?: IComponentOptions<string>): string

- - Defined in ui/Base/ComponentOptions.ts :146

  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 buildFieldConditionOption

- buildFieldConditionOption(): IFieldConditionOption[]

- - Defined in ui/Base/ComponentOptions.ts :401

  Builds a field condition option.

  A field condition option defines a field-based condition that must be dynamically evaluated against, and satisfied by a query result item in order to initialize a result template component.

  Markup Example:

      data-condition-field-author="Alice Smith, Bob Jones"
      data-condition-field-not-filetype="pdf"`

  #### Returns IFieldConditionOption[]

  The resulting option value.

### Static buildFieldOption

- buildFieldOption(optionArgs?: IComponentOptionsFieldOptionArgs): IFieldOption

- - Defined in ui/Base/ComponentOptions.ts :253

  Builds a field option.

  A field option validates whether the field has a valid name. This means that the string must start with the `@` character.

  Markup Example:

  > `data-foo="@bar"`

  #### Parameters

  - ##### Optional optionArgs: IComponentOptionsFieldOptionArgs

    The arguments to apply when building the option.

  #### Returns IFieldOption

  The resulting option value.

### Static buildFieldsOption

- buildFieldsOption(optionArgs?: IComponentOptionsFieldsOptionArgs): IFieldOption[]

- - Defined in ui/Base/ComponentOptions.ts :269

  Builds an array of fields option.

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

  Markup Example:

  > `data-foo="@bar,@baz"`

  #### Parameters

  - ##### Optional optionArgs: IComponentOptionsFieldsOptionArgs

    The arguments to apply when building the option.

  #### Returns IFieldOption[]

  The resulting option value.

### Static buildHelperOption

- buildHelperOption(optionArgs?: IComponentOptions<string>): string

- - Defined in ui/Base/ComponentOptions.ts :169

  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

- buildIconOption(optionArgs?: IComponentOptions<string>): string

- - Defined in ui/Base/ComponentOptions.ts :123

  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

- - Defined in ui/Base/ComponentOptions.ts :209
  deprecated

    Use buildJsonOption instead

  deprecatedsince

    2017 Javascript Search Framework Releases

  #### Type parameters

  - #### T

  #### Parameters

  - ##### Optional optionArgs: IComponentJsonObjectOption<T>

  #### Returns T

### Static buildJsonOption

- buildJsonOption<T>(optionArgs?: IComponentJsonObjectOption<T>): T

- - Defined in ui/Base/ComponentOptions.ts :200

  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

  - #### T: IStringMap<any>

  #### Parameters

  - ##### Optional optionArgs: IComponentJsonObjectOption<T>

    The arguments to apply when building the option.

  #### Returns T

  The resulting option value.

### Static buildListOption

- buildListOption<T>(optionArgs?: IComponentOptionsListOptionArgs): T[] | string[]

- - Defined in ui/Base/ComponentOptions.ts :301

  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

  - ##### Optional optionArgs: IComponentOptionsListOptionArgs

    The arguments to apply when building the option.

  #### Returns T[] | string[]

  The resulting option value.

### Static buildLocalizedStringOption

- buildLocalizedStringOption(optionArgs?: IComponentLocalizedStringOptionArgs): string

- - Defined in ui/Base/ComponentOptions.ts :232

  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: IComponentLocalizedStringOptionArgs

    The arguments to apply when building the option.

  #### Returns string

  The resulting option value.

### Static buildNumberOption

- buildNumberOption(optionArgs?: IComponentOptionsNumberOptionArgs): number

- - Defined in ui/Base/ComponentOptions.ts :90

  Builds a number option.

  A number option can be an integer or a float in the markup.

  Note:

  > To build a float option, you need to set the `float` property in the `IComponentOptionsNumberOptionArgs` to `true`.

  Markup Examples:

  > `data-foo="3"`

  > `data-foo="1.5"`

  #### Parameters

  - ##### Optional optionArgs: IComponentOptionsNumberOptionArgs

    The arguments to apply when building the option.

  #### Returns number

  The resulting option value.

### Static buildQueryExpressionOption

- buildQueryExpressionOption(optionArgs?: IComponentOptions<string>): IQueryExpression

- - Defined in ui/Base/ComponentOptions.ts :285

  Builds a query expression option.

  The query expression option should follow the Coveo Cloud Query Syntax Reference.

  Markup Example:

  > `data-foo="@bar==baz"`

  #### Parameters

  - ##### Optional optionArgs: IComponentOptions<string>

    The arguments to apply when building the option.

  #### Returns IQueryExpression

  The resulting option value.

### Static buildSelectorOption

- buildSelectorOption(optionArgs?: IComponentOptions<HTMLElement>): HTMLElement

- - Defined in ui/Base/ComponentOptions.ts :320

  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

- buildStringOption<T>(optionArgs?: IComponentOptions<T>): T

- - Defined in ui/Base/ComponentOptions.ts :106

  Builds a string option.

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

  Markup Example:

  > `data-foo="bar"`

  #### Type parameters

  - #### T: string

  #### Parameters

  - ##### Optional optionArgs: IComponentOptions<T>

    The arguments to apply when building the option.

  #### Returns T

  The resulting option value.

### Static initComponentOptions

- initComponentOptions(element: HTMLElement, component: any, values?: any): any

- - Defined in ui/Base/ComponentOptions.ts :440

  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