# Accounts

## appmixer.ui.Accounts

![](https://3013747694-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LATDgYqVMe0hChW7efU%2F-L_Iqy4wpN4OpykkYsJU%2F-L_IxuGwVreephwFv_C4%2FScreenshot%202019-03-06%20at%2018.05.21.png?alt=media\&token=21e6eb86-7fb2-44c2-b72e-863b3be65573)

The appmixer.ui.Accounts is a UI widget that displays the user's connected accounts.

| Method                         | Description                                                                                                                                                                                                                                                             |
| ------------------------------ | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| `appmixer.ui.Accounts(config)` | Constructor function that accepts `config` object. The `config` object must contain at least the `el` property that points to a container DOM element where the Accounts will be rendered. Filter accounts by setting a custom query string to `config.options.filter`. |
| `open()`                       | Render the Accounts inside its container.                                                                                                                                                                                                                               |
| `close()`                      | Close the Accounts.                                                                                                                                                                                                                                                     |
| `on(event, handler)`           | React on events of the accounts widget. See below for the list of events the accounts widget supports.                                                                                                                                                                  |
| `off([event, handler])`        | Remove event listeners. If no arguments are provided, remove all event listeners. If only the `event` is provided, remove all listeners for that event. If both `event` and `handler` are given, remove the listener for that specific handler only.                    |
| `reload()`                     | Refresh the Accounts.                                                                                                                                                                                                                                                   |

### Accounts Events

| Event       | Callback           | Triggered when...                                              |
| ----------- | ------------------ | -------------------------------------------------------------- |
| `flow:open` | `function(flowId)` | the user clicks to open a flow the account is associated with. |

### Example

```javascript
var accounts = appmixer.ui.Accounts({
    el: '#your-accounts-div'
});
accounts.on('flow:open', function(flowId) {
    designer.set('flowId', flowId);
    designer.open();
});
accounts.open();
```

##