Ein UI-Builder-Design in Ihrer eigenen Seite rendern

UI Builder · uibuilder@1 uibuilderrenderweb component

Ein Design ist eine JSON-Datei (das Format), und es zu rendern ist eine einzige Komponente. Die README des Editors zeigt es mit der Web Component j-uibuilder:

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

config="url:..." ist die Adresse der JSON-Datei des Designs. Die Seite braucht jComponent 20 und die Komponente uibuilder; der Editor selbst liefert dafür eine fertige Seite (public/render.txt), die jComponent vom CDN lädt:

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

Dann erscheint das Design dort, wo Sie das Tag setzen: ein Formular, ein Dashboard, ein Board eines Flows. Da das Design Daten sind, kann Ihre Anwendung entscheiden, welche Datei sie pro Benutzer oder pro Kunde zeigt.

Was die Seite von Forge Ihnen schon bietet

Der Komponentenkatalog von Forge hat die Seite uibuilder, erzeugt aus dem Repository der Komponenten, mit ihrem Readme und Beispiel.
Im Editor ist die Komponentenliste, die ein Design verwendet, die in seinem Feld components; ein Design lässt sich nur dort rendern, wo diese Komponenten erreichbar sind.

Gut zu wissen

Zum Rendern brauchen Sie den Editor nicht: Jede Seite mit jComponent 20 kann das.
Die Laufzeit, die ein Design rendert, ist cdn/uibuilder.min@1.js im Repository des Editors.
UI Studio, aufgeführt unter den App-Vorlagen von Total.js, baut auf derselben Idee auf (Total.js-Apps).