# Custom API

## Setting a custom API option

Custom API is represented as an object composed of **asynchronous** methods that you set on your Appmixer SDK instance using the `api` option:

```javascript
var myCustomApi = {
  /* the key must match an existing API method */
  myCustomApiMethod(/* arguments of the original method */) {
    return new Promise((resolve) => {
      resolve(myCustomResponse);
    });
  }
}

/* Use a custom API on the entire SDK instance */
var appmixer = new Appmixer({ api: myCustomApi });

/* Use a custom API on a particular SDK UI widget */
var designer = new appmixer.ui.Designer({ api: myCustomApi });
```

The list of API methods can be found here.

{% content-ref url="<https://github.com/clientIO/appmixer-docs-gitbook/blob/v5.2.0/customizing-ui/broken-reference/README.md>" %}
<https://github.com/clientIO/appmixer-docs-gitbook/blob/v5.2.0/customizing-ui/broken-reference/README.md>
{% endcontent-ref %}

An example how to redefine the flow update request.

```javascript
/* Create "Designer". */
var designer = appmixer.ui.Designer({
    el: '#your-designer',
    options: designerOptions(),
    api: {
        // extending the updateFlow request
        updateFlow(flowId, update) {
            // at this place you can call your own API every time the flow 
            // gets updated
            // carefully catch errors, timeouts ... so calling your 
            // external API does not affect the Designer behaviour
            console.log('Calling your own API.');
            console.log(JSON.parse(JSON.stringify(update)));

            // in order to update the flow in Appmixer, call the Flow API
            return this._request({
                url: `${this.get('baseUrl')}/flows/${flowId}`,
                method: 'PUT',
                data: update
            });
        }
    }
});
```