UI Extensibility overview
UI Extensibility allows you to bring your custom logic and UI (user interface) into Adobe Workfront Fusion. By using Adobe App Builder, you can modify your organization’s Workfront Fusion experience to better meet the needs of the organization, while still relying on the core functionality of Fusion.
This article gives an overview of UI Extensibility and how your custom extension communicates with Workfront Fusion.
Extension structure
Hosts and Guests
Fusion can display UI that was not created by the Workfront Fusion team. To ensure that these UI changes do not affect the core functionality of Fusion, the UI runs in its own isolated browser frame (an <iframe>), completely separate from Fusion’s code.
- Host: The application that contains the extension. Here, that is Fusion. The host decides where extensions can appear and what data it will share with them.
- Guest: Your extension. It is a small web application that the host loads into an iframe.
When creating a UI Extension, you do not modify Fusion. You build and publish a guest, which Fusion can use after the guest is published.
The technology underneath
Your guest is built with two Adobe technologies:
- Adobe App Builder: A free hosting and tooling platform for small web apps and serverless actions. Your extension is an App Builder app. App Builder gives you a place to host your UI (on Adobe’s
*.adobeio-static.netcontent delivery network) and a command line tool calledaioto create, build, and publish it. - Adobe UI Extensibility SDK (UIX): The libraries that let the host and guest talk. You will use one package,
@adobe/uix-guest, on your side. Fusion uses the matching@adobe/uix-hostpackage on its side.
Extension points
An extension point is a named “slot” in the host where a guest is allowed to appear. Fusion defines its slots, and you choose which one the guest will use.
An extension point name has three parts: service/name/version.
Fusion offers the following extension points:
fusion/nav-organization/1fusion/nav-team/1fusionis the service (the product, Fusion).nav-organization/nav-teamis the name (the specific slot).1is the version.
One extension can implement one or both extension points. Most extensions use one point.
Based on which extension point is selected, Fusion adds a button with the extension’s title to the matching navigation section. Clicking it opens a dedicated page in Fusion’s main content area and loads your UI there.
Frames included in a UI Extension
When Fusion loads your guest, your extension runs in two frames:
- The registration frame (invisible). Runs first, in the background. The registration frame tells Fusion what your extension offers. For example, it may indicate that it has a dashboard widget, and send the widget’s title and the URL of its UI. The registration frame does this by calling
register(...). It renders no visible UI. - The UI frame (visible). This is the page Fusion shows to the user. It must announce itself to the host by calling
attach(...). If it never callsattach, Fusion waits and eventually times out with an error.
This example shows the flow when a user clicks the extension button.
-
The button is clicked.
-
Fusion loads your REGISTRATION frame (hidden).
code language-none register({ methods: { dashboard: { getWidget() {...} } } })getWidget()returns the URL of your visible UI -
Fusion loads your UI frame (visible) at that URL.
code language-none attach({ id })This is required, or Fusion times out
-
Fusion sends context, and your UI renders.
Both frames are written when you build the UI. The important thing is to remember that the visible page must call attach.
For more information on building the UI, see Build the custom extension UI.
Context from Fusion
After the extension is attached, Fusion shares a context object with your guest. It contains:
- User: The signed-in user’s Fusion profile and Adobe IMS user ID.
- Organization: The active organization’s full Fusion organization record and the Adobe IMS organization ID.
- Team: The active team, when applicable.
- Adobe IMS access token: This calls Adobe or Fusion APIs on the user’s behalf, if necessary.
Fusion also pushes updates. For example, if the user switches organization or team while your UI is open, Fusion sends the new context so your UI can react instantly.
For the complete list of context fields, see The Fusion context reference.
Creating a UI Extension
To create a UI Extension, follow these steps:
- Install tools and create an Adobe project.
- Generate a blank App Builder project, point it at a Fusion extension point and register your widget.
- Build the UI and connect to Fusion.
- Use the context Fusion sends.
- Publish so Fusion can find it.
- (Optional) Call Workfront/Fusion APIs for real data without CORS.
To begin the process, go to Set up your tools and Adobe account.