Rendera en UI Builder-design på din egen sida

UI Builder · uibuilder@1 uibuilderrenderweb component

En design är en JSON-fil (formatet), och att rendera den är en enda komponent. Editorns README visar det med webbkomponenten j-uibuilder:

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

config="url:..." är adressen till designens JSON-fil. Sidan behöver jComponent 20 och komponenten uibuilder; editorn själv serverar en färdig sida för detta (public/render.txt) som laddar jComponent från 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>

Sedan visas designen där du placerar taggen: ett formulär, en instrumentpanel, en tavla för ett flöde. Eftersom designen är data kan din applikation avgöra vilken fil som ska visas per användare eller per kund.

Vad Forges sida redan ger dig

Forges komponentkatalog har sidan uibuilder, genererad från komponentförrådet, med dess readme och exempel.
I editorn är listan över komponenter som en design använder den i dess fält components; en design kan bara renderas där dessa komponenter går att nå.

Bra att veta

Du behöver inte editorn för att rendera: vilken sida som helst med jComponent 20 kan göra det.
Körtiden som renderar en design är cdn/uibuilder.min@1.js i editorns förråd.
UI Studio, som finns bland Total.js appmallar, bygger på samma idé (Total.js-appar).