Konfigurieren Sie einen Ereignis-Handler für eine Filterkomponente

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

Vorbereitungen

Dieses Verfahren setzt voraus, dass die folgenden Aufgaben abgeschlossen sind:

1. Sie haben die Filterkomponente zu hinzugefügt UI Builder Seite sowie mindestens eine Datenvisualisierungs- oder Listenkomponente. Der Filter kann auf mehrere Datenvisualisierungen oder -Listen angewendet werden.
2. Sie haben den Filter so konfiguriert, dass er die Quelle und die Daten, die gegebenenfalls für die Filterkomponente gefiltert werden sollen. 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 das relevante UI Builder Seite.
   Diese Seite kann ein technisches Dashboard sein.
2. Navigieren Sie zu UI Builder Statusabschnitt und fügen Sie eine Statusvariable mit dem Namen hinzu ParFilter Vom Typ JSON mit einem einfachen Array-Anfangswert [] .
   Weitere Informationen finden Sie unter Erstellen Sie einen Client-Statusparameter, und binden Sie ihn an eine Komponente .
   
   
3. Fügen Sie eine zweite Statusvariable mit dem Namen hinzu EncodedQueries Vom Typ JSON mit Anfangswert {} .
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 Client-Skripteinbindungen Registerkarte.
   
   
   
6. In Fügen Sie eine Skripteinbindung hinzu Feld auswählen MergePARFilters Und klicken Sie auf Hinzufügen .
   
   
   
7. Schließen Sie das Fenster zum Konfigurieren von Daten, Client-Status und Client-Skripts.
8. In UI Builder, Wählen Sie die Filterkomponente aus.
9. Wählen Sie aus Ereignisse Registerkarte im Konfigurationsbereich, und fügen Sie das von Ihnen erstellte Seitenskript (in unserem Beispiel „PAR-Filter anwenden“) als Ereignis-Handler hinzu.
   
   
   
10. In UI Builder, Wählen Sie eine Listenkomponente aus, falls vorhanden.
11. Wählen Sie Aus Bearbeiten Sie den festen Filter Und legen Sie diese Eigenschaft [fixedQuery] als dynamischen Bindungsausdruck fest @Status.encodedQueries.<list-datasource> .
    Ersetzen Sie <list-datasource> durch die Datenquelle für die Listenkomponente. Wenn Ihre Liste beispielsweise Datensätze aus der Tabelle „Incident [Incident]“ anzeigt, geben Sie ein @state.encodedQueries.incident .
    
    
12. Wiederholen Sie die beiden vorherigen Schritte für alle anderen Listenkomponenten.
13. Speichern Sie die Seite.