Total.js UI Builder is a cloud-based editor for creating UI schemas.
- Cloud version: https://uibuilder.totaljs.com
- Documentation
Instructions:
- Download source code
- Install NPM dependencies with
$ npm install
- Run the app
$ node index.js
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>
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 = trueDEF.cl.paths
contains Paths + Components.follow = trueDEF.cl.list
contains a list of all instancesDEF.cl.inputs
contains all inputsDEF.cl.outputs
contains all outputsDEF.cl.views
contains all viewsDEF.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