Création d’applications personnalisées pour Workfront avec Adobe App Builder

Les extensions d’interface utilisateur de Workfront, optimisées par Adobe App Builder, permettent aux clients et aux partenaires de créer des expériences utilisateur personnalisées. Ces outils améliorent l’efficacité, offrent des expériences connectées transparentes, améliorent considérablement la satisfaction des utilisateurs et aident les entreprises à réaliser leur vision unique.

Par exemple, sans les extensions de l’interface utilisateur de Workfront, un gestionnaire de projet peut avoir besoin de basculer entre Workfront et un système de suivi temporel distinct pour consigner les heures. Avec les extensions de l’interface utilisateur, le suivi du temps peut être intégré directement à l’expérience Workfront, ce qui simplifie le workflow et permet de gagner du temps. Vous pouvez également ajouter des composants personnalisés pour améliorer la convivialité, automatiser les tâches répétitives et améliorer la gestion de contenu grâce à des fonctionnalités telles que le balisage des métadonnées et les aperçus de contenu. Adobe App Builder offre également l’évolutivité et une gestion des identités (IMS) robuste, assurant ainsi une personnalisation sécurisée et efficace à n’importe quelle échelle.

Les extensions de l’interface utilisateur de Workfront offrent plusieurs avantages clés :

Une fois l’application créée dans Adobe App Builder, un administrateur ou une administratrice Workfront peut l’ajouter au menu principal de Workfront et au panneau de navigation de gauche à l’aide de modèles de disposition. Un utilisateur disposant du modèle de mise en page qui clique sur l’application voit l’application incorporée dans Workfront au lieu de devoir l’ouvrir séparément.

Cet article décrit comment accéder à App Builder et utiliser un modèle pour créer une application.

Pour plus d’informations sur l’ajout d’une application personnalisée aux modèles de mise en page, voir Personnaliser le menu principal à l’aide d’un modèle de mise en page et Personnaliser le panneau de gauche à l’aide d’un modèle de mise en page.

Conditions préalables

Vous devez disposer des éléments suivants :

Accès à Adobe App Builder

Pour créer des extensions d’interface utilisateur, vous devez avoir accès à Adobe App Builder dans Adobe Developer Console.

Des instructions supplémentaires sont disponibles sur le site Adobe Developer.

Ajout de développeurs au Adobe Admin Console

Obtenir l’accès à App Builder

Les entreprises doivent collaborer avec leurs gestionnaires de compte pour acheter App Builder.

Si AppBuilder est correctement configuré, vous devriez voir Créer un projet à partir d’un modèle dans le cadre de la création d’un projet.

Création d’un projet dans le Adobe Developer Console

Vous devez utiliser Adobe Developer Console pour créer votre extension d’interface utilisateur.

Des instructions supplémentaires sont disponibles sur le site Adobe Developer.

Utilisation de l’interface de ligne de commande Adobe Developer (aio)

Adobe fournit une interface de ligne de commande open source que vous pouvez utiliser pour créer l’application App Builder.

Des instructions supplémentaires sont disponibles sur GitHub et sur le site d’Adobe Developer :

Pour plus d’informations sur les dossiers et fichiers de votre projet, consultez le site d’Adobe Developer.

Création des extensions dans VSCode

La configuration du fichier App.js est requise pour activer la navigation via le menu principal de Workfront ou la navigation secondaire (panneau de gauche).

La configuration du fichier ExtensionRegistration.js est requise pour afficher les extensions dans les modèles de disposition Workfront.

Les exemples suivants vous montrent comment ajouter des applications personnalisées au menu principal de Workfront et au panneau de gauche d’un objet à l’aide des extensions d’interface utilisateur.

Configuration d’ExtensionRegistration.js

Pour autoriser les applications personnalisées dans le menu principal de Workfront :

Autoriser les applications personnalisées dans la navigation du panneau de gauche de Workfront

Pour autoriser les applications personnalisées dans le volet de navigation de gauche de Workfront, procédez comme suit :

Incorporation d’une application à l’aide d’un formulaire personnalisé Workfront

Le point d’extension du widget de formulaires est une fonctionnalité d’extension de l’interface utilisateur d’Adobe Workfront qui vous permet de créer des widgets personnalisés pouvant être incorporés dans les formulaires personnalisés de Workfront. Contrairement aux autres points d’extension qui ajoutent des éléments de navigation ou des options de menu, les widgets permettent d’afficher du contenu personnalisé dans des panneaux dédiés, dans des champs de formulaire personnalisés.

Les widgets sont des composants modulaires de l’interface utilisateur qui peuvent être ajoutés aux formulaires personnalisés de Workfront en tant que champs de formulaire. Ils permettent d’afficher des fonctionnalités personnalisées, des visualisations de données ou du contenu externe directement dans des interfaces de formulaire personnalisées, ce qui permet aux utilisateurs et aux utilisatrices d’interagir avec une logique personnalisée lors du remplissage de formulaires.

Configuration d’une extension de widget

Comme les points d’extension de l’interface utilisateur pour le menu principal et la navigation secondaire, le point d’extension « widgets » est configuré dans l’objet de méthodes du composant ExtensionRegistration, généralement dans le champ ExtensionRegistration.js . Cela signifie que l’utilisation du widget Forms nécessite uniquement l’ajout d’un élément « widget » dans extesionregistration avec un itinéraire valide dans votre 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",

      },

    ];

  },

},

Propriétés de configuration du widget

Propriétés requises

Propriétés facultatives

Propriétés Dimension

L’objet dimensions vous permet de contrôler les contraintes de taille et de disposition de votre widget :

Exemples de configurations 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

{}

Données contextuelles

Les widgets ont accès au même contexte partagé que les autres points d’extension, notamment :

Ajout d’un widget à un formulaire personnalisé Workfront

Une application peut être incorporée dans un formulaire personnalisé Workfront à l’aide du type de champ « Extensions de l’interface utilisateur ». Une fois que vous avez ajouté le champ, sélectionné un widget de formulaires, la liste des widgets est basée sur les applications actives dans votre organisation IMS ou l’application localement active, le cas extensionoverride=TRUE.

Configuration d’App.js

Pour plus d’informations sur le développement et l’exécution de l’application, consultez le site du développeur Adobe.

Contexte partagé

Le contexte partagé est utilisé pour partager des données de Workfront vers une extension d’interface utilisateur. Les données disponibles via le contexte partagé comprennent les données utilisateur et le contexte de l’application.

l’utilisateur ou de l’utilisatrice

Les extensions d’interface utilisateur de Workfront partagent des données utilisateur. L’objet utilisateur disponible via le contexte partagé comprend un ID utilisateur Workfront et l’adresse électronique de l’utilisateur.

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

Contexte applicatif

Lors de l’ajout d’une application personnalisée à l’aide d’un point d’extension de navigation Secondaire, il est courant que l’application personnalisée utilise des données contextuelles comme un identifiant de projet ou de document. Pour ces données, le contexte partagé comprend un code objet et un ID objet.

Voici un exemple d'obtention du contexte applicatif pour les documents :

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

Tester l’application dans Workfront

Lors du développement de votre application App Builder pour Workfront, vous devrez peut-être tester votre application dans Workfront sans la publier.

Dans votre application App Builder, vous pouvez lancer des aio app run de développement local. Vous obtenez ainsi une URL, généralement de type https://localhost:9080. Vous pouvez également exécuter aio app deploy pour obtenir un domaine Adobe statique. Veillez à noter ces URL pour une utilisation ultérieure.

Ensuite, accédez à la page spécifique sur laquelle vous souhaitez développer dans votre navigateur. Ouvrez les outils de développement et accédez au stockage local pour workfront.com ou workfront.adobe.com. Ici, vous devez ajouter une entrée. Utilisez extensionOverride comme clé et l’URL App Builder mentionnée précédemment comme valeur.

Si la configuration a été correctement effectuée, les boutons de votre application App Builder s’affichent lorsque vous rechargez la page du modèle de mise en page dans Workfront. Ajoutez les boutons d’application au menu principal et au panneau de gauche d’un objet et vérifiez qu’ils s’affichent correctement dans ces zones.

Des instructions supplémentaires sont disponibles sur le site d’Adobe Developer, à l’aide d’un exemple d’AEM : https://developer.adobe.com/uix/docs/guides/preview-extension-locally/ .

Désactivez l’indicateur pour autoriser les tests locaux sur Chrome version 142 et ultérieures.

La version 142 de Chrome introduit des restrictions d’accès au réseau local. Ces restrictions peuvent interférer avec les environnements de test locaux.

Pour résoudre le problème, vous devez désactiver la vérification d’accès au réseau local en désactivant l’indicateur correspondant dans les paramètres de Chrome : chrome://flags/#local-network-access-check.

Pour désactiver l’indicateur

Publier les demandes et approuver l'envoi

Pour publier la demande et l'approuver, suivez les instructions sur le site Adobe Developer.