Estensioni UI personalizzate: indice dell’articolo

Fusion può visualizzare la tua interfaccia web all’interno della stessa. Puoi creare una piccola app web, denominata estensione, pubblicarla in Adobe e visualizzarla come pulsante nella navigazione di Fusion. Quando un utente fa clic su di essa, l’interfaccia utente si carica nell’area principale di Fusion e riceve automaticamente informazioni su chi ha effettuato l’accesso, in quale organizzazione e team lavora e altro ancora.

Questa sezione della documentazione di fusion illustra l’intero processo senza presupporre un’esperienza precedente con Adobe App Builder o con i framework front-end. Comprende anche il codice necessario, insieme alle relative spiegazioni.

Quando utilizzare questa guida

Utilizzate questa guida per aggiungere una schermata o uno strumento personalizzato a Fusion. Non è necessario essere uno sviluppatore esperto. È necessario avere familiarità con la copia dei comandi in un terminale e la modifica di alcuni file di testo.

Per creare un’estensione dell’interfaccia utente personalizzata, è necessario disporre di un Adobe ID e di un accesso a un’organizzazione Adobe (lo stesso tipo di accesso che si utilizza per accedere a Fusion).

Cosa verrà creato

Al termine di questa guida avrai:

  1. Un progetto Adobe App Builder gratuito. Qui è dove vive la tua estensione.
  2. Una piccola app web che esegue il rendering dell’interfaccia utente personalizzata.
  3. L’app web si è connessa a uno dei punti di estensione di Fusion in modo che venga visualizzata nella navigazione di Fusion.
  4. L’interfaccia utente legge il contesto live da Fusion, ad esempio l’utente corrente, l’organizzazione e il team, e reagisce quando l’utente cambia organizzazione o team.
  5. L’estensione pubblicata in modo che possa essere visualizzata da altri utenti dell’organizzazione.

Sommario

Leggi le pagine in ordine la prima volta. Successivamente puoi passare direttamente a quello di cui hai bisogno.

#
Pagina
Cosa copre
1
Panoramica e concetti chiave
Il vocabolario, l’architettura e lo scopo di ciascun punto di estensione di Fusion.
2
Configura i tuoi strumenti e l’account Adobe
Node.js, Adobe I/O CLI, accesso e creazione del progetto in Adobe Developer Console.
3
Crea il progetto e configuralo per Fusion
Genera un progetto App Builder generico con la riga di comando aio (non un modello specifico per il prodotto). Quindi, puntare il progetto a un punto di estensione Fusion e registrare il widget.
5
Generare l’interfaccia utente
Esegui il rendering della schermata personalizzata e completa la connessione (“handshake”) con Fusion.
6
Riferimento al contesto di Fusion
Ogni campo che Fusion invia, cosa significa e come reagire ai cambiamenti.
7
Pubblica la tua estensione
Genera, distribuisci e rendi visibile l’estensione in Fusion.
8
Risoluzione dei problemi
Correzioni per gli errori più comuni.
9
Procedura dettagliata per la demo
Uno script lineare di copia e incolla: scaffold dal modello generico di Experience Cloud Shell → il retargeting a Fusion → la distribuzione nell’ambiente di staging → l’esecuzione in Fusion. Ideale per una demo dal vivo.
10
Chiamata delle API Workfront e Fusion
Chiama le API back-end dall’estensione senza premere CORS del browser, utilizzando un proxy runtime-action. Include require-adobe-auth, intestazioni Fusion v3 e un esempio elaborato.

Nota sulla disponibilità

Fusion attualmente espone i seguenti punti di estensione:

  • fusion/nav-organization/1 — viene visualizzato nella sezione Organizzazione.
  • fusion/nav-team/1 — viene visualizzato nella sezione Team.

Prima di poter pubblicare su uno di questi, è necessario eseguire l’onboarding del punto di estensione per la tua organizzazione Adobe. Se il passaggio di pubblicazione non riesce e il punto di estensione “non esiste”, vedi Risoluzione dei problemi.

Documentazione ufficiale di Adobe

Questa guida è specifica per Fusion. Per la piattaforma sottostante, i riferimenti canonici sono:

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