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.net di Adobe) e uno strumento da riga di comando denominato aio per 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-host corrispondente 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:

Punto di estensione
Dove viene visualizzata l’interfaccia utente in Fusion
Quando utilizzarlo
fusion/nav-organization/1
Nella sezione Organizzazione della navigazione a sinistra.
Il tuo strumento riguarda l’intera organizzazione.
fusion/nav-team/1
Nella sezione Team della barra di navigazione a sinistra (visualizzata quando è selezionato un team).
Il tuo strumento riguarda un team specifico.
  • fusion è 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

IMPORTANT
Questa sezione descrive un aspetto delle estensioni dell’interfaccia utente che può causare confusione. Consigliamo di leggerlo attentamente.

Quando Fusion carica il guest, l’estensione viene eseguita in due frame:

  1. 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.
  2. Frame dell’interfaccia utente (visibile). Questa è la pagina che Fusion mostra all’utente. Deve annunciarsi all’host chiamando attach(...). Se non chiama mai attach, Fusion attende e alla fine scade con un errore.

Questo esempio mostra il flusso quando un utente fa clic sul pulsante di estensione.

  1. Fai clic sul pulsante.

  2. Fusion carica il riquadro REGISTRATION (nascosto).

    code language-none
    register({ methods: { dashboard: { getWidget() {...} } } })
    

    getWidget() restituisce l’URL dell’interfaccia utente visibile

  3. 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

  4. 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:

Per iniziare il processo, vai a Configura i tuoi strumenti e l’account Adobe.

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