Renderizzare un design di UI Builder nella tua pagina

UI Builder · uibuilder@1 uibuilderrenderweb component

Un design è un file JSON (il formato), e renderizzarlo è un solo componente. Il README dell’editor lo mostra con il web component j-uibuilder:

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

config="url:..." è l’indirizzo del file JSON del design. La pagina ha bisogno di jComponent 20 e del componente uibuilder; l’editor stesso serve una pagina pronta per questo (public/render.txt) che carica jComponent dalla CDN:

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

Poi il design compare dove metti il tag: un modulo, una dashboard, una board di un flusso. Poiché il design è un dato, la tua applicazione può decidere quale file mostrare per utente o per cliente.

Cosa ti dà già la pagina di Forge

Il catalogo dei componenti di Forge ha la pagina uibuilder, generata dal repository dei componenti, con il suo readme e il suo esempio.
Nell’editor, l’elenco dei componenti che un design usa è quello nel suo campo components; un design può essere renderizzato solo dove quei componenti sono raggiungibili.

Utile sapere

Non hai bisogno dell’editor per renderizzare: qualsiasi pagina con jComponent 20 può farlo.
Il runtime che renderizza un design è cdn/uibuilder.min@1.js nel repository dell’editor.
UI Studio, elencato tra i modelli di app di Total.js, si basa sulla stessa idea (app Total.js).