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

# au-widget-gallery/au-widget-gallery

> A widget that is used to display a list of images and allows you to select an image.

## Classes

### AuWidgetGallery

For details, you can refer to the [Gallery widget](https://customerscanvas.com/dev/ui-framework/widgets/gallery.html) topic.
```json
{
  "widgets": [
   {
     "type": "gallery",
     "name": "backgrounds",
     "title": "Background",
     "params": {
       "prompt": "Choose a background image",
       "showTitle": true,
       "items": `[{
         "title": "Football",
         "name": "something",
         "previewUrl": "/assets/img/something.jpg"
       }]`
     }
   }
  ]
}
```

#### Extends

- [`AuBaseSelectorWidget`](https://customerscanvas.com/docs/on-premises/ui-framework/widgets/reference/widget.AuBaseWidget.md#abstract-aubaseselectorwidget)

#### Implements

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

#### Constructors

##### Constructor

```ts
new AuWidgetGallery(): AuWidgetGallery;
```

###### Returns

[`AuWidgetGallery`](#auwidgetgallery)

###### Inherited from

[`AuBaseSelectorWidget`](https://customerscanvas.com/docs/on-premises/ui-framework/widgets/reference/widget.AuBaseWidget.md#abstract-aubaseselectorwidget).[`constructor`](https://customerscanvas.com/docs/on-premises/ui-framework/widgets/reference/widget.AuBaseWidget.md#constructor)

#### Properties

##### applyEmptyValues

```ts
applyEmptyValues: boolean;
```

##### emptyValuesText

```ts
emptyValuesText: string;
```

##### params

```ts
params: IGalleryConfig;
```

Properties of this widget.

###### Overrides

[`AuBaseSelectorWidget`](https://customerscanvas.com/docs/on-premises/ui-framework/widgets/reference/widget.AuBaseWidget.md#abstract-aubaseselectorwidget).[`params`](https://customerscanvas.com/docs/on-premises/ui-framework/widgets/reference/widget.AuBaseWidget.md#params)

##### value

```ts
value: IGalleryItem;
```

A gallery item.

#### Accessors

##### \_

###### Get Signature

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

Returns the selected gallery item.

###### Returns

[`IGalleryItem`](https://customerscanvas.com/docs/on-premises/ui-framework/widgets/reference/au-widget-gallery.IGalleryConfig.md#igalleryitem)

###### Overrides

[`AuBaseSelectorWidget`](https://customerscanvas.com/docs/on-premises/ui-framework/widgets/reference/widget.AuBaseWidget.md#abstract-aubaseselectorwidget).[`_`](https://customerscanvas.com/docs/on-premises/ui-framework/widgets/reference/widget.AuBaseWidget.md#_)

#### Methods

##### checkInitDependenciesWidgets()

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

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

###### Returns

`string`[]

###### Inherited from

[`AuBaseSelectorWidget`](https://customerscanvas.com/docs/on-premises/ui-framework/widgets/reference/widget.AuBaseWidget.md#abstract-aubaseselectorwidget).[`checkInitDependenciesWidgets`](https://customerscanvas.com/docs/on-premises/ui-framework/widgets/reference/widget.AuBaseWidget.md#checkinitdependencieswidgets)

##### clearSelection()

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

Resets the selected value.

###### Returns

`void`

###### Overrides

[`AuBaseSelectorWidget`](https://customerscanvas.com/docs/on-premises/ui-framework/widgets/reference/widget.AuBaseWidget.md#abstract-aubaseselectorwidget).[`clearSelection`](https://customerscanvas.com/docs/on-premises/ui-framework/widgets/reference/widget.AuBaseWidget.md#clearselection)

##### exportWidgetData()

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

###### Parameters

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

###### Returns

`Promise`\<`GalleryWidgetData`\>

###### 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

[`AuBaseSelectorWidget`](https://customerscanvas.com/docs/on-premises/ui-framework/widgets/reference/widget.AuBaseWidget.md#abstract-aubaseselectorwidget).[`resetPreloaderState`](https://customerscanvas.com/docs/on-premises/ui-framework/widgets/reference/widget.AuBaseWidget.md#resetpreloaderstate)

##### restoreWidgetFromData()

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

###### Parameters

| Parameter | Type |
| ------ | ------ |
| `widgetData` | `GalleryWidgetData` |
| `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)

##### setSelectedItem()

```ts
setSelectedItem(itemIndexOrName): void;
```

Select gallery item by its index or name

###### Parameters

| Parameter | Type | Description |
| ------ | ------ | ------ |
| `itemIndexOrName` | `string` \| `number` | index or name of item that should be selected |

###### Returns

`void`

##### 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

[`AuBaseSelectorWidget`](https://customerscanvas.com/docs/on-premises/ui-framework/widgets/reference/widget.AuBaseWidget.md#abstract-aubaseselectorwidget).[`showPreloader`](https://customerscanvas.com/docs/on-premises/ui-framework/widgets/reference/widget.AuBaseWidget.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

[`AuBaseSelectorWidget`](https://customerscanvas.com/docs/on-premises/ui-framework/widgets/reference/widget.AuBaseWidget.md#abstract-aubaseselectorwidget).[`showToast`](https://customerscanvas.com/docs/on-premises/ui-framework/widgets/reference/widget.AuBaseWidget.md#showtoast)

## References

### widget

Renames and re-exports [AuWidgetGallery](#auwidgetgallery)