Een UI Builder-ontwerp in je eigen pagina renderen

UI Builder · uibuilder@1 uibuilderrenderweb component

Een ontwerp is een JSON-bestand (het formaat), en het renderen is één component. De README van de editor toont het met het web component j-uibuilder:

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

config="url:..." is het adres van het JSON-bestand van het ontwerp. De pagina heeft jComponent 20 en de component uibuilder nodig; de editor zelf serveert daarvoor een kant-en-klare pagina (public/render.txt) die jComponent van de CDN laadt:

<link href="https://cdn.componentator.com/spa.min@20.css" rel="stylesheet" type="text/css" />
<script src="https://cdn.componentator.com/spa.min@20.js"></script>

Dan verschijnt het ontwerp waar je de tag plaatst: een formulier, een dashboard, een board van een flow. Omdat het ontwerp data is, kan je toepassing beslissen welk bestand ze per gebruiker of per klant toont.

Wat de pagina van Forge je al geeft

De componentencatalogus van Forge heeft de pagina uibuilder, gegenereerd uit de repository van de componenten, met haar readme en voorbeeld.
In de editor is de lijst met componenten die een ontwerp gebruikt die in zijn veld components; een ontwerp kan alleen worden gerenderd waar die componenten bereikbaar zijn.

Goed om te weten

Je hebt de editor niet nodig om te renderen: elke pagina met jComponent 20 kan het.
De runtime die een ontwerp rendert is cdn/uibuilder.min@1.js in de repository van de editor.
UI Studio, genoemd onder de app-sjablonen van Total.js, bouwt voort op hetzelfde idee (Total.js-apps).