j-UIBuilder

jComponent 20 · jcomponent@20 component Example loaded with jComponent 20

This component renders the application designed via UI Builder. You can load the app via the path specified in the component or via the config.url option. The path can contain a URL address to the JSON app schema or the app object (parsed JSON).

Configuration:

app {String} a link to the method/variable where will be stored app instance
url {String} a link to the app schema (must be in the json format)
css {Boolean} applies app style to the current element (default: true)
id {String} overwrites app ID

Methods:

component.load(data) the method loads app into the current element

Properties:

component.app contains an app instance

How to handle data?

<ui-component name="uibuilder" ... config="app:myapphandler"></ui-component>

<script>

	function myapphandler(app) {

		// app.component {jComponent}
		// app.schema {Object} uibuilder compiled design
		// app.schema.inputs {Array Objects}
		// app.schema.outputs {Array Objects}

		// How to capture data?
		app.on('output', function(meta) {
			// meta.id {String} output identifier
			// meta.data {Object} raw data from the builder
			// meta.app {Object} app instance
			// meta.instance {Object} which instance sent data?
			// meta.instanceid {String} an instance identifier
			// meta.component {Object} which component sent data?
			// meta.componentid {String} a component identifier
			// meta.err {String} optional, error handler (nullable)
			// meta.output {String} an output name
			// meta.note {String} optional, a note
			// meta.ref {String} an internal reference

			AJAX('POST /yourapi/', meta.data, function(response) {
				// What next?
			});

		});

		// How to inject data?
		// Example
		app.on('ready', function() {
			// First, you must know input identifier
			app.input('cidlm5caacg_load', { email: '@' }, console.log);
		});

	}

</script>

Use it with <ui-component name="uibuilder">. When the component is not loaded yet, jComponent downloads it on first use from the address in DEF.fallback (the Componentator CDN by default). Author: Peter Širka. Source: the Componentator components repository, MIT license.

example.html

<ui-component name="uibuilder" config="url:https://cdn.componentator.com/uibuilder/demo/render/dashboard.json"></ui-component>