Konfigurieren Sie einen Ereignishandler für eine Filterkomponente

  • Freigeben Version: Yokohama
  • Aktualisiert 30. Januar 2025
  • 1 Minute Lesedauer

    • Konfigurieren Sie in einem technischen Dashboard einen speziellen auf Clientskripts basierenden Ereignishandler für eine Filterkomponente, damit ihm beliebige Listen oder Datenvisualisierungen folgen können. Es ist nicht erforderlich, einen Ereignishandler für Filter in Inline-Dashboards zu konfigurieren.

    Vorbereitungen

    Dieses Verfahren geht davon aus, dass die folgenden Aufgaben abgeschlossen sind:
    1. Sie haben der Seite UI Builder die Komponente „Filter“ sowie mindestens eine Datenvisualisierungs- oder Listenkomponente hinzugefügt. Der Filter kann für mehrere Datenvisualisierungen oder Listen gelten.
    2. Sie haben den Quellfilter und ggf. die zu filternden Daten für die Filterkomponente konfiguriert. Wenn die Filterkomponente eine Liste filtern soll, haben Sie die Tabelle angegeben, die die Listenkomponente als zu filternde Daten anzeigt.
    3. Sie haben Datenquellen für alle Datenvisualisierungskomponenten konfiguriert.
    4. Sie haben eine Tabelle für beliebige Listenkomponenten angegeben.

    Erforderliche Rolle: ui_builder_admin, admin

    Prozedur

    1. Öffnen Sie die entsprechende Seite UI Builder.
      Diese Seite kann ein technisches Dashboard sein.
    2. Navigieren Sie zum Abschnitt UI Builder State, und fügen Sie eine Statusvariable namens „parFilters“ vom Typ JSON mit einem einfachen Array-Anfangswert []hinzu.
      Weitere Informationen finden Sie unter Client-Statusparameter erstellen und an eine Komponente binden.
      Der Client-Statusparameter „parFilters“ wird einer UIB-Seite hinzugefügt.
    3. Fügen Sie eine zweite Statusvariable namens encodedQueries vom Typ JSON mit dem Anfangswert {}hinzu.
    4. Navigieren Sie zum Abschnitt „Client-Skripts“, und erstellen Sie ein anwenderdefiniertes Skript mit einem Namen wie „PAR-Filter anwenden“ und dem folgenden Inhalt oder einem funktionalen Äquivalent davon: 
      function handler({ api, event, helpers, imports }) {
	const mergePARFiltersV2 = imports["global.mergePARFilters"]().v2;
	const { appliedFilters } = event.payload;
	api.setState("parFilters", ({ currentValue, api }) => {
		const { parFilters, encodedQueries } = mergePARFiltersV2(
			currentValue,
			appliedFilters
		);
		api.setState("encodedQueries", encodedQueries);
		return parFilters;
	});
}
    5. Öffnen Sie im Abschnitt „Client-Skripts“ die Registerkarte Client-Skripteinbindungen.

      Registerkarte „Client-Skripteinbindungen“ des Bereichs „Client-Skripts“ auf einer UIB-Seite.
    6. Wählen Sie im Feld Skripteinbindung hinzufügen die Option mergePARFilters aus, und klicken Sie auf Hinzufügen.

      Hinzufügen der Skripteinbindung mergePARFilters.
    7. Schließen Sie das Fenster zum Konfigurieren von Daten, Client-Status und Client-Skripts.
    8. Wählen Sie in UI Builderdie Komponente Filter aus.
    9. Wählen Sie im Konfigurationsbereich die Registerkarte Ereignisse aus, und fügen Sie das von Ihnen erstellte Seitenskript (in unserem Beispiel anwenden – PAR-Filter anwenden) als Ereignishandler hinzu.

      Das Skript „PAR-Filter anwenden“ wird als Ereignis-Handler für „Filter angewendet“ hinzugefügt.
    10. Wählen Sie in UI Buildereine Listenkomponente aus, falls vorhanden.
    11. Wählen Sie „Festen Filter bearbeiten“ aus, und legen Sie diese Eigenschaft [fixedQuery] als dynamischen Bindungsausdruck @state.encodedQueries fest.<list-datasource> .
      Ersetzen<list-datasource> mit der Datenquelle für die Listenkomponente. Wenn in Ihrer Liste beispielsweise Datensätze aus der Incident-Tabelle [incident] angezeigt werden, geben Sie @state.encodedQueries.incidentein.
      Im Feld für festen Filter in einem Listenkonfigurationsbereich, durch Binden der Eigenschaft „fixedQuery“ an den Client-Statusparameter „encodedQueries“.
    12. Wiederholen Sie die beiden vorherigen Schritte für alle anderen Listenkomponenten.
    13. Speichern Sie die Seite.