Daten auf UI Builder-Seiten dynamisch verfügbar machen (erweiterte Funktion)

Daten synchronisieren zwischen ServiceNow Tabellen und Daten Mit den Seiten, mit denen Sie erstellen UI Builder. Seiten zeigen synchronisierte Daten in Echtzeit an und aktualisieren Daten/Tabellen, wenn ein Anwender Informationen eingibt.

Erfahren Sie mehr über Datenressourcen in UI Builder

UI BuilderSynchronisiert ServiceNowTabellen/Daten Wird verwendet Datenressourcen. Eine Datenressource ruft die Daten ab, die UI Builder zum Anzeigen von Informationen in einem verwendet Komponente. UI BuilderKomponenten verwenden Datenressourcen, um Daten über verschiedene Experiences hinweg zu synchronisieren. Datenressourcen machen die Daten in Komponenten dynamisch, was bedeutet, dass Sie Daten nicht für jede Seite neu erstellen müssen.

Datenressourcen befinden sich im Datenressourcendrawer. Im Datenressource-Drawer können Sie eine Datenressource für Ihre Seite hinzufügen und konfigurieren. Nachdem Sie die Datenressource konfiguriert haben, können Sie die Daten zwischen Komponenten auf Ihrer Seite und synchronisieren ServiceNowTabellen/Daten .

Abbildung : 1. Datenressource Drawer

Das Datenressourcenfach enthält drei Abschnitte:

• Datenressourcen: Die Datenressourcen, die Teil der Experience sind
• Konfiguration/Ereignisse: Konfigurierte Datenressourcen und Ereignisse für die Experience
• Vorschau: JSON für die von der Datenressource zurückgegebenen Informationen

Sie können die Konfigurationseigenschaften für Komponenten, andere Datenressourcen, Clientskripts, Clientstatus und Ereignisse an diese Datenressourcen binden.

Legen Sie Bedingungen für einen Filter in Ihrer Datenressource fest. Weitere Informationen finden Sie unter Daten mit Ihren Komponenten verbinden.

Funktionsweise von Datenressourcen UI Builder

Datenressourcen rufen Daten aus Glide-, GraphQL- und REST-APIs ab und transformieren sie dann zur Verwendung in einer Komponente auf einem UI BuilderSeite.

Komponenten verwenden sowohl geerbte als auch lokale Datenressourceninstanzen. Geerbte Datenressourcen werden automatisch in geladen UI BuilderSeiten- und lokale Datenressourceninstanzen können hinzugefügt und konfiguriert werden. Datenressourcen werden basierend auf angegebenen Eingabewerten ausgewertet, um sicherzustellen, dass die richtigen Daten abgerufen werden. Weitere Informationen zu geerbten und lokalen Datenressourcen finden Sie unter Geerbte vs. Lokale Datenressourcen in UI Builder.

Lokale Datenressourcen in UI Builder

Sie können lokale Datenressourcen auswählen, z. B. Serverdaten, Vorgänge, Transformationen oder Clientdaten, z. B. die gForm-API, um Daten in zu übertragen UI BuilderSeite.

Hinweis:

Pro Seite in wird nur ein GlideForm unterstützt UI Builder. Weitere Informationen zu GlideForm finden Sie unter ServiceNow-Entwickler-Website .

Datenressourcen werden nach Anwendung im Datenressourcendrawer organisiert. Sie werden dann weiter nach dem Datenressourcentyp wie Serverdaten oder Transformation kategorisiert. Beispielsweise verfügt die globale Anwendung über mehrere Datenressourcen, aber die Kundenservice-Management (CSM)Die Arbeitsbereichsanwendung verfügt nur über wenige Datenressourcen.

Abbildung : 2. Datenressourcen

Je nach Anwendung, in der Sie sich befinden, werden verschiedene Datenressourcen angezeigt. Wenn Sie die globale Anwendung auswählen, werden unter „Serverdaten“ andere Datenressourcen angezeigt, als wenn Sie auswählen CSMKonfigurierbare Arbeitsbereichsanwendung.

Datenbindung in wird verwendet UI Builder

Mit der Datenbindung können Sie dynamische Seiten erstellen, indem Sie Seiten und Komponenten mit Datenressourcen synchronisieren. Sie können Daten an eine Komponente binden, um Daten aus dem Back-End abzurufen, und Feldparameter verwenden, um Eigenschaften von der URL abzurufen. Durch das Ändern der URL-Parameter können Sie dynamische Seiten erstellen, die je nach Parametern unterschiedliche Daten anzeigen.

Sie können Daten auf folgende Weise an eine Komponente binden:

Kontextbindung

Verwenden Sie URL-Parameter, um Teile der URL mit den Eigenschaften Ihrer Seite zu verbinden. Sie können beispielsweise den Tabellennamen aus der URL mit Ihrer Komponente verknüpfen, indem Sie die @context-Syntax verwenden, z. B.: @context.props.table .

Stellen Sie sich vor, Sie haben einen UI BuilderSeite mit einem Pflichtfeld namens Tabelle . Die URL für Ihre Seite sieht möglicherweise wie /Demo/page/<table-name> aus. Die <table-name> könnte etwa sein Incident . Die Daten können auch aus übergeordneten Datenressourcen stammen oder lokale Eigenschaften sein, die für die Seite spezifisch sind.

Um Ihre Komponenteneigenschaften, andere Datenressourceneigenschaften oder Ereignisdetails mit der Seiteneigenschaft zu verknüpfen, verwenden Sie eine @context.props.table Bindung. Stellen Sie sicher, dass Sie entweder einen Testwert in der URL angeben oder einen festen Wert für diese Eigenschaft in der Konfiguration Ihrer Seite festlegen, wenn Sie die Kontextbindung verwenden.

Datenressourcenbindung

Verwenden Sie Datenressourcen, um Daten vom Back-End Ihrer Instanz abzurufen, z. B. Clientstatus, GraphQL oder eine REST-API. Diese Datenquellen haben Eigenschaften, die mit Elementen in verknüpft werden können UI BuilderSeite.

Wenn Sie beispielsweise die Datenressource „Datensatz suchen“ verwenden, können Sie sie in einer Schaltflächenkomponente verwenden. Sie können einen Datenausdruck in der Eigenschaft „label“ wie folgt verwenden: @Data.Lookup_Record_1.result.number.DisplayValue .

Komponentenbindung

Verwenden Sie die Komponentenbindung, um eine Komponente mit einer anderen zu verbinden. Nehmen wir an, dass Sie eine Listenmenükomponente auf haben UI BuilderSeite. Das Listenmenü zeigt die derzeit ausgewählte Liste für andere Komponenten auf derselben Seite an. Diese anderen Komponenten können auf die Daten zugreifen, indem sie mit einem Ausdruck wie verknüpft werden @elements.list_menu_1.selectedListId .

Client-Statusparameter-Bindung

Verwenden Sie die Client-Statusparameterbindung, um Daten zwischen einer clientseitigen Anwendung und zu verbinden und zu synchronisieren UI BuilderKomponenten. Mit der Parameterbindung kann der Clientstatus Daten in Komponenten automatisch aktualisieren und umgekehrt. Verwenden @Status Syntax zum Binden einer Statuseigenschaft an einen Client-Statusparameter.

Typen von Datenquellen, die in verfügbar sind UI Builder

Sie können die folgenden Datenressourcentypen verwenden, die in der Tabelle angezeigt werden.

Tabelle : 1. Datenressourcentypen

Datenressourcentyp	Beschreibung
Controller	Kapselt Daten- und Ereignislogik und aktiviert Voreinstellungen für Komponenten.
GraphQL	GraphQL-Abfragen und -Mutationen, die ausgeführt werden.
Transformation	Skript, das die Eingabedaten in ein anderes Format umwandelt.
Client-Status	Clientseitige Datenressourcen, die Clientinformationen, domänenspezifische status oder Logik, Anwendereinstellungen usw. enthalten.
Zusammenfassung	Einzelne wiederverwendbare Datenressource, die mehrere Datenressourcen enthält.
REST	Datenressourcen, die über REST-API-Anforderungen erstellt werden.

Geerbte vs. Lokale Datenressourcen in UI Builder

Geerbte Datenressourcen geben Informationen aus den umgebenden Teilen von frei UI BuilderSeite, z. B. eine Anwendung. Stellen Sie sich vor, dass sich Ihre Seite in einem großen Frame befindet und einige Informationen aus dem Frame oder anderen Teilen in der Umgebung erhält. Sie können diese Informationen verwenden, indem Sie sie mit den Eigenschaften Ihrer Seite verbinden, z. B. Puzzle-Teile miteinander verknüpfen. Wenn Sie diese Informationen aus dem Frame abrufen, müssen Sie sie nicht selbst erneut abrufen.

Lokale Datenressourcen sind Elemente, die Sie einem hinzufügen UI BuilderSeite selbst an. Stellen Sie sich vor, Sie erstellen eine Seite für Reiseanfragen. Sie können Mitarbeiterdaten mit einer Listenkomponente synchronisieren, damit Mitarbeiter Reisen anfordern können, die mit ihren eigenen Informationen verknüpft sind.

Um diese Datenressourcen zu verwenden, holen Sie sie entweder aus einer App ein, oder erstellen Sie sie in ServiceNowPlattform. Dann in UI Builder, Stellen Sie diese Ressourcen für Ihre Komponenten zur Verfügung. Binden Sie als Nächstes die Daten an Ihre Komponente, damit sie damit funktionieren kann. Sie können beispielsweise eine Reihe von Datensätzen haben, sie in UI Builder verfügbar machen und mit einer Komponente verknüpfen. Konfigurieren Sie dort die Komponente so, dass sie Aufgaben mit den Daten wie das Speichern neuer Datensätze erledigt.

Sobald Ihre Seite Daten synchronisiert, verbinden Sie sie mit dem Teil der Seite, der sie benötigt, z. B. einer Komponente. Es ist so, als ob das richtige Puzzleteil an der richtigen Stelle passt. Dann können Sie diesem Teil der Seite mitteilen, was mit den Daten zu tun ist. Sie können es beispielsweise verwenden, um neue Reisepläne für Mitarbeiter hinzuzufügen.

UI Builder Datenressourceneigenschaften

Wenn Sie eine Datenressource in hinzufügen UI Builder, Es ist wie das Hinzufügen eines Tools, das weiß, woher Informationen abgerufen werden sollen. Datenressourceneigenschaften sind die Anweisungen, die einer Datenressource mitteilen, wie Daten in übernommen werden sollen UI BuilderSeiten. Diese Eigenschaften sagen einer Datenressource, welche Daten abgerufen werden sollen, wie sie organisiert werden und welche Bedingungen eingehalten werden sollen. Sie können diese Eigenschaften beispielsweise verwenden, um anzugeben, in welchen Tabellen gesucht werden soll, wie die Daten sortiert werden sollen und vieles mehr. Diese Eigenschaften sorgen dafür, dass die Datenressource ordnungsgemäß funktioniert und Ihnen die benötigten Daten zur Verfügung stellen.

Nachdem Sie eine Datenressource hinzugefügt haben, können Sie sie entweder eifrig oder explizit laden. Verwenden Sie die folgenden Beschreibungen, um zu bestimmen, welcher Ansatz am besten zu Ihrer Seite passt. Diese Entscheidung kann sich auf Leistung, Anwender-Experience und Ressourceneffizienz auswirken. Daher ist es wichtig, die Unterschiede zu verstehen.

Sofort (Eager-Evaluierung)

Daten werden automatisch geladen, wenn die Seite oder Komponente geladen wird.

Nützlich für Kerninhalte, die der Anwender voraussichtlich sofort sehen wird.

Kann das Laden von Seiten und Komponenten verlangsamen, indem nicht verwendete Daten abgerufen werden.

Nur wenn aufgerufen (explizite Auswertung)

Verschiebt das Laden von Daten, bis ein Anwender eine bestimmte Aktion ausführt. Beispiel: Klicken Sie auf eine Schaltfläche, oder geben Sie Daten in ein Feld ein.

Speichert Ressourcen, indem Daten nur bei Bedarf abgerufen werden.

Beschleunigt das anfängliche Laden der Seite.

Abbildung : 3. Auswertungsoptionen für Datenressourcen

UI Builder Datenressource-Skripts

Datenressourcenskripts sind spezielle Anweisungen, die Sie geben UI BuilderUm bestimmte Daten zurückzugeben. Wenn Sie beispielsweise mit einer Liste von Produkten zu tun haben, kann ein Skript einer Datenressource anweisen, nur Produkte anzuzeigen, die auf Lager sind, oder sie in einer bestimmten Reihenfolge anzuordnen. Mit Datenressourcenskripts können Sie anpassen, wie UI BuilderBehandelt die Informationen, z. B. das Hinzufügen zusätzlicher Regeln oder Aktionen.

• Fügen Sie einer Seite Datenressourcen hinzu, und konfigurieren Sie sie
  Fügen Sie Datenressourcen hinzu, um Daten aus Tabellen, Datensätzen oder anderen Elementen auf Ihrer Seite in dynamisch verfügbar zu machen UI Builder.
• Hinzufügen Now AssistKompetenzen zu Ihrer Seite
  Fügen Sie Kompetenzen hinzu, um Ihre zu verbessern UI BuilderSeite mit Now AssistGenerative KI-Fähigkeiten von
• Daten binden an UI BuilderSeiten mit Controllern (erweiterte Funktion)
  Controller vereinfachen die Verknüpfung von Daten und Ereignislogik, um Komponentenvoreinstellungen in zu aktivieren UI Builder.
• Anwenderdefinierte Controller erstellen (erweiterte Funktion)
  Erstellen Sie anwenderdefinierte Controller zur Verwendung in Experiences. Verbinden Sie wiederverwendbare Daten, Skripts und Ereignisse einfach mit Ihrer Seite, und richten Sie Eingaben, Ausgaben und Ereignisse ein.
• Verbinden Sie Datenkomponenten
  Verwenden Sie das modale Fenster „Datenbindung“, um Daten, die von lokalen Datenressourcen bereitgestellt werden, Komponenten auf zuzuordnen UI BuilderSeite.
• Statusparameter für Clients
  Verwenden Sie Client-Statusparameter, um Werte an Komponentenkonfigurationen zu binden. Wenn sich der Wert des Client-Statusparameters ändert, wird die Komponente aktualisiert, um den neuen Wert zu verwenden.
• Clientskripts definieren und an Komponenten binden
  Fügen Sie Client-Skripts in hinzu, und bearbeiten Sie sie UI BuilderDamit Sie den Clientstatus durch Ereignisse aktualisieren können. Sie können diese Skripts mit einem Ereignis-Handler an eine beliebige Komponente binden.
• Datenkonfiguration mit mehreren Tabellen
  Präsentieren Sie Daten aus mehreren Tabellen mithilfe von Komponenten, und steuern Sie das Layout und die Stile.
• Arbeiten Sie mit der Aktionszuordnung der Entitätsansicht für UI Builder
  Mit UI Builder, Sie können die Anwendung „Aktionszuordnung für Entitätsansicht“ (EVAM) verwenden, um zu standardisieren, wie die Datenquellen in Ihren Komponenten in Ihren Karten und Listen angezeigt werden.