Zum Inhalt springen

Verwendung des Organigramm-Widgets in Jitterbit App Builder

Übersicht

Das Organigramm-Widget rendert hierarchische Daten, wie eine Berichtsstruktur, als interaktives Organigramm auf einer App-Builder-Seite. Das Widget selbst speichert keine Daten: Es ruft einen REST-Endpunkt auf, den Sie bereitstellen (sein jsonURL-Parameter), mit einem API-Schlüssel, den Sie generieren, und rendert alle hierarchischen JSON-Daten, die dieser Endpunkt zurückgibt.

Hinweis

Das Organigramm-Widget ist in der Widget-Download-Bibliothek verfügbar.

Orgchartexample

Die Schritte sind:

App Builder als API konfigurieren

Bevor das Widget etwas anzeigen kann, benötigt es einen REST-Endpunkt zum Aufrufen von Daten. Um Ihre Organigrammdaten über die REST-API von App Builder bereitzustellen, führen Sie die Schritte unter Eine Jitterbit-App-Builder-App als REST-API-Endpunkt veröffentlichen aus:

  1. Richten Sie einen Security-Provider-API-Schlüssel ein. Nennen Sie ihn beispielsweise OrgChartAPI.

  2. Konfigurieren Sie einen Endpunkt für Ihre Anwendung. Verwenden Sie beispielsweise charts als Endpunktwert.

  3. Veröffentlichen Sie eine Ressource für die Tabelle oder das Objekt, das Ihre Organigrammdaten enthält. Verwenden Sie beispielsweise roster als Endpunktwert der Ressource.

    Deaktivieren Sie beim Konfigurieren der Felder der Ressource Include By Default für alle Spalten, die nicht für das Organigramm erforderlich sind, und legen Sie GET Max Limit fest, falls erforderlich, je nach Anzahl der Ebenen in Ihrem Organigramm.

  4. Konfigurieren Sie API-Schlüssel für Benutzer für alle, die auf diese Daten zugreifen müssen.

Das Organigramm-Widget konfigurieren

Nachdem Ihre Daten als REST-Endpunkt bereitgestellt wurden, installieren Sie das Widget selbst und verweisen Sie es auf diesen Endpunkt:

  1. Laden Sie das Organigramm-Widget in App Builder hoch, in eine Sammlung, auf die die App, mit der Sie arbeiten möchten, Zugriff hat.

  2. Konfigurieren Sie die erforderlichen Parameter des Widgets, wie in der Widget-Download-Bibliothek aufgeführt. Eingegebene Werte unterscheiden Groß- und Kleinschreibung. Der jsonURL-Wert folgt der REST-API-URI-Konvention: Kombinieren Sie die REST-API-Basis-URL Ihrer Instanz mit dem Endpunkt Ihrer Anwendung und dem Endpunkt der Ressource. Beispiel: https://localhost/rest/v1/charts/roster.

Optional können Sie die Farben des Organigramms anpassen, indem Sie die CSS-Dateien bearbeiten, die in der .zip-Datei des Widgets enthalten sind:

  • Label- und Rahmenfarben werden in \Css\vinyl.orgchart.css mit Hexadezimalwerten festgelegt.

  • Linien- und Hover-Farben werden in \Css\jquery.orgchart.css mit RGB-Werten festgelegt.

Das Widget zu einer App-Builder-Seite hinzufügen

Betten Sie abschließend das konfigurierte Widget auf einer Seite ein und stellen Sie sicher, dass es Zugriff auf den API-Schlüssel und den jsonURL-Wert hat, die es benötigt, um Ihren Endpunkt aufzurufen:

  1. Navigieren Sie zur App-Seite, auf der das Widget angezeigt werden soll, und fügen Sie ein Single Row-Panel hinzu, das immer einen Datensatz zurückgibt. Verwenden Sie beispielsweise die Tabelle Param oder User.

  2. Fügen Sie dem Panel ein Text-Steuerelement hinzu und fügen Sie dann das Organigramm-Widget zu diesem Steuerelement hinzu.

  3. Wenn das Organigramm nicht angezeigt wird, stellt die Datenquelle des Panels möglicherweise nicht die erforderlichen Werte des Widgets bereit. Optional:

  4. Konfigurieren Sie die Datenquelle, die das Panel verwendet, so dass ein Datensatz die API-Taste und die vom Organigramm verwendete jsonURL zurückgibt.

  5. Fügen Sie zwei verborgene Text-Steuerelemente zum Panel hinzu, die der API-Taste und der jsonURL zugeordnet sind. Sie können diese Werte beispielsweise in einer Param-Tabelle speichern.