# j-FlowEditor

> Open the Flow designer for a FlowStream WebSocket endpoint.

Framework: jcomponent20
Product: jComponent 20 (jcomponent@20)
Language: en
Content-SHA256: 1c4735d504ec12b9c0f6b8946c1d8b8323ae948f951c6925f9fd24491963a7cc
Snapshot: c0700e321579725c5cf4f5ace1ad7d2866d1b4f93c24a63c0b41b6b7998e976c
Sources: components@910ed1a86f6e72b4f031d3ad0dc7844f9fc5cb8e
Review: usage-reviewed

The component opens the Flow designer in an iframe. Bind its path to the WebSocket URL of the FlowStream to edit. Set the path to null to close the designer.

The component opens Flow editor in the iframe.

- Flow editor/designer repository <https://github.com/totaljs/flowdesigner> (if you don't want to use cloud version)

__Configuration__:

- `url {String}` a link to the Flow editor (default: `https://flow.totaljs.com`)
- `top {Number}` default: `1`
- `left {Number}` default: `1`
- `right {Number}` default: `0`
- `bottom {Number}` default: `0`
- `zindex {Number}` default: `30`
- `language {String}` default: `eu` (english)
- `closebutton {Boolean}` default: `true`

__Model__:

It must be a WebSocket URI to access the FlowStream.

## Usage

```html
<ui-component name="floweditor" path="designer.socket"></ui-component>
<script>
  function openDesigner(socketURL) {
    SET('designer.socket', socketURL);
  }
  function closeDesigner() {
    SET('designer.socket', null);
  }
</script>
```

Source: [Total.js components](https://github.com/totaljs/components/tree/910ed1a86f6e72b4f031d3ad0dc7844f9fc5cb8e/j-FlowEditor). Copyright Peter Širka and contributors. [MIT license](/knowledge-licenses.json).