# UI & Widgets
## Configuration
Widgets are included in `appmixer.ui` instances made with **Appmixer** constructor:
```javascript
const appmixer = new Appmixer(/* ... */)
const widget = appmixer.ui.FlowManager(config)
```
#### `config.el`
Type: `String|Element` | Default: `null`
HTML DOM element to serve as a container of the widget.
#### `config.theme`
Type: `Object` | Default: `DefaultTheme`
Custom theme definition.
#### `config.l10n`
Type: `Object` | Default: `DefaultL10N`
Custom localization texts.
#### `config.lang`
Type: `String` | Default: `en`
Language code for localization of components.
#### `config.api`
Type: `Object` | Default: `DefaultAPI`
Custom API methods.
## Instance
#### `widget.open`
```javascript
widget.open()
```
Mount the `widget` instance and render it inside the `el` container.
#### `widget.close`
```javascript
widget.close()
```
Unmount the `widget` instance and hide the `el` container.
#### `widget.reload`
```javascript
widget.reload()
```
Reload the entire `widget`.
#### `widget.reset`
```javascript
widget.reset()
```
Reset the state of the widget to defaults.
#### `widget.state`
Use `state` for properties that may change at any time when the `widget` is active.
```javascript
widget.state(path, value) // setter
widget.state(path) // getter
```
Example
```json
{
"foo": false,
"bar": { "counter": 1 }
}
```
```javascript
// set properties by key or path
widget.state('foo', true)
widget.state('bar', { counter: 2 })
widget.state('bar/counter', 3)
// get properties by key or path
widget.state('foo') // true
widget.state('bar') // { counter: 3 }
widget.state('bar/counter') // 3
// get the entire state
widget.state() // { foo: true, bar: { counter: 3 } }
// reset the state to defaults
widget.reset() // { foo: false, bar: { counter: 1 } }
```
#### `widget.set`
```javascript
widget.set(key, value)
```
Set `config` property.
#### `widget.get`
```javascript
widget.get(key, value)
```
Get `config` property.
#### `widget.on`
```javascript
widget.on(name, handler)
```
Add a new event listener and disable the default handler of the event.
#### `widget.off`
```javascript
widget.off(name)
```
Remove an event listener and enable the default handler of the event.
---
# Agent Instructions: Querying This Documentation
If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.
Perform an HTTP GET request on the current page URL with the `ask` query parameter:
```
GET https://docs.appmixer.com/6.0/5.1/appmixer-sdk/ui-and-widgets.md?ask=
```
The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.
Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.