TODO:

• Foto’s toevoegen voor de types

• Codepens (1 per type) (eigen account maken en doorsturen aan frederik (webuniversum))

Over deze documentatie

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

Disclaimer: Deze pagina’s worden regelmatig aangepast zodat ze altijd de meeste recente informatie bevatten. Aarzel niet om feedback te geven mochten er aanpassingen nodig zijn.

E-Loket types

Er zijn 3 verschillende types die gebruikt kunnen worden:

• None: Enkel de titel bar van de extensie wordt getoond.

• Breadcrumbs: De titel bar + bar met breadcrumbs worden getoond.

• Navigatie items: De titel bar + bar met navigatie items worden getoond.

API

Initieel wordt de header mee ingesteld via de standaard configuratie. Op die manier kan de e-loket extensie gebruikt worden zonder API. De API is enkel nodig in specifieke gevallen:

• Het aanpassen van de titel setTitle(title: String): this;

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

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

Link redirect

Bij het klikken op een van de breadcrumb items of navigatie items, wordt er redirect gedaan naar de link die als href is meegegeven aan dat item.

Gebruik van de API

Om de e-loket extensie API te kunnen gebruiken is een referentie naar de global header widget nodig. Deze kan je vb. bekomen via de @govflanders/vl-widget-client-bibliotheek. Meer info hierover: Technische documentatie Widget-platform

Dit is een voorbeeld van het gebruik van de API om bepaalde acties te doen:

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-loket 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 aangeven:
      eloket.setActiveNavigationItemIndex(1);
      
    });
  },
  // Filter voor de global header
  function(widget) {
    return widget.getPluginTypeId() === 'global_header';
  }
);