Créer les interfaces des éditeurs Google

Avec les modules complémentaires Google Workspace, vous pouvez fournir des interfaces personnalisées au sein des éditeurs, y compris Google Docs, Sheets et Slides. Cela vous permet de fournir à l'utilisateur des informations pertinentes, d'automatiser les tâches et de connecter des systèmes tiers aux Éditeurs.

Accéder à l'interface utilisateur du module complémentaire

Vous pouvez ouvrir un module complémentaire Google Workspace dans les éditeurs si son icône apparaît dans le raccourci Google Workspace accéder au panneau latéral situé à droite de l'utilisateur Docs, Sheets et Slides de commande.

Un module complémentaire Google Workspace peut présenter les interfaces suivantes:

  • Interfaces de la page d'accueil: si le fichier manifeste du module complémentaire inclut le déclencheur EDITOR_NAME.homepageTrigger pour l'éditeur dans lequel l'utilisateur ouvre le module complémentaire ; le module complémentaire compile et renvoie fiche de la page d'accueil spécifiquement pour cet Éditeur. Si le fichier manifeste du module complémentaire n'inclut pas EDITOR_NAME.homepageTrigger pour l'éditeur ouvert par l'utilisateur une fiche de page d'accueil générique s'affiche à la place.

  • Interfaces de l'API REST: si le module complémentaire utilise REST vous pouvez inclure des déclencheurs qui demandent l'accès à un document par fichier à l'aide du champ d'application drive.file. Une fois accordé, un autre déclencheur appelé EDITOR_NAME.onFileScopeGrantedTrigger s'exécute et affiche une interface spécifique au fichier.

  • Interfaces d'aperçu des liens: si votre module complémentaire s'intègre à un service tiers, vous pouvez créer des fiches qui prévisualisent contenu des URL de votre service.

Créer des interfaces pour les modules complémentaires des éditeurs

Pour créer les interfaces du module complémentaire de l'éditeur pour les éditeurs, procédez comme suit:

  1. Ajoutez les composants addOns.common, addOns.docs, addOns.sheets, et addOns.slides dans le fichier manifeste du projet du script du module complémentaire.
  2. Ajoutez tous les champs d'application de l'éditeur requis à le fichier manifeste de votre projet de script.
  3. Si vous fournissez une page d'accueil spécifique à Editor, implémenter EDITOR_NAME.homepageTrigger pour créer l'interface. Si ce n'est pas le cas, utilisez la méthode common.homepageTrigger pour créer une page d'accueil commune pour vos applications hôtes.
  4. Si vous utilisez des API REST, implémentez le flux d'autorisation du champ d'application drive.file. et EDITOR_NAME.onFileScopeGrantedTrigger déclencher la fonction pour afficher une interface spécifique au fichier ouvert. Pour plus plus d'informations, consultez la section Interfaces de l'API REST.
  5. Si vous configurez des aperçus de liens à partir d'un service tiers, implémentez le flux d'autorisation du champ d'application https://www.googleapis.com/auth/workspace.linkpreview et linkPreviewTriggers . Pour en savoir plus, consultez Interfaces d'aperçu des liens.
  6. Implémentez les fonctions de rappel associées pour répondre aux demandes de l'utilisateur Les interactions avec l'interface utilisateur, telles que les clics sur les boutons

Page d'accueil de l'éditeur

Vous devez fournir une fonction de déclencheur de la page d'accueil dans le projet de script de votre module complémentaire qui compile et renvoie un seul élément Card ou un tableau d'objets Card qui constituent la page d'accueil du module complémentaire.

La fonction de déclencheur de la page d'accueil reçoit un objet événement. en tant que paramètre contenant des informations telles que la plate-forme du client. Vous pouvez utiliser les données d'objet d'événement pour personnaliser la construction de la page d'accueil.

Vous pouvez présenter une page d'accueil commune ou une page d'accueil spécifique à l'Éditeur. l'utilisateur ouvre votre module complémentaire.

Afficher la page d'accueil commune

Pour afficher la page d'accueil habituelle de votre module complémentaire dans les éditeurs, ajoutez les informations Les champs de l'éditeur, tels que addOns.docs, addOns.sheets, ou addOns.slides, dans le fichier manifeste du module complémentaire.

L'exemple suivant montre la partie addons d'un module complémentaire Google Workspace fichier manifeste. Ce module complémentaire étend Docs, Sheets et Slides et affiche les fonctionnalités la page d'accueil de chaque application hôte.

 "addOns": {
    "common": {
      "name": "Translate",
      "logoUrl": "https://www.gstatic.com/images/branding/product/1x/translate_24dp.png",
      "layoutProperties": {
        "primaryColor": "#2772ed"
      },
      "homepageTrigger": {
        "runFunction": "onHomepage"
      }
    },
    "docs": {},
    "sheets": {},
    "slides": {}
  }
}

Afficher une page d'accueil spécifique à Editor

Pour présenter une page d'accueil spécifique à un éditeur, ajoutez EDITOR_NAME.homepageTrigger au module complémentaire fichier manifeste.

L'exemple suivant montre la partie addons d'un fichier manifeste de module complémentaire Google Workspace. Le module complémentaire est activé pour Docs, Sheets et Slides. Il affiche les erreurs une page d'accueil unique dans Docs et Slides, et une page d'accueil unique dans Sheets. Rappel La fonction onSheetsHomepage crée la fiche de la page d'accueil spécifique à Sheets.

 "addOns": {
    "common": {
      "name": "Translate",
      "logoUrl": "https://www.gstatic.com/images/branding/product/1x/translate_24dp.png",
      "layoutProperties": {
        "primaryColor": "#2772ed"
      },
      "homepageTrigger": {
        "runFunction": "onHomepage"
      }
    },
    "docs": {},
    "slides": {},
    "sheets": {
     "homepageTrigger": {
       "runFunction": "onSheetsHomepage"
     },
  }
}

Interfaces de l'API REST

Si votre module complémentaire utilise des API REST, telles que l'API Google Sheets, vous pouvez utiliser la fonction onFileScopeGrantedTrigger pour afficher une nouvelle interface spécifique au fichier qui est ouvert dans l'application hôte de l'éditeur.

Vous devez inclure le flux d'autorisation du champ d'application drive.file pour utiliser la fonction onFileScopeGrantedTrigger. Pour savoir comment demander le drive.file consultez Demander l'accès au fichier pour le document actuel.

Lorsqu'un utilisateur accorde le niveau d'accès drive.file, le EDITOR_NAME.onFileScopeGrantedTrigger.runFunction les incendies. Lorsque le déclencheur est exécuté, il exécute la fonction de déclencheur contextuel spécifié par le champ EDITOR_NAME.onFileScopeGrantedTrigger.runFunction dans le fichier manifeste du module complémentaire.

Pour créer une interface API REST pour l'un des éditeurs, procédez comme suit : Remplacez EDITOR_NAME par l'application hôte de l'éditeur de votre choix. utilisez, par exemple, sheets.onFileScopeGrantedTrigger.

  1. Inclure le EDITOR_NAME.onFileScopeGrantedTrigger dans la section appropriée de votre fichier manifeste. Par exemple, si vous que vous souhaitez créer cette interface dans Google Sheets, ajoutez le déclencheur la section "sheets".
  2. Implémentez la fonction nommée dans EDITOR_NAME.onFileScopeGrantedTrigger. . Cette fonction accepte un objet événement en tant qu'argument et doit renvoyer soit un seul Card ou un tableau d'objets Card.
  3. Comme pour toute carte, vous devez implémenter les fonctions de rappel utilisées pour fournir l'interactivité des widgets pour l'interface. Par exemple, si vous incluez un bouton dans l'interface, il doit être associé à une Action et à une fonction de rappel implémentée qui s'exécute lorsque le bouton sur laquelle l'utilisateur clique.

L'exemple suivant montre la partie addons d'un fichier manifeste de module complémentaire Google Workspace. Le module complémentaire utilise des API REST. onFileScopeGrantedTrigger est donc inclus pour Google Sheets. Lorsqu'un utilisateur accorde le champ d'application drive.file, la fonction de rappel onFileScopeGrantedSheets crée une interface spécifique à un fichier.

"addOns": {
   "common": {
     "name": "Productivity add-on",
     "logoUrl": "https://www.gstatic.com/images/icons/material/system_gm/1x/work_outline_black_18dp.png",
     "layoutProperties": {
       "primaryColor": "#669df6",
       "secondaryColor": "#ee675c"
     }
   },
   "sheets": {
     "homepageTrigger": {
       "runFunction": "onEditorsHomepage"
     },
     "onFileScopeGrantedTrigger": {
       "runFunction": "onFileScopeGrantedSheets"
     }
   }

Pour activer les aperçus des liens pour un service tiers, vous devez configurer les liens Aperçus dans le fichier manifeste du module complémentaire et créer une fonction qui renvoie un aperçu . Pour les services qui nécessitent une autorisation de l'utilisateur, votre fonction doit également appeler le flux d'autorisation.

Pour savoir comment activer les aperçus de liens, consultez Prévisualiser les liens avec des chips intelligents

Objets "Événement"

Un objet "événement" est créé et transmis à des fonctions de déclenchement, telles que EDITOR_NAME.homepageTrigger ou EDITOR_NAME.onFileScopeGrantedTrigger. La fonction de déclencheur utilise les informations pour déterminer comment créer des fiches de modules complémentaires ou contrôler le comportement du module complémentaire.

La structure complète des objets d'événement est décrite dans la section Objets d'événement.

Lorsqu'un éditeur est l'application hôte du module complémentaire, les objets d'événement incluent : Docs, Sheets ou Slides des champs d'objets d'événement qui contiennent des informations sur les clients.

Si le module complémentaire ne dispose pas de l'autorisation de niveau d'accès drive.file pour l'utilisateur actuel ou un document, l'objet événement ne contient docs.addonHasFileScopePermission, sheets.addonHasFileScopePermission ou slides.addonHasFileScopePermission. Si le module complémentaire comporte , l'objet événement contient tous les champs de l'objet événement d'éditeur.

L'exemple suivant montre un objet "Événement" de type "Éditeur" transmis à fonction sheets.onFileScopeGrantedTrigger. Ici, le module complémentaire dispose Autorisation du champ d'application drive.file pour le document actuel:

`        {
          "commonEventObject": { ... },
          "sheets": {
            "addonHasFileScopePermission": true,
            "id":"A_24Q3CDA23112312ED52",
            "title":"How to get started with Sheets"
          },
          ...
        }