Deze technische documentatie is bestemd voor de afnemers van de global header extensie “e-loket” binnen het Widget-platform. Gebruik deze documentatie om deze extensie te implementeren in de global header plugin.
Disclaimer:
|
U krijgt de keuze uit 3 elementen om toe te voegen aan de global header.
Enkel de titelbar van de extensie wordt getoond.
De titelbar en de bar met de broodkruimel(s) worden getoond.
De titelbar en de bar met navigatie-items worden getoond.
Initieel wordt de header mee ingesteld via de standaardconfiguratie. Op die manier kan de global header extensie gebruikt worden zonder API.
De API is enkel nodig in specifieke gevallen:
Om de titel aan te passen: setTitle(title: String): this;
.
Om het ‘navigationItems’ type te gebruiken en het actieve navigatie-item aan te geven. Dit zorgt ervoor dat de styling up-to-date is: setActiveNavigationItemIndex(activeNavigationItemIndex: number): this;
.
Om de broodkruimel-items of navigatie-items te gebruiken: setItems(items: Link[]): this;
. Hier wordt een object in deze vorm verwacht: { label: String, href: String }
.
Wanneer er op één van de broodkruimel-items of navigatie-items wordt geklikt, gebeurt er een redirect naar de link die als href
is meegegeven aan dat item.
Om de global header extensie e-loket API te kunnen gebruiken is een referentie naar de global header widget nodig. Die referentie is te vinden via de @govflanders/vl-widget-client-bibliotheek.
Dit is een codevoorbeeld van het gebruik van de API om bepaalde acties uit te voeren:
vl.widget.client.capture( // Capture functie. function(widget) { // Hier hebben we een referentie naar het global header object // Deze kunnen we gebruiken om de global 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 ook het actieve item worden aangegeven: eloket.setActiveNavigationItemIndex(1); }); }, // Filter voor de global header function(widget) { return widget.getPluginTypeId() === 'global_header'; } ); |