TODO:

...

Foto’s toevoegen voor de types

...

Over deze documentatie

Deze technische documentatie is bestemd voor de afnemers van de e-loket extensie global header extensie “e-loket” binnen het Widget-platform. Gebruik deze documentatie om de e-loket deze extensie te gebruiken implementeren in de global header plugin.

E-Loket types

Er zijn 3 verschillende types die gebruikt kunnen worden:

...

Elementen

U krijgt de keuze uit 3 elementen om toe te voegen aan de global header.

Titelbar

Enkel de titelbar van de extensie wordt getoond.

Broodkruimel

...

De titelbar en de bar met de broodkruimel(s) worden getoond.

Navigatie

...

De titelbar en de bar met navigatie-items worden getoond.

Iframe
src https://codepen.io/m44rten/embed/RwMjyGB?default-tab=html%2Cresult&theme-id=light width 100% frameborder hide height 300px400px

API

Initieel wordt de header mee ingesteld via de standaard configuratiestandaardconfiguratie. Op die manier kan de e-loket global header extensie gebruikt worden zonder API.

De API is enkel nodig in specifieke gevallen:

• Het aanpassen van Om de titel aan te passen: setTitle(title: String): this;.

• Bij gebruik van Om het ‘navigationItems’ type : Het aangeven van te gebruiken en het actieve navigatie-item aan te geven. Dit zorgt ervoor dat de styling up-to-date is. : setActiveNavigationItemIndex(activeNavigationItemIndex: number): this;.

• Het updaten van de breadcrumb Om de broodkruimel-items of navigatie-items . te gebruiken: setItems(items: Link[]): this;. Hier verwacht een link wordt een object van in deze vorm verwacht: { label: String, href: String }.

Link redirect

Bij het klikken op een Wanneer er op één van de breadcrumb broodkruimel-items of navigatie-items wordt geklikt, wordt gebeurt er een redirect gedaan naar de link die als href is meegegeven aan dat item.

Gebruik van de API

Om de global header extensie e-loket extensie API te kunnen gebruiken is een referentie naar de global header widget nodig. Deze kan je vb. bekomen Die referentie is te vinden via de @govflanders/vl-widget-client-bibliotheek. Meer

...

Codevoorbeeld

Dit is een voorbeeld codevoorbeeld van het gebruik van de API om bepaalde acties uit te doenvoeren:

vl.widget.client.capture(
  // Capture functie.
  function(widget) {
    // Hier hebben we een referentie naar het global header object
    // Deze kunnen we gebruiken om de e-loketglobal header extensie referentie op te vragen
    widget.getExtension('eloket').then(function(eloket) {
      // Hier kunnen we de gewenste API -acties doen.
      // Voorbeeld: titel updaten
      const currentTitle = eloket.getTitle();
      eloket.setTitle(currentTitle + '!');
      
      // Voorbeeld: item toevoegen
      const items = eloket.getItems();
      items.push({ label: 'My new item', link: '/my-new-item' });
      eloket.setItems(items);
      
      // In geval van het type 'navigationItems', kan je ook nog het actieve item aangevenworden aangegeven:
      eloket.setActiveNavigationItemIndex(1);
      
    });
  },
  // Filter voor de global header
  function(widget) {
    return widget.getPluginTypeId() === 'global_header';
  }
);

...