Types of Components

Je definieert componenten. Componenten zijn de datalaag die verbinding maakt met de UI.

Aangepaste componenten zijn blogberichten, auteurs, adressen, aangepaste ruwe gegevens, enz.

UI-componenten zijn simpelweg aangepaste componenten die zijn gemarkeerd als UI-elementen, footer, header, hero, enz.

Systeemcomponenten zijn vooraf gedefinieerd door het CMS als land en taal.

Wat zijn UI-componenten?

Pagina's bestaan uit meer dan één UI-component

Voorbeelden:

• hero-block
• feature-block
• image-carousel
• header/footer

Elke UI-component vertegenwoordigt een sectie van je pagina.

Workflow voor UI-componenten

1. Definieer een component (structuur van het blok) in de component builder
2. Maak de UI-component aan
3. Koppel de UI-component aan een pagina
4. Render deze aan de clientzijde met het juiste blok in het blokregister en de renderer-configuratie

Voorbeeld: Hero Block-schema

Een hero-blok kan bevatten:

• Afbeelding
• Kop
• Subtitel

JSON-schema in de editor

[
  {
    "name": "heading",
    "type": "string",
    "required": false,
    "displayName": "heading"
  },
  {
    "name": "subtitle",
    "type": "string",
    "required": false,
    "displayName": "subtitle"
  },
  {
    "name": "hero_img",
    "type": "image",
    "required": false,
    "displayName": "hero_img"
  }
]

Configuratie van het beheerpaneel

• Maak een nieuw blok
• Koppel het schema (HeroSchema)
• Geef het blok een naam (bijv. hero-block)

Blok aan pagina toewijzen

• Ga naar een route in het beheerpaneel
• Klik op Assign Page
• Voeg het nieuw aangemaakte blok toe

Rendering aan de clientzijde

Zodra het is toegewezen, kan het blok worden opgehaald en gerenderd aan de clientzijde met behulp van je renderer-configuratie.

Samenvatting

• Schema's definiëren de structuur van blokken
• Blokken definiëren secties van een pagina
• Pagina's bestaan uit meerdere blokken
• Volledig aanpasbaar en herbruikbaar