Panoramica sull’estensibilità dell’interfaccia utente
L’estensibilità dell’interfaccia utente consente di inserire in Adobe Workfront Fusion la logica e l’interfaccia utente personalizzate (interfaccia utente). Utilizzando Adobe App Builder, puoi modificare l’esperienza di Workfront Fusion della tua organizzazione per soddisfare al meglio le sue esigenze, pur affidandoti sempre alle funzionalità di base di Fusion.
Questo articolo offre una panoramica dell’estensibilità dell’interfaccia utente e del modo in cui l’estensione personalizzata comunica con Workfront Fusion.
Struttura delle estensioni
Host e ospiti
Fusion può visualizzare un’interfaccia utente che non è stata creata dal team di Workfront Fusion. Per garantire che queste modifiche non influiscano sulla funzionalità di base di Fusion, l’interfaccia utente viene eseguita nel proprio frame del browser isolato (un <iframe>), completamente separato dal codice di Fusion.
- Host: applicazione che contiene l’estensione. In questo caso è Fusion. L’host decide dove possono apparire le estensioni e quali dati condividere con loro.
- Guest: La tua estensione. Si tratta di una piccola applicazione web che l’host carica in un iframe.
Quando crei un’estensione dell’interfaccia utente, non modifichi Fusion. Puoi creare e pubblicare un guest, che Fusion può utilizzare dopo la pubblicazione del guest.
La tecnologia sottostante
Il tuo ospite è stato creato con due tecnologie Adobe:
- Adobe App Builder: piattaforma di hosting e strumenti gratuita per piccole app Web e azioni senza server. L’estensione è un’app App Builder. App Builder consente di ospitare l’interfaccia utente (nella rete di distribuzione dei contenuti
*.adobeio-static.netdi Adobe) e uno strumento da riga di comando denominatoaioper crearlo, generarlo e pubblicarlo. - Adobe UI Extensibility SDK (UIX): librerie che consentono all’host e al guest di comunicare. Verrà utilizzato un pacchetto,
@adobe/uix-guest, al tuo fianco. Fusion utilizza il pacchetto@adobe/uix-hostcorrispondente sul suo lato.
Punti di estensione
Un punto di estensione è uno “slot” denominato nell’host in cui è consentito visualizzare un ospite. Fusion ne definisce gli slot e scegli quale usare per il guest.
Il nome di un punto di estensione è composto da tre parti: service/name/version.
Fusion offre i seguenti punti di estensione:
fusion/nav-organization/1fusion/nav-team/1fusionè il servizio (il prodotto, Fusion).nav-organization/nav-teamè il nome (lo slot specifico).1è la versione.
Un’estensione può implementare uno o entrambi i punti di estensione. La maggior parte delle estensioni utilizza un punto.
In base al punto di estensione selezionato, Fusion aggiunge un pulsante con il titolo dell’estensione alla sezione di navigazione corrispondente. Facendo clic su di essa si apre una pagina dedicata nell’area del contenuto principale di Fusion, dove viene caricata l’interfaccia utente.
Frame inclusi in un’estensione dell’interfaccia utente
Quando Fusion carica il guest, l’estensione viene eseguita in due frame:
- Frame di registrazione (invisibile). Viene eseguito per primo, in background. Il frame di registrazione indica a Fusion cosa offre la tua estensione. Ad esempio, potrebbe indicare che dispone di un widget del dashboard e inviare il titolo del widget e l’URL della relativa interfaccia utente. Il frame di registrazione esegue questa operazione chiamando
register(...). Non viene visualizzata alcuna interfaccia utente. - Frame dell’interfaccia utente (visibile). Questa è la pagina che Fusion mostra all’utente. Deve annunciarsi all’host chiamando
attach(...). Se non chiama maiattach, Fusion attende e alla fine scade con un errore.
Questo esempio mostra il flusso quando un utente fa clic sul pulsante di estensione.
-
Fai clic sul pulsante.
-
Fusion carica il riquadro REGISTRATION (nascosto).
code language-none register({ methods: { dashboard: { getWidget() {...} } } })getWidget()restituisce l’URL dell’interfaccia utente visibile -
Fusion carica il frame dell’interfaccia utente (visibile) in corrispondenza di tale URL.
code language-none attach({ id })Questa operazione è obbligatoria oppure Fusion va in timeout
-
Fusion invia il contesto e i rendering dell’interfaccia utente.
Entrambi i fotogrammi vengono scritti quando si crea l’interfaccia utente. È importante ricordare che la pagina visibile deve chiamare attach.
Per ulteriori informazioni sulla creazione dell’interfaccia utente, vedere Creare l’interfaccia utente dell’estensione personalizzata.
Contesto da Fusion
Dopo aver collegato l’estensione, Fusion condivide un oggetto context con il tuo ospite. Contiene:
- Utente: il profilo Fusion dell’utente connesso e l’ID utente Adobe IMS.
- Organizzazione: il record completo dell’organizzazione attiva Fusion e l’ID organizzazione Adobe IMS.
- Team: il team attivo, se applicabile.
- Token di accesso Adobe IMS: chiama le API Adobe o Fusion per conto dell’utente, se necessario.
Anche Fusion invia gli aggiornamenti. Ad esempio, se l’utente cambia organizzazione o team mentre l’interfaccia utente è aperta, Fusion invia il nuovo contesto in modo che l’interfaccia utente possa reagire immediatamente.
Per l’elenco completo dei campi di contesto, vedere Riferimento al contesto di Fusion.
Creazione di un’estensione dell’interfaccia utente
Per creare un’estensione dell’interfaccia utente, effettua le seguenti operazioni:
- Installare gli strumenti e creare un progetto Adobe.
- Generare un progetto App Builder vuoto, posizionarlo in un punto di estensione Fusion e registrare il widget.
- Creare l’interfaccia utente e connettersi a Fusion.
- Utilizza il contesto inviato da Fusion.
- Pubblica in modo che Fusion possa trovarla.
- (Facoltativo) Chiama le API Workfront/Fusion per dati reali senza CORS.
Per iniziare il processo, vai a Configura i tuoi strumenti e l’account Adobe.