Benutzerdefinierte UI-Erweiterungen: Artikelindex

Fusion kann in seiner Benutzeroberfläche Ihre eigene Web-Benutzeroberfläche anzeigen. Sie erstellen eine kleine Web-Anwendung, eine so genannte Erweiterung, veröffentlichen sie in Adobe und sie erscheint als Schaltfläche in der Navigation von Fusion. Wenn ein Benutzer darauf klickt, wird Ihre Benutzeroberfläche im Hauptbereich von Fusion geladen und erhält automatisch Informationen darüber, wer angemeldet ist, in welcher Organisation und in welchem Team er arbeitet, und mehr.

Dieser Abschnitt der Fusion-Dokumentation führt Sie durch den gesamten Prozess, ohne Vorkenntnisse mit Adobe App Builder oder Frontend-Frameworks vorauszusetzen. Sie enthält auch den erforderlichen Code sowie Erläuterungen zu diesem Code.

Verwendung dieses Handbuchs

Verwenden Sie dieses Handbuch, wenn Sie einen benutzerdefinierten Bildschirm oder ein benutzerdefiniertes Tool zu Fusion hinzufügen möchten. Sie müssen kein erfahrener Entwickler sein. Sie müssen sich nicht damit abfinden, Befehle in ein Terminal zu kopieren und einige Textdateien zu bearbeiten.

Um eine benutzerdefinierte Benutzeroberflächenerweiterung zu erstellen, benötigen Sie eine Adobe ID und Zugriff auf eine Adobe-Organisation (dieselbe Art von Zugriff, die Sie zum Anmelden bei Fusion verwenden).

Was Sie erstellen werden

Am Ende dieses Handbuchs werden Sie über Folgendes verfügen:

  1. Ein kostenloses Adobe App Builder-Projekt. Hier wohnt Ihre Erweiterung.
  2. Eine kleine Web-App, die Ihre benutzerdefinierte Benutzeroberfläche rendert.
  3. Diese Web-App ist mit einem der Erweiterungspunkte von Fusion verbunden, sodass sie in der Navigation von Fusion angezeigt wird.
  4. Ihre Benutzeroberfläche liest Live-Kontext von Fusion, z. B. den aktuellen Benutzer, die Organisation und das Team, und reagiert, wenn der Benutzer die Organisation oder das Team wechselt.
  5. Die Erweiterung wurde veröffentlicht, damit sie andere Benutzende in Ihrer Organisation sehen können.

Inhaltsverzeichnis

Lesen Sie die Seiten das erste Mal in der richtigen Reihenfolge. Später können Sie direkt zu dem springen, den Sie benötigen.

#
Seite
Was es abdeckt
1
Überblick und Schlüsselkonzepte
Das Vokabular, die Architektur und wofür jeder Fusion-Erweiterungspunkt bestimmt ist.
2
Richten Sie Ihre Tools und Ihr Adobe-Konto ein
Node.js, die Adobe I/O-CLI, die Anmeldung und die Erstellung Ihres Projekts in der Adobe Developer Console.
3
Erstellen Sie das Projekt und konfigurieren Sie es für Fusion
Generieren Sie ein generisches App Builder-Projekt mit der aio Befehlszeile (keine produktspezifische Vorlage). Verweisen Sie dann Ihr Projekt auf einen Fusion-Erweiterungspunkt und registrieren Sie Ihr Widget.
5
Erstellen der Benutzeroberfläche
Rendern Sie Ihren benutzerdefinierten Bildschirm und schließen Sie die Verbindung („Handshake„) mit Fusion ab.
6
Die Fusion-Kontextreferenz
Jedes Feld sendet Ihnen, was es bedeutet und wie Sie auf Änderungen reagieren können.
7
Veröffentlichen Sie Ihre Erweiterung
Erstellen, Bereitstellen und Anzeigen der Erweiterung in Fusion.
8
Fehlerbehebung
Korrekturen der häufigsten Fehler.
9
Anleitung zur Demo
Ein lineares Skript zum Kopieren und Einfügen: Strukturvorlage aus der generischen Experience Cloud-Shell-Vorlage → erneut auf Fusion ausgerichtet → für die Staging-→ in Fusion bereitgestellt. Am besten für eine Live-Demo.
10
Aufrufen von Workfront- und Fusion-APIs
Rufen Sie Backend-APIs über Ihre Erweiterung auf, ohne das CORS des Browsers zu erreichen, indem Sie einen Laufzeitaktions-Proxy verwenden. Behandelt require-adobe-auth, Fusion v3-Kopfzeilen und ein Beispiel.

Hinweis zur Verfügbarkeit

Fusion legt derzeit diese Erweiterungspunkte offen:

  • fusion/nav-organization/1 — wird im Abschnitt Organisation angezeigt.
  • fusion/nav-team/1 — wird im Abschnitt Team angezeigt.

Bevor Sie eine dieser Erweiterungspunkte veröffentlichen können, muss der Erweiterungspunkt für Ihr Adobe-Unternehmen integriert werden. Wenn beim Veröffentlichungsschritt nicht angegeben wird, dass der Erweiterungspunkt „nicht vorhanden“ ist, finden Sie weitere Informationen unter Fehlerbehebung.

Offizielle Adobe-Dokumentation

Dieses Handbuch ist für Fusion spezifisch. Für die zugrunde liegende Plattform lauten die kanonischen Referenzen:

recommendation-more-help
workfront-fusion-help-workfront-fusion