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

# au-widget-pim-design-selector/IDesignSelectorConfig

> Provides gallery properties.

## Interfaces

### IDesignSelectorConfig

You can use these properties in **params** of the `AuWidgetGallery` class.
```json
{
   "type": "pim-design-selector",
   "name": "pim-design-selector",
   "params": {
      "designs": "{{ $['pim-ajax'].output.designs }}",
      "onChange": "{{ #function console.warn($['pim-design-selector']._); }}",
      "itemWidth": "200px"
    }
  }
```

#### Properties

##### designs

```ts
designs: ProductInformationDesign[];
```

An array of designs to display in the gallery.

##### itemsPerPage?

```ts
optional itemsPerPage?: number;
```

Number of elements per page. Default value is 24.

##### onChange?

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

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

##### onItemClick?

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

A single function or an array of functions that will be executed when an item is clicked.

##### onItemDoubleClick?

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

A single function or an array of functions that will be executed when an item is double clicked.

##### showItemsTitle?

```ts
optional showItemsTitle?: boolean;
```

If `true`, displays the title.

***

### ItemFunctions

#### Properties

##### itemClickFunction

```ts
itemClickFunction: Function;
```

##### itemDoubleClickFunction

```ts
itemDoubleClickFunction: Function;
```