@aurigma/ui-framework/docs/reference/classes/auwidgetgroup.md

A platform which allows building print product personalization editors based on Aurigma's Customer's Canvas.

# Class: AuWidgetGroup

A widget that is used to group multiple widgets together.

For details, you can refer to the [Group widget](https://customerscanvas.com/dev/editors/ui-framework/widgets/group.html) topic.

```
{
  "widgets": [
    {
      "name": "option-list",
      "type": "group",
      "params": {
        "type": "noncollapsible",
        "tabs": [
          {
            "widgets": [
              {
                "title": "Corner Type",
                "name": "corners",
                "type": "option",
                "params": { ... }
              },
              {
                "title": "Lamination",
                "name": "lamination",
                "type": "option",
                "params": { ... }
              }
            ]
          }
        ]
      }
    }
  ]
}
```

## Hierarchy

  ↳ [AuBaseSelectorWidget](aubaseselectorwidget.md)

  ↳ **AuWidgetGroup**

## Implements

* [IWidget](../interfaces/iwidget.md)

## Index

### Properties

* [params](auwidgetgroup.md#params)
* [scrollable](auwidgetgroup.md#scrollable)
* [selectedIndex](auwidgetgroup.md#selectedindex)
* [selectedTitle](auwidgetgroup.md#selectedtitle)
* [showCustomScroll](auwidgetgroup.md#showcustomscroll)

### Accessors

* [_](auwidgetgroup.md#_)

### Methods

* [_getStylesByType](auwidgetgroup.md#_getstylesbytype)
* [checkInitDependenciesWidgets](auwidgetgroup.md#checkinitdependencieswidgets)
* [clearSelection](auwidgetgroup.md#clearselection)
* [resetPreloaderState](auwidgetgroup.md#resetpreloaderstate)
* [showPreloader](auwidgetgroup.md#showpreloader)
* [showToast](auwidgetgroup.md#showtoast)
* [updateVisibleParams](auwidgetgroup.md#updatevisibleparams)

## Properties

###  params

• **params**: *[AuWidgetGroupParam](../interfaces/auwidgetgroupparam.md)*

*Implementation of [IWidget](../interfaces/iwidget.md).[params](../interfaces/iwidget.md#optional-params)*

*Overrides [AuBaseWidget](aubasewidget.md).[params](aubasewidget.md#params)*

Properties of the widget.

___

###  scrollable

• **scrollable**: *boolean*

___

###  selectedIndex

• **selectedIndex**: *number* = 0

The index of the selected item.

___

###  selectedTitle

• **selectedTitle**: *string* = ""

The title of the selected item.

___

###  showCustomScroll

• **showCustomScroll**: *boolean* = true

## Accessors

###  _

• **get _**(): *any*

*Overrides [AuBaseSelectorWidget](aubaseselectorwidget.md).[_](aubaseselectorwidget.md#_)*

Returns the selected item.

**Returns:** *any*

## Methods

###  _getStylesByType

▸ **_getStylesByType**(`type`: string): *"--au-widget-height: 100%;" | ""*

**Parameters:**

Name | Type |
------ | ------ |
`type` | string |

**Returns:** *"--au-widget-height: 100%;" | ""*

___

###  checkInitDependenciesWidgets

▸ **checkInitDependenciesWidgets**(): *string[]*

*Inherited from [AuBaseWidget](aubasewidget.md).[checkInitDependenciesWidgets](aubasewidget.md#checkinitdependencieswidgets)*

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

**Returns:** *string[]*

___

###  clearSelection

▸ **clearSelection**(): *void*

*Overrides [AuBaseSelectorWidget](aubaseselectorwidget.md).[clearSelection](aubaseselectorwidget.md#abstract-clearselection)*

Sets the selected index to `-1`.

**Returns:** *void*

___

###  resetPreloaderState

▸ **resetPreloaderState**(): *void*

*Inherited from [AuBaseWidget](aubasewidget.md).[resetPreloaderState](aubasewidget.md#resetpreloaderstate)*

**Returns:** *void*

___

###  showPreloader

▸ **showPreloader**(`isPreload`: boolean, `message`: string | string[], `timeout`: number): *void*

*Inherited from [AuBaseWidget](aubasewidget.md).[showPreloader](aubasewidget.md#showpreloader)*

Shows a preloader.

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

**Parameters:**

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

**Returns:** *void*

___

###  showToast

▸ **showToast**(`data?`: string, `duration?`: number): *void*

*Inherited from [AuBaseWidget](aubasewidget.md).[showToast](aubasewidget.md#showtoast)*

Shows a toast.

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

**Parameters:**

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

**Returns:** *void*

___

###  updateVisibleParams

▸ **updateVisibleParams**(): *void*

**Returns:** *void*