# UI Builder terv megjelenítése a saját oldaladon

> Jeleníts meg egy mentett tervet bárhol a j-uibuilder web componenttel és a JSON fájl címével, egyetlen követelményként a jComponent 20-szal.

Framework: uibuilder
Product: UI Builder (uibuilder@1)
Language: hu
Content-SHA256: 814a4a8a766e453bbb1d6847ed52a7eed11ca062dc0bbbd3ae3ee1175292acec
Snapshot: c0700e321579725c5cf4f5ace1ad7d2866d1b4f93c24a63c0b41b6b7998e976c
Sources: 
Review: not-recorded

A terv egy JSON fájl ([a formátum](/en/uibuilder/the-ui-json-format/)), megjelenítése pedig egyetlen komponens. A szerkesztő README fájlja a [j-uibuilder](https://componentator.com/components/j-uibuilder/) web componenttel mutatja:

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

A `config="url:..."` a terv JSON fájljának címe. Az oldalnak szüksége van a jComponent 20-ra és az `uibuilder` komponensre; maga a szerkesztő kiszolgál erre egy kész oldalt (`public/render.txt`), amely a CDN-ről tölti be a jComponentet:

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

Ezután a terv ott jelenik meg, ahová a címkét teszed: egy űrlap, egy irányítópult, egy folyam táblája. Mivel a terv adat, az alkalmazásod eldöntheti, melyik fájlt mutassa felhasználónként vagy ügyfelenként.

## Amit a Forge oldala már megad

- A Forge komponenskatalógusában ott van a [uibuilder](/en/components/uibuilder/) oldal, a komponensek tárolójából generálva, a readme-vel és a példával.
- A szerkesztőben a terv által használt komponenslista a `components` mezőjében lévő; egy terv csak ott jeleníthető meg, ahol ezek a komponensek elérhetők.

## Jó tudni

- A megjelenítéshez nincs szükséged a szerkesztőre: bármelyik jComponent 20-szal rendelkező oldal megteszi.
- A tervet megjelenítő futtatókörnyezet a szerkesztő tárolójában a `cdn/uibuilder.min@1.js`.
- Az UI Studio, amely a Total.js alkalmazássablonjai között szerepel, ugyanerre az ötletre épül ([Total.js alkalmazások](https://www.totaljs.com/apps/)).