zur Übersicht

Widgets zur Integration des Beteiligungsportals in andere Webauftritte

Zur Integration der Widgets in eine Seite muss

  1. die Javascript API geladen werden
  2. ein Element als Anker für die Integration bereitgestellt werden; das Element wird durch das Class-Attribut nbp-widget als Anker markiert.
  3. die Konfiguration des Widgets innerhalb des Ankerelements per data- Attribut vorgenommen werden

Integration der aktuellen Bauleitpläne eines Mandanten

<!-- Beteiligungsportal Javascript API laden -->
<script async="async" defer="defer" src="https://beteiligung.nrw.de/portal/widgets/widgets-api.js"></script>
<!-- Beteiligungsportal Widget - innerhalb dieses Elements wird das Widget gerendert -->
<div class="nbp-widget" data-widget-typ="bauleitplan-list" data-mandant="hauptportal"/>
        

Beispiel: Liste der Bauleitpläne im Hauptportal

<script async="async" defer="defer" src="https://beteiligung.nrw.de/portal/widgets/widgets-api.js"></script>

<div class="nbp-widget"
     data-widget-typ="bauleitplan-list"
     data-mandant="hauptportal"
     data-beteiligung-kategorie=""
     data-beteiligung-verfahrensschritt="beschluss"/>
       

Konfiguration

Definition des Widget Typs Liste:

data-widget-typ="bauleitplan-list"

Definition des Mandanten:

data-mandant="hauptportal"

Der Mandant kann aus der URL der Liste der aktuellen Beteiligungen ausgelesen werden (fett markiert):

https://beteiligung.nrw.de/portal/hauptportal/beteiligung/themen

Filtern nach Beteiligungskategorie (optionaler Parameter):

data-beteiligung-kategorie="flaechennutzungsplan umfrage"

Gültige Beteiligungskategorien sind:

Soll nach mehreren Beteiligungskategorien gefiltert werden, sind diese durch Leerzeichen zu trennen.

Filtern nach Verfahrensschritten (optionaler Parameter):

data-beteiligung-verfahrensschritt="aufstellungsbeschluss"

Gültige Verfahrensschritte sind:

Soll nach mehreren Verfahrensschritten gefiltert werden, sind diese durch Leerzeichen zu trennen.

Begrenzung der Ergebnisliste (optionaler Parameter):

data-liste-max="5"

Erwartet wird eine positive Ganzzahl. Ist der übergebene Wert ungültig, wird er ignoriert und die Liste wird mit 10 Elementen ausgeliefert (Standardverhalten).