---
title: "au-widget-option/au-widget-option | Customer's Canvas On-Premises"
canonical: "https://customerscanvas.com/docs/on-premises/ui-framework/widgets/reference/au-widget-option.au-widget-option/"
---

# au-widget-option/au-widget-option

> A widget that is used to select product options provided by an e-commerce system such as paper types, colors, sizes, etc.

## Classes

### AuWidgetOption

For details, you can refer to the [Option widget](https://customerscanvas.com/dev/ui-framework/widgets/option.html) topic.
```json
{
  "widgets": [
    {
      "title": "Book Size (Inches)",
      "name": "books",
      "type": "option",
      "params": {
        "type": "list",
        "title": "Book Size (Inches)",
        "initWithEmptyValue": true,
        "placeholderText": "Select a book size",
        "values": []
      }
    },
    {
      "title": "Type of Pages",
      "name": "pages",
      "type": "option",
      "params": {
        "type": "radio",
        "subType": "compact",
        "title": "Type of Pages",
        "initWithEmptyValue": true,
        "placeholderText": "Select a type",
        "values": []
      }
    }
  ]
}
```

#### Extends

- [`AuAbstractOption`](https://customerscanvas.com/docs/on-premises/ui-framework/widgets/reference/au-widget-option.AuAbsrtactOption.md#auabstractoption)

#### Implements

- [`IRestorableWidget`](https://customerscanvas.com/docs/on-premises/ui-framework/widgets/reference/widget.interface.IRestorableWidget.md#irestorablewidget)

#### Constructors

##### Constructor

```ts
new AuWidgetOption(): AuWidgetOption;
```

###### Returns

[`AuWidgetOption`](#auwidgetoption)

###### Inherited from

[`AuAbstractOption`](https://customerscanvas.com/docs/on-premises/ui-framework/widgets/reference/au-widget-option.AuAbsrtactOption.md#auabstractoption).[`constructor`](https://customerscanvas.com/docs/on-premises/ui-framework/widgets/reference/au-widget-option.AuAbsrtactOption.md#constructor)

#### Properties

##### \_definitionPromise

```ts
_definitionPromise: Promise<any>;
```

###### Inherited from

[`AuAbstractOption`](https://customerscanvas.com/docs/on-premises/ui-framework/widgets/reference/au-widget-option.AuAbsrtactOption.md#auabstractoption).[`_definitionPromise`](https://customerscanvas.com/docs/on-premises/ui-framework/widgets/reference/au-widget-option.AuAbsrtactOption.md#_definitionpromise)

##### \_firstTimeInit

```ts
_firstTimeInit: boolean = true;
```

###### Inherited from

[`AuAbstractOption`](https://customerscanvas.com/docs/on-premises/ui-framework/widgets/reference/au-widget-option.AuAbsrtactOption.md#auabstractoption).[`_firstTimeInit`](https://customerscanvas.com/docs/on-premises/ui-framework/widgets/reference/au-widget-option.AuAbsrtactOption.md#_firsttimeinit)

##### \_onChange

```ts
_onChange: Function;
```

###### Inherited from

[`AuAbstractOption`](https://customerscanvas.com/docs/on-premises/ui-framework/widgets/reference/au-widget-option.AuAbsrtactOption.md#auabstractoption).[`_onChange`](https://customerscanvas.com/docs/on-premises/ui-framework/widgets/reference/au-widget-option.AuAbsrtactOption.md#_onchange)

##### definition

```ts
definition: IOption;
```

An option definition obtained from the e-commerce driver.

##### element

```ts
element: AuOptionBase;
```

An option obtained from the e-commerce driver.

###### Inherited from

[`AuAbstractOption`](https://customerscanvas.com/docs/on-premises/ui-framework/widgets/reference/au-widget-option.AuAbsrtactOption.md#auabstractoption).[`element`](https://customerscanvas.com/docs/on-premises/ui-framework/widgets/reference/au-widget-option.AuAbsrtactOption.md#element)

##### order

```ts
order: IOrder;
```

An order obtained from the e-commerce driver.

###### Inherited from

[`AuAbstractOption`](https://customerscanvas.com/docs/on-premises/ui-framework/widgets/reference/au-widget-option.AuAbsrtactOption.md#auabstractoption).[`order`](https://customerscanvas.com/docs/on-premises/ui-framework/widgets/reference/au-widget-option.AuAbsrtactOption.md#order)

##### params

```ts
params: any;
```

Compiled widget configuration.

###### Inherited from

[`AuAbstractOption`](https://customerscanvas.com/docs/on-premises/ui-framework/widgets/reference/au-widget-option.AuAbsrtactOption.md#auabstractoption).[`params`](https://customerscanvas.com/docs/on-premises/ui-framework/widgets/reference/au-widget-option.AuAbsrtactOption.md#params)

##### placeholderText

```ts
placeholderText: string;
```

###### Inherited from

[`AuAbstractOption`](https://customerscanvas.com/docs/on-premises/ui-framework/widgets/reference/au-widget-option.AuAbsrtactOption.md#auabstractoption).[`placeholderText`](https://customerscanvas.com/docs/on-premises/ui-framework/widgets/reference/au-widget-option.AuAbsrtactOption.md#placeholdertext)

#### Accessors

##### \_

###### Get Signature

```ts
get _(): any;
```

Returns the selected value.

###### Returns

`any`

###### Inherited from

[`AuAbstractOption`](https://customerscanvas.com/docs/on-premises/ui-framework/widgets/reference/au-widget-option.AuAbsrtactOption.md#auabstractoption).[`_`](https://customerscanvas.com/docs/on-premises/ui-framework/widgets/reference/au-widget-option.AuAbsrtactOption.md#_)

##### selected

###### Get Signature

```ts
get selected(): any;
```

Returns the selected value.

###### Returns

`any`

###### Inherited from

[`AuAbstractOption`](https://customerscanvas.com/docs/on-premises/ui-framework/widgets/reference/au-widget-option.AuAbsrtactOption.md#auabstractoption).[`selected`](https://customerscanvas.com/docs/on-premises/ui-framework/widgets/reference/au-widget-option.AuAbsrtactOption.md#selected)

#### Methods

##### \_manageEmptyValuesText()

```ts
_manageEmptyValuesText(applyEmptyValues): void;
```

###### Parameters

| Parameter | Type |
| ------ | ------ |
| `applyEmptyValues` | `boolean` |

###### Returns

`void`

###### Inherited from

[`AuAbstractOption`](https://customerscanvas.com/docs/on-premises/ui-framework/widgets/reference/au-widget-option.AuAbsrtactOption.md#auabstractoption).[`_manageEmptyValuesText`](https://customerscanvas.com/docs/on-premises/ui-framework/widgets/reference/au-widget-option.AuAbsrtactOption.md#_manageemptyvaluestext)

##### checkInitDependenciesWidgets()

```ts
checkInitDependenciesWidgets(): string[];
```

Returns an array of widget names, due to which the current widget cannot receive parameters.

###### Returns

`string`[]

###### Inherited from

[`AuAbstractOption`](https://customerscanvas.com/docs/on-premises/ui-framework/widgets/reference/au-widget-option.AuAbsrtactOption.md#auabstractoption).[`checkInitDependenciesWidgets`](https://customerscanvas.com/docs/on-premises/ui-framework/widgets/reference/au-widget-option.AuAbsrtactOption.md#checkinitdependencieswidgets)

##### clearSelection()

```ts
clearSelection(): void;
```

Sets the value of the option to `null`.

###### Returns

`void`

###### Inherited from

[`AuAbstractOption`](https://customerscanvas.com/docs/on-premises/ui-framework/widgets/reference/au-widget-option.AuAbsrtactOption.md#auabstractoption).[`clearSelection`](https://customerscanvas.com/docs/on-premises/ui-framework/widgets/reference/au-widget-option.AuAbsrtactOption.md#clearselection)

##### exportWidgetData()

```ts
exportWidgetData(force): Promise<OptionsData>;
```

###### Parameters

| Parameter | Type |
| ------ | ------ |
| `force` | `boolean` |

###### Returns

`Promise`\<`OptionsData`\>

###### Implementation of

[`IRestorableWidget`](https://customerscanvas.com/docs/on-premises/ui-framework/widgets/reference/widget.interface.IRestorableWidget.md#irestorablewidget).[`exportWidgetData`](https://customerscanvas.com/docs/on-premises/ui-framework/widgets/reference/widget.interface.IRestorableWidget.md#exportwidgetdata)

##### resetPreloaderState()

```ts
resetPreloaderState(): void;
```

###### Returns

`void`

###### Inherited from

[`AuAbstractOption`](https://customerscanvas.com/docs/on-premises/ui-framework/widgets/reference/au-widget-option.AuAbsrtactOption.md#auabstractoption).[`resetPreloaderState`](https://customerscanvas.com/docs/on-premises/ui-framework/widgets/reference/au-widget-option.AuAbsrtactOption.md#resetpreloaderstate)

##### restoreWidgetFromData()

```ts
restoreWidgetFromData(widgetData, force): Promise<void>;
```

###### Parameters

| Parameter | Type |
| ------ | ------ |
| `widgetData` | `OptionsData` |
| `force` | `boolean` |

###### Returns

`Promise`\<`void`\>

###### Implementation of

[`IRestorableWidget`](https://customerscanvas.com/docs/on-premises/ui-framework/widgets/reference/widget.interface.IRestorableWidget.md#irestorablewidget).[`restoreWidgetFromData`](https://customerscanvas.com/docs/on-premises/ui-framework/widgets/reference/widget.interface.IRestorableWidget.md#restorewidgetfromdata)

##### showPreloader()

```ts
showPreloader(
   isPreload, 
   message?, 
   timeout?): void;
```

Shows a preloader.

```
"onClick": [
  "{{#function main.showPreloader(true, 'Creating print files...')}}",
  "{{#function $['editor'].getHiResImages(800,800)}}",
  "{{#function main.showPreloader(false)}}"
]
```

###### Parameters

| Parameter | Type | Default value | Description |
| ------ | ------ | ------ | ------ |
| `isPreload` | `boolean` | `undefined` | If `true`, enables the preloader. |
| `message` | `string` \| `string`[] | `...` | A text message that appears next to the preloader. |
| `timeout` | `number` | `5` | - |

###### Returns

`void`

###### Inherited from

[`AuAbstractOption`](https://customerscanvas.com/docs/on-premises/ui-framework/widgets/reference/au-widget-option.AuAbsrtactOption.md#auabstractoption).[`showPreloader`](https://customerscanvas.com/docs/on-premises/ui-framework/widgets/reference/au-widget-option.AuAbsrtactOption.md#showpreloader)

##### showToast()

```ts
showToast(data?, duration?): void;
```

Shows a toast.

```
return editor.loadUserInfo(data)
    .catch(err => {
        this.widget.showToast("Error: Invalid data");
        console.log(err);
    });
```

###### Parameters

| Parameter | Type | Description |
| ------ | ------ | ------ |
| `data?` | `string` | A string message to display in the toast. |
| `duration?` | `number` | Defines how long to show the toast for. |

###### Returns

`void`

###### Inherited from

[`AuAbstractOption`](https://customerscanvas.com/docs/on-premises/ui-framework/widgets/reference/au-widget-option.AuAbsrtactOption.md#auabstractoption).[`showToast`](https://customerscanvas.com/docs/on-premises/ui-framework/widgets/reference/au-widget-option.AuAbsrtactOption.md#showtoast)

## Interfaces

### IWidgetOptionParam

Provides advanced settings for options.

#### Extends

- `unknown`

#### Properties

##### applyEmptyValues

```ts
applyEmptyValues: boolean;
```

##### hidden

```ts
hidden: boolean;
```

If `true`, hides this option.

##### onChange?

```ts
optional onChange?: Function | Function[];
```

A single function or an array of functions that will be executed when the option value is changed.

##### orderIndex

```ts
orderIndex: number;
```

The order index.

##### values

```ts
values: PointedArray<IWidgetOptionValue>;
```

the option values as defined in the ecommerce-driver.

## References

### IWidgetOptionValue

Re-exports [IWidgetOptionValue](https://customerscanvas.com/docs/on-premises/ui-framework/widgets/reference/au-widget-option.AuAbsrtactOption.md#iwidgetoptionvalue)

***

### widget

Renames and re-exports [AuWidgetOption](#auwidgetoption)