Custom UI extensions: article index

Fusion can display your own web UI inside its interface. You build a small web app, called an extension, publish it to Adobe, and it appears as a button in Fusion’s navigation. When a user clicks it, your UI loads in the main area of Fusion and automatically receives information about who is signed in, which organization and team they are working in, and more.

This section of the fusion documentation walks you through the whole process, without assuming prior experience with Adobe App Builder or front-end frameworks. It also includes necessary code, along with explanations of that code.

When to use this guide

Use this guide if you want to add a custom screen or tool to Fusion. You do not need to be an expert developer. You do need to be comfortable copying commands into a terminal and editing a few text files.

To create a custom UI extension, you will need an Adobe ID and access to an Adobe organization (the same kind of access you use to sign in to Fusion).

What you will build

By the end of this guide you will have:

  1. A free Adobe App Builder project. This is where your extension lives.
  2. A small web app that renders your custom UI.
  3. That web app connected to one of Fusion’s extension points so it appears in the Fusion navigation.
  4. Your UI reading live context from Fusion, such as current user, organization, and team, and reacting when the user switches org or team.
  5. The extension published so other users in your organization can see it.

Table of contents

Read the pages in order the first time. Later you can jump straight to the one you need.

#
Page
What it covers
1
Overview and key concepts
The vocabulary, the architecture, and what each Fusion extension point is for.
2
Set up your tools and Adobe account
Node.js, the Adobe I/O CLI, signing in, and creating your project in the Adobe Developer Console.
3
Create the project and configure it for Fusion
Generate a generic App Builder project with the aio command line (not a product-specific template). Then, point your project at a Fusion extension point and register your widget.
5
Build the UI
Render your custom screen and complete the connection (“handshake”) with Fusion.
6
The Fusion context reference
Every field Fusion sends you, what it means, and how to react to changes.
7
Publish your extension
Build, deploy, and make your extension visible in Fusion.
8
Troubleshooting
Fixes for the most common errors.
9
Demo walkthrough
One linear, copy-paste script: scaffold from the generic Experience Cloud Shell template → retarget to Fusion → deploy to Stage → run in Fusion. Best for a live demo.
10
Calling Workfront and Fusion APIs
Call backend APIs from your extension without hitting browser CORS, using a runtime-action proxy. Covers require-adobe-auth, Fusion v3 headers, and a worked example.

Availability note

Fusion currently exposes these extension points:

  • fusion/nav-organization/1 — appears under the Organization section.
  • fusion/nav-team/1 — appears under the Team section.

Before you can publish against one of these, the extension point must be onboarded for your Adobe organization. If your publish step fails saying the extension point “does not exist,” see Troubleshooting.

Official Adobe documentation

This guide is Fusion-specific. For the underlying platform, the canonical references are:

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