DocumentazioneAdobe Workfront Fusion

Creare l’interfaccia utente dell’estensione personalizzata

Ultimo aggiornamento: 19 agosto 2026
NOTE
Questo articolo presuppone una certa familiarità con gli strumenti di sviluppo software.

Questa procedura descrive come creare la schermata che gli utenti visualizzano e completare la connessione (“handshake”) con Fusion.

Durante questo processo, è importante ricordare che l’estensione viene eseguita in due frame: il frame registration nascosto e il frame UI visibile.

Per informazioni sui frame in relazione alle estensioni personalizzate, vedere Frame inclusi in un’estensione dell’interfaccia utente.

Per istruzioni sulla creazione del frame di registrazione, vedere Creare un progetto per l’estendibilità dell’interfaccia utente.

Instradamento tra i due fotogrammi

Entrambi i frame caricano lo stesso index.html; un piccolo router front-end decide quale componente mostrare in base all’URL.

  1. Impostare le route in web-src/src/components/App.js. La parte essenziale è:

    code language-jsx 
    import { HashRouter as Router, Routes, Route } from "react-router-dom";
import ExtensionRegistration from "./ExtensionRegistration";
import DashboardWidget from "./DashboardWidget";

export default function App() {
  return (
    <Router>
      <Routes>
        {/* Background frame: registers the extension with Fusion */}
        <Route index element={<ExtensionRegistration />} />
        <Route path="index.html" element={<ExtensionRegistration />} />

        {/* Visible frame: the URL you returned from getWidget() */}
        <Route path="my-widget" element={<DashboardWidget />} />
      </Routes>
    </Router>
  );
}

    Questi percorsi vengono mappati alla configurazione precedente come segue:

    • La route predefinita (index) esegue il rendering di ExtensionRegistration, il frame nascosto che chiama register(...).
    • La route my-widget esegue il rendering di DashboardWidget, la tua interfaccia utente visibile. Corrisponde al url: "/index.html#/my-widget" restituito da getWidget() in la pagina precedente.
    note
    NOTE
    Le route e l'URL getWidget devono essere concordi. Se si modifica il nome della route, modificare anche url oppure Fusion caricherà una pagina vuota.

  2. Continua con Completa l’handshake con attach.

Completa l’handshake con attach

Questa è la riga più importante nell’interfaccia utente visibile. Quando Fusion apre il frame dell’interfaccia utente, attende che venga eseguito il check-in del frame. Il codice archivia chiamando attach({ id }).

Se viene omesso, Fusion va in timeout con un errore come “in attesa del messaggio iniziale dall’iframe di destinazione.”

  1. Aggiungi quanto segue a web-src/src/components/DashboardWidget.js:

    code language-jsx 
    import { useEffect, useState } from "react";
import { attach } from "@adobe/uix-guest";
import { extensionId } from "./Constants";

export default function DashboardWidget() {
  const [connection, setConnection] = useState(null);

  useEffect(() => {
    // Tell Fusion this UI frame is ready. Required.
    attach({ id: extensionId })
      .then(setConnection)
      .catch((e) => console.error("attach failed", e));
  }, []);

  if (!connection) {
    return <p>Connecting to Fusion...</p>;
  }

  return <h2>Hello from my Fusion extension!</h2>;
}

    Questo codice esegue le operazioni seguenti:

    • attach({ id }) restituisce un oggetto connessione dopo che Fusion ha risposto. È consigliabile salvarlo, poiché lo utilizzerai nel passaggio successivo per leggere il contesto inviato da Fusion.
    • Fino a quando la connessione non si risolve, un breve “Collegamento…” viene visualizzato un messaggio.
    • Utilizza gli stessiextensionId impostati in Constants.js.

    A questo punto hai un’estensione di lavoro: registra, allega e mostra un messaggio. Tutto ciò che segue riguarda l’utilizzo dei dati forniti da Fusion.

  2. Continua con Leggi il contesto Condivisioni Fusion.

Leggere il contesto Condivisioni Fusion

Dopo l’associazione, la connessione espone un contesto condiviso con informazioni sull’utente, l’organizzazione e il team correnti. È possibile leggere singoli valori con connection.sharedContext.get("<key>"):

const orgId = connection.sharedContext.get("imsOrgId");
const organization = connection.sharedContext.get("organization"); // full Fusion org
const user = connection.sharedContext.get("user");                 // full Fusion user

Questo esempio mostra un esempio completo e reattivo che viene aggiornato anche quando l’utente cambia organizzazione o team:

import { useEffect, useState } from "react";
import { attach } from "@adobe/uix-guest";
import { extensionId } from "./Constants";

const KEYS = ["imsOrgId", "imsUserId", "organization", "team", "user"];

function readContext(source) {
  // sharedContext behaves like a Map (.get); the change event gives a plain object.
  const get =
    typeof source.get === "function" ? (k) => source.get(k) : (k) => source[k];
  return Object.fromEntries(KEYS.map((k) => [k, get(k)]));
}

export default function DashboardWidget() {
  const [context, setContext] = useState(null);

  useEffect(() => {
    let cleanup = () => {};
    attach({ id: extensionId })
      .then((connection) => {
        // 1) initial values
        setContext(readContext(connection.sharedContext));

        // 2) react to org/team/user changes pushed by Fusion
        const onChange = (event) =>
          setContext(readContext(event?.detail?.context ?? connection.sharedContext));
        connection.addEventListener("contextchange", onChange);
        cleanup = () => connection.removeEventListener?.("contextchange", onChange);
      })
      .catch((e) => console.error("attach failed", e));
    return () => cleanup();
  }, []);

  if (!context) return <p>Connecting to Fusion...</p>;

  return (
    <div>
      <h2>{context.organization?.name ?? "No organization"}</h2>
      <p>Signed in as {context.user?.name} ({context.user?.email})</p>
      <p>IMS org: {context.imsOrgId}</p>
    </div>
  );
}

Tenere presente quanto segue:

  • Leggi i valori iniziali da connection.sharedContext.get(key) subito dopo attach.
  • Iscriviti acontextchange per rimanere sincronizzato. Fusion attiva questo evento ogni volta che l’organizzazione, il team o l’utente attivi cambia. I nuovi valori arrivano il event.detail.context.

Per l’elenco completo delle chiavi e del contenuto di ciascuna chiave è incluso nel Riferimento al contesto di Fusion.

Per continuare il processo di configurazione dell’estensione personalizzata, passare a Riferimento al contesto di Fusion.

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