> For the complete documentation index, see [llms.txt](https://docs.appmixer.com/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.appmixer.com/6.0/v4.1/appmixer-sdk/api-reference/designer.md).

# Designer

## appmixer.ui.Designer

![](/files/-L_IxbspLePKwti74xxf)

The appmixer.ui.Designer is a UI widget that displays the drag\&drop Flow Designer.

| **Method**                     | **Description**                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                             |
| ------------------------------ | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| `appmixer.ui.Designer(config)` | <p>Constructor function that accepts <code>config</code> object. The <code>config</code> object must contain at least the <code>el</code> property that points to a container DOM element where the Designer will be rendered. <code>el</code> can either be a CSS selector or a reference to a DOM element. Note that the recommended width of your container is at least 1200px for best Designer UI/UX. <code>config.options.menu</code> can optionally define the flow menu inside Designer. For example: <code>{ options: { menu: \[ { label: 'Rename', event: 'flow:rename' }, { label: 'Insights', event: 'flow:insights' }, { label: 'Clone', event: 'flow:clone' }, { label: 'Export to SVG', event: 'flow:export-svg' }, { label: 'Export to PNG', event: 'flow:export-png' }, { label: 'Print', event: 'flow:print' }  ] }</code> defines a menu with 6 items. Note that each item can also optionally contain <code>icon</code> property (which we omitted from the example above to save space. The <code>icon</code> property is a URL of an image. It's important to note that the designer supports built-in events: <code>"flow:rename"</code>, <code>"flow:export-svg"</code>, <code>"flow:export-png"</code> and <code>"flow:print"</code>. These events cannot be re-defined. These events trigger built-in UX for renaming, exporting to SVG and PNG and printing flows. If you don't want to use this built-in behaviour, just redefine your menu with your own custom events. <code>config.sharePermissions</code> can optionally define the sharing options for the flow. For example:</p><p><code>sharePermissions: \[</code></p><p>    <code>{ label: 'Read', value: 'read' },</code></p><p>    <code>{ label: 'Start', value: 'start' },</code></p><p>    <code>{ label: 'Stop', value: 'stop' }</code></p><p>  <code>]</code></p><p>Define a share dialog box that gives the user permission to share the flow for all the read/start/stop permissions. Additionally, you can also define the scope of the share with <code>config.shareTypes</code>:</p><p><code>shareTypes: \[</code></p><p>    <code>{ label: 'Email', value: 'email', placeholder: 'Enter an email' },</code></p><p>    <code>{ label: 'Scope', value: 'scope', placeholder: 'Enter a scope' },</code></p><p>    <code>{ label: 'Domain', value: 'domain', placeholder: 'Enter a domain' },</code></p><p><code>]</code></p> |
| `set(property, value)`         | Set a property of the designer. Currently only "flowId" is supported. Use it to set the flow the designer should open for (`set("flowId", "123abc456")`). You can also call this to change the currently opened flow in the designer dynamically.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                           |
| `get(property)`                | Return a property value.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                    |
| `open()`                       | Render the Designer inside its container.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                   |
| `close()`                      | Close the designer.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                         |
| `on(event, handler)`           | React on events of the designer. See below for the list of events the designer 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.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                        |
| `state(name, value)`           | Change the state of the UI. Currently, only `"loader"` and `"error"` states are supported. For example, in order to show a loader in the flow manager UI, just call `state("loader", true)`. If you want to display an error in the flow manager UI, call `state("error", "Something went wrong.")`.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                        |
| `reload()`                     | Re-render the designer. Call this when you changed flow's state (started/stopped) to make sure the state change is reflected.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                               |

### Designer Events

| Event           | Callback           | Triggered when...                       |
| --------------- | ------------------ | --------------------------------------- |
| `flow:insights` | `function(flowId)` | the user clicks the insights menu item. |
| `flow:clone`    | `function(flowId)` | the user clicks the clone menu item.    |

### Example

```javascript
var designer = appmixer.ui.Designer({
    el: '#your-designer-div',
    options: {
        menu: [
            { label: 'Rename', event: 'flow:rename' },
            { label: 'Insights Logs', event: 'flow:insights-logs' },
            { label: 'Clone', event: 'flow:clone' },
            { label: 'Share', event: 'flow:share' },
            { label: 'Export to SVG', event: 'flow:export-svg' },
            { label: 'Export to PNG', event: 'flow:export-png' },
            { label: 'Print', event: 'flow:print' }
        ]
    }
});
appmixer.api.createFlow('New flow').then(function(flowId) {
    designer.set('flowId', flowId);
    designer.open();
}).catch(function(error) {
    console.log('Something went wrong creating a new flow.', error);
});
```

##


---

# Agent Instructions
This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com.

## 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/v4.1/appmixer-sdk/api-reference/designer.md?ask=<question>
```

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.