# j-UIStudio

> Render a Flow UI Studio application.

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

The component loads a Flow UI Studio application through its configured endpoint. Set url to that endpoint and handle metadata or application updates with onmeta and onapp.

This component renders the app according to the Total.js Flow UI Studio schema.


__Configuration__:

- `url {String}` the navigation endpoint that accepts POST requests and returns JSON step metadata
- `css {Boolean}` applies app style to the current element (default: `true`)
- `ssid {String}` optional, adds a session identifier to the URL address for the Flow
- `title {Boolean}` optional, rewrites `document.title` by the app name
- `plus {String}` optional, it works only with `title:true` and it adds `title - config.plus`
- `onmeta {String}` optional, a link to the `function(meta)` captures a meta data
- `onapp {String}` optional, a link to the `function(app)` captures a new UI design
- `origin {String}` optional
- `onrequest {String}` optional, a link to the `function(payload)` can modify request data
- `flowoutput {Boolean}` optional, enables outputs only from FlowOutput component (default: `true`)

__Properties__:

- `component.app` contains an `app` instance

__Good to know__:

The component extends the `app` instance by adding `breadcrumb {Array}` property.

## Usage

```html
<ui-component name="uistudio"
  config="url:/api/studio/;onapp:studioLoaded;loading:false"></ui-component>
<script>
  function studioLoaded(app) {
    console.log(app);
  }
</script>
```

## Navigation endpoint

The component sends a POST request to the configured endpoint. The request carries the current navigation state, including `origin`, `query`, an optional `ssid`, and the current `id`, `output` and `data` when an application emits an output.

Return an `id` for the step and a `url` for its exported UI Builder design:

```json
{
  "id": "home",
  "url": "/ui/home.json",
  "data": {}
}
```

Serve the design exported from UI Builder at `/ui/home.json`. The component downloads it with GET and creates the application through `UIBuilder.build()`. If the response includes an `input`, the component calls the application input with `input` and `data`. The `onmeta` callback receives the step response, and `onapp` receives the created application instance.

`loading:false` disables the loading indicator. To display it, declare a `j-Loading` component and enable `loading`.

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