Extensions d’interface utilisateur personnalisées : index d’article

Fusion peut afficher votre propre interface utilisateur web dans son interface. Vous créez une petite application web, appelée extension, vous la publiez dans Adobe et elle s’affiche sous la forme d’un bouton dans la navigation de Fusion. Lorsqu’un utilisateur clique dessus, votre interface utilisateur s’affiche dans la zone principale de Fusion et reçoit automatiquement des informations sur la personne connectée, l’organisation et l’équipe dans lesquelles il travaille, etc.

Cette section de la documentation sur la fusion vous guide tout au long du processus, sans supposer une expérience préalable avec Adobe App Builder ou les structures front-end. Il comprend également le code nécessaire, ainsi que des explications de ce code.

Quand utiliser ce guide

Utilisez ce guide si vous souhaitez ajouter un écran ou un outil personnalisé à Fusion. Vous n’avez pas besoin d’être un développeur expert. Vous devez être à l’aise pour copier des commandes dans un terminal et modifier quelques fichiers texte.

Pour créer une extension d’interface utilisateur personnalisée, vous aurez besoin d’une Adobe ID et d’un accès à une organisation Adobe (le même type d’accès que celui que vous utilisez pour vous connecter à Fusion).

Ce que vous allez créer

À la fin de ce guide, vous aurez :

  1. Un projet Adobe App Builder gratuit. C’est là que réside votre extension.
  2. Petite application web qui effectue le rendu de votre interface utilisateur personnalisée.
  3. Cette application web s’est connectée à l’un des points d’extension de Fusion afin qu’elle apparaisse dans la navigation de Fusion.
  4. Votre interface utilisateur lit le contexte en direct à partir de Fusion, tel que l’utilisateur, l’organisation et l’équipe actuels, et réagit lorsque l’utilisateur change d’organisation ou d’équipe.
  5. L’extension a été publiée afin que d’autres utilisateurs de votre organisation puissent la voir.

Table des matières

Lisez les pages dans l’ordre la première fois. Plus tard, vous pouvez sauter directement à celui dont vous avez besoin.

#
Page
Ce qu’il couvre
1
Présentation et concepts clés
Le vocabulaire, l’architecture et l’utilité de chaque point d’extension Fusion.
2
Configurer vos outils et votre compte Adobe
Node.js, interface de ligne de commande d’Adobe I/O, connexion et création de votre projet dans Adobe Developer Console.
3
Créer le projet et le configurer pour Fusion
Générez un projet App Builder générique avec la ligne de commande aio (et non un modèle spécifique au produit). Ensuite, pointez votre projet vers un point d’extension Fusion et enregistrez votre widget.
5
Créer l’interface utilisateur
Effectuez le rendu de votre écran personnalisé et terminez la connexion (« poignée de main ») avec Fusion.
6
Référence du contexte de Fusion
Chaque champ que Fusion vous envoie, ce qu’il signifie et comment réagir aux modifications.
7
Publier votre extension
Créez, déployez et rendez votre extension visible dans Fusion.
8
Dépannage
Correctifs pour les erreurs les plus courantes.
9
Présentation de la démonstration
Un script de copier-coller linéaire : modèle automatique du modèle Experience Cloud Shell générique → recibler vers Fusion → déployer vers les → d’évaluation exécutées dans Fusion. Idéal pour une démonstration en direct.
10
Appel des API Workfront et Fusion
Appelez les API principales de votre extension sans accéder à la configuration CORS du navigateur, à l’aide d’un proxy d’action d’exécution. Couvre les en-têtes require-adobe-auth et Fusion v3, ainsi qu’un exemple pratique.

Note sur la disponibilité

Fusion expose actuellement ces points d’extension :

  • fusion/nav-organization/1 : apparaît sous la section Organisation.
  • fusion/nav-team/1 : apparaît sous la section Équipe.

Avant de pouvoir effectuer une publication sur l’un de ces sites, le point d’extension doit avoir été intégré à votre organisation Adobe. Si l’étape de publication échoue en indiquant que le point d’extension n’existe pas, reportez-vous à la section ​ Dépannage ​.

Documentation officielle d’Adobe

Ce guide est spécifique à Fusion. Pour la plateforme sous-jacente, les références canoniques sont les suivantes :

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