j-UIStudio

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

<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:

{
  "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. Copyright Peter Širka and contributors. MIT license.