Créer un projet pour l’extensibilité de l’interface utilisateur

Ouvrez un terminal.

Dans le terminal, déplacez-vous vers le dossier dans lequel vous conservez les projets.

Exécuter :

aio app init my-fusion-extension --standalone-app

• my-fusion-extension est le nom du dossier/de l’application. Vous pouvez sélectionner ce nom, mais en utilisant des lettres minuscules, des tirets et sans espaces.
• --standalone-app indique à l’interface de ligne de commande de créer un squelette d’application simple au lieu de vous demander de choisir un modèle de produit. Il s’agit de la clé pour éviter le modèle AEM (ou tout autre modèle).

Lorsque vous y êtes invité, sélectionnez votre organisation (si vous en appartenez à plusieurs).

Lorsque vous y êtes invité, sélectionnez Créer un projet et acceptez le nom suggéré, ou sélectionnez un projet vide existant.

La commande configure automatiquement les espaces de travail Évaluation et Production.

La commande génère également des fichiers dans le dossier my-fusion-extension et exécute npm install.

Passez à Confirmer la création du projet.

Dans le terminal, accédez au dossier créé :

cd my-fusion-extension

Vous devriez voir une structure similaire à celle-ci (certains fichiers sont omis) :

my-fusion-extension/
|--- app.config.yaml   // main configuration (you will edit this)
|---  package.json   //dependencies and scripts
|---  src/    // your source code
|---  web-src/  or  src/.../web-src/  // front-end files (HTML/JS)

Les deux fichiers qui vous intéressent le plus sont les suivants :

• app.config.yaml : configuration centrale. Plus loin dans le processus, vous ajouterez une section extensions: ici qui connecte votre application à un point d’extension Fusion.
• package.json : répertorie les bibliothèques utilisées par votre application. Vous ajouterez ici la bibliothèque invitée Extensibilité de l’interface utilisateur d’Adobe.

Passez à Ajouter les bibliothèques requises.

Dans le terminal, exécutez :

npm install @adobe/uix-guest @adobe/react-spectrum

(Conditionnel) Si le projet généré n’inclut pas déjà React, installez-le également :

npm install react react-dom react-router-dom

Continuez pour Confirmer les versions du projet.

Dans le terminal, exécutez :

aio app build

Si cette opération s’effectue sans erreur, vos outils et votre projet sont correctement configurés. Vous êtes prêt à connecter le projet à Fusion.

Passez à Configurer le projet pour Fusion.

Créez vos fichiers de sorte que le projet ressemble à ceci :

my-fusion-extension/
|-- app.config.yaml
|-- src/
       |-- fusion-nav-organization-1/          // one folder per extension point
          |-- ext.config.yaml
          |-- web-src/
             |-- src/
                |-- components/
                   |-- App.js
                   |-- ExtensionRegistration.js
                   |-- DashboardWidget.js
                   |-- Constants.js

Nous vous recommandons de nommer le dossier après le point d’extension (fusion-nav-organization-1). Le nom exact dépend de vous, mais il doit correspondre à ce que vous référencez dans app.config.yaml.

Continuez sur Déclarez le point d’extension en app.config.yaml.

Ouvrez app.config.yaml et mettez à jour son contenu vers :

extensions:
  fusion/nav-organization/1:
    $include: src/fusion-nav-organization-1/ext.config.yaml

Ces contenus décrivent les éléments suivants :

• extensions: : cette application implémente un ou plusieurs points d’extension.
• fusion/nav-organization/1 : emplacement Fusion auquel vous vous connectez. Le nom doit correspondre exactement y compris la version 1.
• $include: : pointe vers un second fichier de configuration (créé à l’étape suivante) qui décrit le contenu de cette extension. Le fait de le conserver dans un fichier distinct permet de garder app.config.yaml propre et vous permet d’ajouter d’autres points d’extension ultérieurement.

extensions:
        fusion/nav-organization/1:
            $include: src/fusion-nav-organization-1/ext.config.yaml
        fusion/nav-team/1:
            $include: src/fusion-nav-team-1/ext.config.yaml

1. Passez à Décrire l’extension dans ext.config.yaml

Créez des src/fusion-nav-organization-1/ext.config.yaml avec :

operations:
   view:
    - type: web
      impl: index.html
web: web-src
hooks:
  pre-app-build: node node_modules/@adobe/uix-guest/scripts/generate-metadata.js
   pre-app-run: node node_modules/@adobe/uix-guest/scripts/generate-metadata.js

Ces contenus décrivent les éléments suivants :

• operations.view : déclare que votre extension fournit une vue (interface utilisateur visible), diffusée à partir de index.html. C’est ce qui permet à votre extension d’afficher un écran plutôt que de s’exécuter uniquement en arrière-plan.
• web: web-src : le dossier qui contient vos fichiers front-end. App Builder crée tout ici et l’héberge sur le réseau de diffusion de contenu (CDN) d’Adobe.
• hooks : petites commandes qui s’exécutent automatiquement au moment de la création/de l’exécution. Le script generate-metadata.js est fourni avec @adobe/uix-guest et génère un fichier app-metadata.json dont votre code d’enregistrement a besoin (voir Étape 4). Vous n’écrivez pas ce script ; vous le référencez simplement.

Passez à Définir un ID d’extension stable.

Créer un src/fusion-nav-organization-1/web-src/src/components/Constants.js :

module.exports = {
  extensionId: 'my-fusion-extension'
};

Utilisez la même valeur partout où votre code fait référence à l’ID d’extension.

Continuez sur Enregistrer votre widget.

Créez des src/fusion-nav-organization-1/web-src/src/components/ExtensionRegistration.js.
La partie importante est l’appel register(...) :

import { register } from "@adobe/uix-guest";
import metadata from "../../../../app-metadata.json";
import { extensionId } from "./Constants";

async function init() {
  await register({
    id: extensionId,
    metadata,
    methods: {
      dashboard: {
        getWidget() {
          return {
            id: extensionId,
            title: "My Fusion tool",        // shown on the Fusion nav button
            description: "What this tool does",
            url: "/index.html#/my-widget",  // route to your visible UI
            hideWidgetHeader: false          // false = Fusion shows the title
          };
        }
      }
    }
   });
}

init().catch(console.error);

Points clés :

• title est le libellé que Fusion attribue au bouton de navigation. Si hideWidgetHeader est false, Fusion affiche également le titre sous la forme d’un en-tête au-dessus de votre interface utilisateur.
• url est l’itinéraire vers votre interface utilisateur visible dans cette même application. Ici, il s’agit d’une route de hachage (#/my-widget) gérée par votre routeur front-end (configurée sur la page suivante). Elle doit être résolue sur le composant qui effectue le rendu de votre écran.
• metadata provient de app-metadata.json, que le hook generate-metadata crée pour vous au moment de la création. Importez-le comme indiqué.
• Le nom de la méthode dashboard.getWidget correspond au contrat convenu que Fusion appelle pour découvrir votre widget. Conservez l’espace de noms dashboard et le nom du getWidget.