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

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

# Class: AuWidgetAjax

A non-visual widget that is used to send requests to the server and receive responses, which can be used in other widgets.

For details, see the [Ajax widget](https://customerscanvas.com/dev/editors/ui-framework/widgets/ajax.html) topic.

The following example illustrates how you can populate a gallery with images obtained through an HTTP request.
```
{
  "widgets": [
   {
     "name": "bg-request",
     "type": "ajax",
     "params": {
       "lock": "gallery",
       "url": "{{vars.apiUrl + '/api/images?subfolder=backgrounds'}}",
       "method": "GET",
       "responseType": "json"
     }
   },
   {
     "name": "gallery",
     "title": "Gallery",
     "type": "gallery",
     "params": {
       "prompt": "Set a background",
       "showTitle": false,
       "forceSelection": true,
       "items": "{{ $['bg-request'].response.items }}"
     }
   }
 ]
}
```

## Hierarchy

* AuBaseInvisibleWidget

  ↳ **AuWidgetAjax**

## Implements

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

## Index

### Properties

* [enabled](auwidgetajax.md#enabled)
* [error](auwidgetajax.md#error)
* [headers](auwidgetajax.md#headers)
* [method](auwidgetajax.md#method)
* [params](auwidgetajax.md#params)
* [request](auwidgetajax.md#request)
* [requestPromise](auwidgetajax.md#requestpromise)
* [requests](auwidgetajax.md#requests)
* [response](auwidgetajax.md#response)
* [responseHeaders](auwidgetajax.md#responseheaders)
* [responseType](auwidgetajax.md#responsetype)
* [responses](auwidgetajax.md#responses)
* [statusCode](auwidgetajax.md#statuscode)
* [url](auwidgetajax.md#url)

### Accessors

* [template](auwidgetajax.md#static-template)

### Methods

* [checkInitDependenciesWidgets](auwidgetajax.md#checkinitdependencieswidgets)
* [exportWidgetData](auwidgetajax.md#exportwidgetdata)
* [resetPreloaderState](auwidgetajax.md#resetpreloaderstate)
* [restoreWidgetFromData](auwidgetajax.md#restorewidgetfromdata)
* [showPreloader](auwidgetajax.md#showpreloader)
* [showToast](auwidgetajax.md#showtoast)

## Properties

###  enabled

• **enabled**: *boolean* = true

If `false`, the request will not be executed. The default value is `true`.

___

###  error

• **error**: *any* =  null

___

###  headers

• **headers**: *any*

A dictionary of HTTP headers sent along with the request (an object with the keys used as a header name and a value used as a header value).

___

###  method

• **method**: *string* = "POST"

An HTTP method like `POST`, `GET`, etc. The default value is `POST`.

___

###  params

• **params**: *[IAuWidgetAjaxConfig](../interfaces/iauwidgetajaxconfig.md)*

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

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

Parameters of the `Ajax` widget.

___

###  request

• **request**: *any*

A request body. Typically, you put a JSON here that consists of references to other widgets.

___

###  requestPromise

• **requestPromise**: *Promise‹any›* =  Promise.resolve()

Promise, for awaiting in #function for getting response.
```
"{{ #function $['image-request'].compile() }}",
"{{ #asyncFunction await $['image-request'].requestPromise }}"
```

___

###  requests

• **requests**: *Array‹any›*

___

###  response

• **response**: *any*

A server response, interpreted based on the [responseType](auwidgetajax.md#responsetype) param. If [autoCompile](../interfaces/idesigneditordefinitionmodifyitems.md#optional-autocompile) is `true`, it is automatically updated every time the widget gets a server response.

___

###  responseHeaders

• **responseHeaders**: *Headers* =  null

___

###  responseType

• **responseType**: *[ResponseType](../README.md#responsetype)* = "json"

Defines how to interpret the response received from the server.

___

###  responses

• **responses**: *any* =  []

___

###  statusCode

• **statusCode**: *number* =  null

___

###  url

• **url**: *string*

A URL that is used to accept requests.

## Accessors

### `Static` template

• **get template**(): *HTMLTemplateElement*

*Inherited from void*

**Returns:** *HTMLTemplateElement*

## Methods

###  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[]*

___

###  exportWidgetData

▸ **exportWidgetData**(`force`: boolean): *Promise‹AjaxWidgetData›*

*Implementation of [IRestorableWidget](../interfaces/irestorablewidget.md)*

**Parameters:**

Name | Type |
------ | ------ |
`force` | boolean |

**Returns:** *Promise‹AjaxWidgetData›*

___

###  resetPreloaderState

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

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

**Returns:** *void*

___

###  restoreWidgetFromData

▸ **restoreWidgetFromData**(`widgetData`: AjaxWidgetData, `force`: boolean): *Promise‹void›*

**Parameters:**

Name | Type |
------ | ------ |
`widgetData` | AjaxWidgetData |
`force` | boolean |

**Returns:** *Promise‹void›*

___

###  showPreloader

▸ **showPreloader**(`isShow`: boolean): *void*

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

Shows a preloader.

**Parameters:**

Name | Type | Description |
------ | ------ | ------ |
`isShow` | boolean | If `true`, enables the preloader.  |

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