JSON-formatet för en UI Builder-design

UI Builder · uibuilder@1 uibuilderjsonschema

En UI Builder-design är ett enda JSON-objekt. Förrådets startmallar (public/templates/*.json) visar dess fält.

Fält	Betydelse
`name`, `description`, `icon`, `version`	designens metadata (ikonen är en klass i ikontypsnittet, som `ti ti-totaljs`)
`type`	designens slag: `app`, `dashboard`, `flowboard` eller `part`
`css`	designens stil. Platshållaren `CLASS` ersätts av en unik klass för designen, så dess regler läcker aldrig (till exempel `.CLASS:root{--radius:5px}`)
`csspublish`	stilen för en `part` som publiceras för andra att använda
`editor`	editorns alternativ: `download` (en flagga) och textfälten `paths`, `codes` och `upload` (mallarna börjar med dem tomma; se den officiella dokumentationen för hur de används)
`components`	var komponenterna kommer ifrån: ett objekt med `cdn`, bibliotekets adress (`https://cdn.componentator.com/uibuilder/app.json` i mallen app), och i en `part` ett objekt som kopplar varje komponents id till adressen för dess editorformulär
`children`	designens komponentträd
`inputs`, `outputs`	designens kopplingar utåt; mallarna börjar med tomma listor
`args`	designens argument

Komponentträdet

children är en lista med noder. Varje nod har:

{
	"id": "root",
	"component": "container",
	"config": { "name": "Container" },
	"children": []
}

id: instansens identifierare inuti designen.
component: id för komponenten som renderar den (startdesignerna börjar med en container som heter root).
config: konfigurationen som komponentens inställningsformulär redigerar.
children: noderna inuti den, med samma form.

En komponent kan följa en annan: när dess config.path börjar med @ läser och skriver den värdet för komponenten vars id kommer efter @ (bygga en komponent).

Varför det spelar roll

Designen är vanliga data: du kan lagra den i en databas, jämföra två versioner, generera den från ditt eget verktyg eller låta din applikation välja en design per kund. För att visa en, läs rendera en design på din sida.