Zum Inhalt springen

So verwenden Sie das Organigramm-Widget im Jitterbit App Builder

Dieser Artikel bietet einen Überblick über die Verwendung des Organigramm-Widgets in App Builder um ein Organigramm auf einem Panel in einer App zu erstellen.

Hinweis

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

Organigrammbeispiel

Konfigurieren App Builder eine API sein

  1. Gehen Sie zu App Builder Kontrollzentrum > Sicherheitsanbieter im Menü „Verbinden“

  2. Klicken Sie im Benutzerauthentifizierungsbereich auf der rechten Seite auf Erstellen

    1. Geben Sie dem Anbieter einen Namen. Zum Beispiel: „OrgChartAPI“
    2. Wählen Sie bei Typ API Schlüssel
    3. Klicken Sie auf Speichern

  3. Navigieren Sie zum App Builder Kontrollzentrum > klicken Sie im Build-Menü auf REST- APIs & Webhooks > wählen Sie die Anwendung aus, die Sie konfigurieren, und klicken Sie auf Endpoints verwalten

  4. Suchen Sie auf dem resultierenden Bildschirm die Anwendung, die Sie konfigurieren, und klicken Sie auf das Bleistift-Bearbeiten-Symbol
  5. Geben Sie im Feld „Endpoint “ den Wert ein, unter dem die API auf die Ressource zugreift. Beispiel: „Charts“
  6. Klicken Sie auf das x, um den Bildschirm zu verlassen
  7. Klicken Sie unter Business Objects auf Erstellen und wählen Sie die Tabelle oder das Objekt aus, das Ihre Organigrammdaten enthält, und legen Sie einen Wert für den Endpoint fest. Beispiel: „Dienstplan“
  8. Durch Klicken auf das Struktursymbol können Sie steuern, welche Felder in der API verfügbar sind, wenn Sie Spalten deaktivieren möchten, die für das Organigramm nicht benötigt werden.
  9. Wenn Sie auf das Popup-Symbol klicken, können Sie die Anzahl der Zeilen festlegen, die die API zurückgeben kann. Erhöhen Sie diese Anzahl bei Bedarf, abhängig von der Anzahl der Ebenen in Ihrem Organigramm.
  10. Navigieren Sie zum App Builder App Workbench > Sicher > Benutzerverwaltung

  11. Wählen Sie einen vorhandenen Benutzer aus oder erstellen Sie einen neuen Benutzer für den API -Aufruf

    1. Der Benutzer muss auf den Login-Typ Interaktiv eingestellt sein
    2. Der Benutzer muss nicht lokal authentifiziert sein

  12. Klicken Sie im Popup-Bildschirm des ausgewählten/erstellten Benutzers auf Schlüssel

  13. Klicken Sie auf Erstellen und wählen Sie den in Schritt 2 erstellten API Anbieter. Kopieren Sie den für den Benutzer generierten Schlüsselwert.
  14. Richten Sie optional alle zusätzlichen Rollen/Sicherheitsgruppen für das Objekt ein, die möglicherweise benötigt werden.

Konfigurieren des Organigramm-Widgets

  1. Laden Sie das Organigramm-Widget hoch auf App Builder, zu einer Sammlung, auf die die App, mit der Sie arbeiten möchten, Zugriff hat.
  2. Konfigurieren Sie alle vom Widget benötigten Parameter, wie in der Widget-Download-Bibliothek aufgeführt. Bei den eingegebenen Werten wird zwischen Groß- und Kleinschreibung unterschieden. Der JSONURL-Wert kann im Control Center > REST APIs und Webhooks abgerufen werden. Suchen Sie den oben konfigurierten Anwendungseintrag und klicken Sie auf das entsprechende Dokumentsymbol. Die resultierende URL sieht ungefähr so aus: https://localhost/rest/v1/roster/org_chart

Wenn Sie die Farben des Organigramms ändern möchten, müssen Sie die Dateien in der .Zip-Datei für das Widget ändern

  1. Die Farbwerte für das Label und den Rand sind in \Css\vinyl.orgchart.css. Werte in Hex
  2. Die Farbwerte für die Linien, Hover-Farbe usw. sind in \Css\jquery.orgchart.css. Werte in RGB

Fügen Sie das Widget hinzu zu an App Builder Seite

  1. Navigieren Sie zur App-Seite, auf der Sie das Widget anzeigen möchten, und fügen Sie ein Einzelzeilenfeld hinzu, das immer einen Datensatz zurückgibt. Verwenden Sie beispielsweise die Param- oder Benutzertabelle.
  2. Fügen Sie ein Textsteuerelement hinzu und fügen Sie das Organigramm-Widget zum Steuerelement hinzu

  3. Wenn das Organigramm nicht angezeigt wird, können Sie optional Folgendes tun:

    1. Konfigurieren Sie die Datenquelle, die das Panel verwendet, so, dass ein Datensatz vorhanden ist, der den API Schlüssel sowie die vom Organigramm verwendete JSON-URL zurückgibt
    2. Fügen Sie dem Panel 2 versteckte Textsteuerelemente hinzu, die dem API Schlüssel und der JSON-URL zugeordnet sind. Sie können diese Werte beispielsweise aus einer Parametertabelle speichern.