Creare applicazioni personalizzate per Workfront con Adobe App Builder

Le estensioni dell’interfaccia utente di Workfront, basate su Adobe App Builder, consentono a clienti e partner di creare esperienze utente personalizzate. Questi strumenti migliorano l’efficienza, forniscono esperienze integrate e connesse, migliorano in modo significativo la soddisfazione degli utenti e aiutano le aziende a realizzare la loro visione unica.

Ad esempio, senza le estensioni dell’interfaccia utente di Workfront, un project manager potrebbe dover passare da Workfront a un sistema di tracciamento del tempo separato per registrare le ore. Con le estensioni dell’interfaccia utente, il tracciamento del tempo può essere integrato direttamente nell’esperienza Workfront, semplificando il flusso di lavoro e risparmiando tempo. Inoltre, puoi aggiungere componenti personalizzati per migliorare l’usabilità, automatizzare attività ripetitive e migliorare la gestione dei contenuti con funzioni quali l’assegnazione di tag dei metadati e le anteprime dei contenuti. Adobe App Builder offre anche scalabilità e gestione affidabile delle identità (IMS), garantendo una personalizzazione sicura ed efficiente su qualsiasi scala.

Le estensioni dell’interfaccia utente di Workfront offrono diversi vantaggi chiave:

Dopo aver creato un’applicazione in Adobe App Builder, un amministratore di Workfront può aggiungerla al menu principale e al pannello di navigazione a sinistra di Workfront utilizzando i modelli di layout. L’utente con il modello di layout che fa clic sull’applicazione visualizza quest’ultima incorporata in Workfront, invece di aprirla separatamente.

Questo articolo descrive come accedere ad App Builder e utilizzare un modello per creare un’applicazione.

Per informazioni sull'aggiunta di un'applicazione personalizzata ai modelli di layout, vedere Personalizzare il menu principale utilizzando un modello di layout e Personalizzare il pannello sinistro utilizzando un modello di layout.

Prerequisiti

Devi avere i seguenti:

Accedere ad Adobe App Builder

Per creare le estensioni dell’interfaccia utente, devi avere accesso ad Adobe App Builder in Adobe Developer Console.

Ulteriori istruzioni sono disponibili nel sito Adobe Developer.

Aggiungere sviluppatori a Adobe Admin Console

Accedere ad App Builder

Per acquistare App Builder, le organizzazioni devono collaborare con i rispettivi account manager.

Se AppBuilder è configurato correttamente, come parte della creazione di un nuovo progetto dovresti vedere Crea progetto da modello.

Creare un nuovo progetto in Adobe Developer Console

Per creare l’estensione dell’interfaccia utente, devi utilizzare Adobe Developer Console.

Ulteriori istruzioni sono disponibili nel sito Adobe Developer.

Utilizzare Adobe Developer (aio) CLI

Adobe fornisce una CLI open source che puoi utilizzare per creare l’applicazione App Builder.

Ulteriori istruzioni sono disponibili su GitHub e sul sito Adobe Developer:

Per ulteriori informazioni sulle cartelle e sui file del progetto, visitare il sito Adobe Developer.

Creare le estensioni in VSCode

La configurazione del file App.js è necessaria per abilitare la navigazione tramite il menu principale di Workfront o la navigazione secondaria (pannello a sinistra).

Per visualizzare le estensioni nei modelli di layout di Workfront è necessaria la configurazione del file ExtensionRegistration.js.

Gli esempi seguenti mostrano come aggiungere applicazioni personalizzate al menu principale di Workfront e al pannello sinistro di un oggetto, utilizzando le estensioni dell’interfaccia utente.

Configurare ExtensionRegistration.js

Per consentire applicazioni personalizzate nel menu principale di Workfront:

Consenti applicazioni personalizzate nel pannello di navigazione a sinistra di Workfront

Per consentire l’utilizzo di applicazioni personalizzate nel pannello di navigazione a sinistra di Workfront:

Incorporare un’app utilizzando un modulo personalizzato Workfront

Il punto di estensione dei widget per moduli è una funzionalità di estensione dell’interfaccia utente di Adobe Workfront che consente di creare widget personalizzati da incorporare nei moduli personalizzati di Workfront. A differenza di altri punti di estensione che aggiungono elementi di navigazione o opzioni di menu, i widget consentono di visualizzare contenuto personalizzato in pannelli dedicati all’interno di campi modulo personalizzati.

I widget sono componenti dell’interfaccia utente modulari che possono essere aggiunti ai moduli personalizzati di Workfront come campi modulo. Offrono un modo per far emergere funzionalità personalizzate, visualizzazioni di dati o contenuti esterni direttamente all’interno delle interfacce dei moduli personalizzati, consentendo agli utenti di interagire con la logica personalizzata durante la compilazione dei moduli.

Configurare un'estensione widget

Analogamente ai punti di estensione dell'interfaccia utente per il menu principale e la navigazione secondaria, il punto di estensione "widget" è configurato all'interno dell'oggetto metodi del componente ExtensionRegistration in genere nel campo ExtensionRegistration.js. Ciò significa che l'utilizzo del widget moduli richiede solo l'aggiunta di un elemento "widget" in extesionregistration con un percorso valido nell'app.js:

javascript


Apply to ExtensionReg...

widgets: {

  getItems() {

    return [

      {

        id: "test2",

        url: "/index.html#/widgets1",

        label: "Test Widget with dimensions",

        dimensions: {

          height: 450,

          width: 300,

          maxHeight: 600,

          maxWidth: 400,

        },

      },

      {

        id: "test",

        url: "/index.html#/widgets1",

        label: "Test Widget without dimensions",

      },

    ];

  },

},

Proprietà configurazione widget

Proprietà obbligatorie

Proprietà facoltative

Proprietà Dimension

L'oggetto dimensioni consente di controllare le dimensioni e i vincoli di layout del widget:

Esempio di configurazioni Dimension

// Fixed size widget

dimensions: {

  height: 300,

  width: 250,

}

// Flexible height with width constraint

dimensions: {

  width: 300,

  maxHeight: 500,

}

// Height constraint only

dimensions: {

  height: 400,

  maxWidth: 350,

}

// No dimensions - uses default sizing

{}

Dati contestuali

I widget hanno accesso allo stesso contesto condiviso di altri punti di estensione, tra cui:

Aggiungere un widget a un modulo personalizzato di Workfront

Un’app può essere incorporata in un modulo personalizzato Workfront utilizzando il tipo di campo "Estensioni dell’interfaccia utente". Dopo aver aggiunto il campo, seleziona un widget moduli, l'elenco dei widget si basa sulle app attive nell'organizzazione IMS o nell'applicazione attiva a livello locale quando extensionoverride=TRUE.

Configurare App.js

Per ulteriori informazioni sullo sviluppo e l'esecuzione dell'applicazione, visitare il sito per sviluppatori Adobe.

Contesto condiviso

Il contesto condiviso viene utilizzato per condividere i dati da Workfront a un’estensione dell’interfaccia utente. I dati disponibili nel contesto condiviso includono i dati utente e il contesto dell'applicazione.

Utente

Le estensioni dell’interfaccia utente di Workfront condividono i dati degli utenti. L’oggetto utente disponibile tramite il contesto condiviso include un ID utente Workfront e l’indirizzo e-mail dell’utente.

user = (conn?.sharedContext?.get("user")); // {ID: '1', email: 'test@aaa.com'} userID = user.ID userEmail = user.email

Contesto dell’applicazione

Quando si aggiunge un’applicazione personalizzata utilizzando un punto di estensione Navigazione secondaria, in genere l’applicazione personalizzata utilizza dati contestuali come un ID progetto o un ID documento. Per questi dati, il contesto condiviso include un codice oggetto e un ID oggetto.

Esempio per ottenere il contesto dell'applicazione per i documenti:

context = conn?.sharedContext; // Using the connection created above, grab the document details from the host tunnel. // conn?.host?.document?.getDocumentDetails().then(setDocDetails);

Testare l’app in Workfront

Durante lo sviluppo dell’applicazione App Builder per Workfront, potrebbe essere necessario testare l’app all’interno di Workfront senza pubblicarla.

Nell'app App Builder puoi avviare aio app run per lo sviluppo locale. Questo fornisce un URL, in genere qualcosa come https://localhost:9080. In alternativa, è possibile eseguire aio app deploy per ottenere un dominio Adobe statico. Assicurati di prendere nota di questi URL per utilizzi futuri.

Quindi, passa alla pagina specifica su cui desideri sviluppare nel browser. Apri gli strumenti per sviluppatori e accedi all’archiviazione locale per workfront.com o workfront.adobe.com. In questo caso, devi aggiungere una voce. Utilizza extensionOverride come chiave e l'URL App Builder indicato in precedenza come valore.

Se la configurazione è stata completata correttamente, quando ricarichi la pagina del modello di layout in Workfront, verranno visualizzati i pulsanti dell’applicazione App Builder. Aggiungi i pulsanti dell’app al menu principale e al pannello sinistro per un oggetto e verifica che vengano visualizzati correttamente in tali aree.

Istruzioni aggiuntive sono disponibili sul sito Adobe Developer, utilizzando un esempio da AEM: https://developer.adobe.com/uix/docs/guides/preview-extension-locally/

Disattiva il flag per consentire i test locali su Chrome versione 142 e successive

In Chrome versione 142 sono state introdotte le limitazioni di accesso alla rete locale. Queste restrizioni possono interferire con gli ambienti di test locali.

Per risolvere il problema, è necessario disabilitare il controllo dell'accesso alla rete locale disattivando il flag corrispondente nelle impostazioni di Chrome: chrome://flags/#local-network-access-check.

Per disattivare il flag

Pubblicare le applicazioni e approvare l’invio

Per pubblicare l'applicazione e approvarla, seguire le istruzioni del sito Adobe Developer.