Rendre un design UI Builder dans votre propre page

UI Builder · uibuilder@1 uibuilderrenderweb component

Un design est un fichier JSON (le format), et le rendre ne demande qu’un composant. Le README de l’éditeur le montre avec le web component j-uibuilder :

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

config="url:..." est l’adresse du fichier JSON du design. La page a besoin de jComponent 20 et du composant uibuilder ; l’éditeur lui-même sert une page prête pour cela (public/render.txt) qui charge jComponent depuis le 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>

Le design apparaît alors là où vous placez la balise : un formulaire, un tableau de bord, un tableau d’un flux. Comme le design est une donnée, votre application peut décider quel fichier afficher par utilisateur ou par client.

Ce que la page de Forge vous donne déjà

Le catalogue de composants de Forge a la page uibuilder, générée à partir du dépôt des composants, avec son readme et son exemple.
Dans l’éditeur, la liste de composants qu’un design utilise est celle de son champ components ; un design ne peut être rendu que là où ces composants sont accessibles.

Bon à savoir

Vous n’avez pas besoin de l’éditeur pour rendre : toute page avec jComponent 20 peut le faire.
Le runtime qui rend un design est cdn/uibuilder.min@1.js dans le dépôt de l’éditeur.
UI Studio, listé parmi les modèles d’applications de Total.js, repose sur la même idée (apps Total.js).