Create a project for UI Extensibility

Open a terminal.

In the terminal, move to the folder where you keep projects.

Run:

aio app init my-fusion-extension --standalone-app

• my-fusion-extension is the folder/app name. You can select this name, but use lowercase letters, hyphens, and no spaces.
• --standalone-app tells the CLI to create a plain application skeleton instead of asking you to pick a product template. This is the key to avoiding the AEM (or any other) template.

When prompted, select your Organization (if you belong to more than one).

When prompted, select Create new project and accept the suggested name, or pick an existing empty project.

The command sets up the Stage and Production workspaces automatically.

The command also generates files into the my-fusion-extension folder and runs npm install.

Continue to Confirm project creation.

In the terminal, move into the created folder:

cd my-fusion-extension

You should see a structure similar to this (some files omitted):

my-fusion-extension/
|--- app.config.yaml   // main configuration (you will edit this)
|---  package.json   //dependencies and scripts
|---  src/    // your source code
|---  web-src/  or  src/.../web-src/  // front-end files (HTML/JS)

The two files you care about most are:

• app.config.yaml: The central configuration. Later in the process you will add an extensions: section here that connects your app to a Fusion extension point.
• package.json: Lists the libraries your app uses. You will add the Adobe UI Extensibility guest library here.

Continue to Add required libraries.

In the terminal, run:

npm install @adobe/uix-guest @adobe/react-spectrum

(Conditional) If your generated project does not already include React, also install it:

npm install react react-dom react-router-dom

Continue to Confirm the project builds.

In the terminal, run:

aio app build

If this completes without errors, your tools and project are correctly configured. You are ready to connect the project to Fusion.

Continue to Configure the project for Fusion.

Create your files so the project looks like this:

my-fusion-extension/
|-- app.config.yaml
|-- src/
       |-- fusion-nav-organization-1/          // one folder per extension point
          |-- ext.config.yaml
          |-- web-src/
             |-- src/
                |-- components/
                   |-- App.js
                   |-- ExtensionRegistration.js
                   |-- DashboardWidget.js
                   |-- Constants.js

We recommend naming the folder after the extension point (fusion-nav-organization-1). The exact name is up to you, but it must match what you reference in app.config.yaml.

Continue to Declare the extension point in app.config.yaml.

Open app.config.yaml and update its contents to:

extensions:
  fusion/nav-organization/1:
    $include: src/fusion-nav-organization-1/ext.config.yaml

These contents describe the following:

• extensions:: This app implements one or more extension points.
• fusion/nav-organization/1: The Fusion slot you are plugging into. The name must match exactly, including version 1.
• $include:: This points to a second config file (created in the next step) that describes this extension’s contents. Keeping it in a separate file keeps app.config.yaml clean and lets you add more extension points later.

extensions:
      fusion/nav-organization/1:
        $include: src/fusion-nav-organization-1/ext.config.yaml
      fusion/nav-team/1:
        $include: src/fusion-nav-team-1/ext.config.yaml

1. Continue to Describe the extension in ext.config.yaml

Create src/fusion-nav-organization-1/ext.config.yaml with:

operations:
   view:
    - type: web
      impl: index.html
web: web-src
hooks:
  pre-app-build: node node_modules/@adobe/uix-guest/scripts/generate-metadata.js
   pre-app-run: node node_modules/@adobe/uix-guest/scripts/generate-metadata.js

These contents describe the following:

• operations.view: Declares that your extension provides a view (a visible UI), served from index.html. This is what makes your extension show a screen rather than run only in the background.
• web: web-src: The folder that holds your front-end files. App Builder builds everything under here and hosts it on Adobe’s Content Delivery Network (CDN).
• hooks: Small commands that run automatically at build/run time. The generate-metadata.js script ships with @adobe/uix-guest, and produces an app-metadata.json file that your registration code needs (see Step 4). You do not write this script; you just reference it.

Continue to Set a stable extension ID.

Create src/fusion-nav-organization-1/web-src/src/components/Constants.js:

module.exports = {
  extensionId: 'my-fusion-extension'
};

Use the same value everywhere your code refers to the extension id.

Continue to Register your widget.

Create src/fusion-nav-organization-1/web-src/src/components/ExtensionRegistration.js.
The important part is the register(...) call:

import { register } from "@adobe/uix-guest";
import metadata from "../../../../app-metadata.json";
import { extensionId } from "./Constants";

async function init() {
  await register({
    id: extensionId,
    metadata,
    methods: {
      dashboard: {
        getWidget() {
          return {
            id: extensionId,
            title: "My Fusion tool",        // shown on the Fusion nav button
            description: "What this tool does",
            url: "/index.html#/my-widget",  // route to your visible UI
            hideWidgetHeader: false          // false = Fusion shows the title
          };
        }
      }
    }
   });
}

init().catch(console.error);

Key points:

• title is the label Fusion puts on the navigation button. If hideWidgetHeader is false, Fusion also shows the title as a header above your UI.
• url is the route to your visible UI inside this same app. Here it is a hash route (#/my-widget) handled by your front-end router (set up on the next page). It must resolve to the component that renders your screen.
• metadata comes from app-metadata.json, which the generate-metadata hook creates for you at build time. Import it as shown.
• The dashboard.getWidget method name is the agreed contract Fusion calls to discover your widget. Keep the dashboard namespace and getWidget name.