Page Comparison

Over deze documentatie

Deze technische documentatie is bestemd voor de afnemers van de global header extensies binnen het Widget-platform. Gebruik deze documentatie om de extensie(s) te implementeren in de global header plugin.

...

Navigatie

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

...

Initieel wordt de header mee ingesteld via de standaardconfiguratie. 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 Om de breadcrumb-items of navigatie-items . te gebruiken: setItems(items: Link[]): this;. Hier verwacht wordt een link 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-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 e-loket global header 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';
  }
);

...