UI Builder

Total.js UI Builder is a cloud-based editor for creating UI schemas.

• Cloud version: https://uibuilder.totaljs.com
• Documentation

---

• Join Total.js Telegram
• Support

Instructions:

• Download source code
• Install NPM dependencies with $ npm install
• Run the app $ node index.js

Good to know

Custom component list:

You can use your own component list by adding in the form https://uibuilder.totaljs.com?components=URL_TO_YOUR_JSON_DB

Custom rendering:

• Web component: https://componentator.com/components/j-uibuilder/

<ui-component name="uibuilder" config="url:https://uibuilder.totaljs.com/render.json"></ui-component>

Components

Metadata:

exports.follow = true;          // The user will see the component in the settings form Path for reading/writing (only for UI designer)
exports.hidden = true;          // The component will be hidden in the component list

Internal flags:

instance.state.bind = true;     // The component will be bind automatically in the e.g. form component (it's targeted for components which can read/write data (for render)
instance.state.notify = true;   // The option will emit only the "notify" event in the component when the value is change (instead of setting value directly to the component (look at Counter component))

Methods:

instance.datasource(CLID_OR_@INSTANCEID__OR__#VIEWID, function(value) {
	// value {Array} [id, name]
});

Events:

instance.on('refresh', function(meta) {
	// meta.type {String} can be "remove" or "configure"
	// meta.items {Object Array} [instance] (remove type)
	// meta.item {Object} instance (configure type)
	// some objects have been changed
});

Editor properties:

• DEF.cl.datasource contains all CodeList + Components.follow = true
• DEF.cl.paths contains Paths + Components.follow = true
• DEF.cl.list contains a list of all instances
• DEF.cl.inputs contains all inputs
• DEF.cl.outputs contains all outputs
• DEF.cl.views contains all views
• DEF.cl.apps contains all sibling apps/designs

Good to know:

• if the config.path starts with the @ at, it means that he component is following another component