Créer votre premier complément du volet des tâches de Project

Cet article décrit comment créer un complément du volet des tâches de Project.

Conditions préalables

Notes

Si vous n’êtes pas familiarisé avec les nœuds.js ou npm, vous devez commencer par configuration de votre environnement de développement.

  • Node.js (la dernière version LTS)

  • La dernière version deYeoman et du Générateur Yeoman Générateur de compléments Office. Pour installer ces outils globalement, exécutez la commande suivante via l’invite de commande.

    npm install -g yo generator-office
    

    Notes

    Même si vous avez déjà installé le générateur Yeoman, nous vous recommandons de mettre à jour votre package vers la dernière version via npm.

  • Project 2016 ou version ultérieure pour Windows

Créer le complément

Exécutez la commande suivante pour créer un projet de complément à l’aide du générateur Yeoman.

yo office

Notes

Lorsque vous exécutez la commande yo office, il est possible que vous receviez des messages d’invite sur les règles de collecte de données de Yeoman et les outils CLI de complément Office. Utilisez les informations fournies pour répondre aux invites comme vous l’entendez.

Lorsque vous y êtes invité, fournissez les informations suivantes pour créer votre projet de complément.

  • Sélectionnez un type de projet : Office Add-in Task Pane project
  • Sélectionnez un type de script : Javascript
  • Comment souhaitez-vous nommer votre complément ? My Office Add-in
  • Quelle application client Office voulez-vous prendre en charge ? Project

Capture d'écran montrant les invites et les réponses pour le générateur Yeoman dans une interface de ligne de commande.

Après avoir exécuté l’assistant, le générateur crée le projet et installe les composants Node de prise en charge.

Conseil

Vous pouvez ignorer les instructions suivantes fournies par le générateur Yeoman une fois que le complément a été créé. Les instructions détaillées de cet article fournissent tous les conseils nécessaires à l’exécution de ce didacticiel.

Explorer le projet

Le projet de complément que vous avez créé à l’aide du générateur Yeoman contient un exemple de code pour un complément de volet de tâches très simple.

  • Le fichier ./manifest.xml du répertoire racine du projet définit les paramètres et fonctionnalités du complément.
  • Le fichier ./src/taskpane/taskpane.html contient les balises HTML du volet Office.
  • Le fichier ./src/taskpane/taskpane.css contient le style CSS appliqué au contenu du volet Office.
  • Le fichier ./src/taskpane/taskpane.js contient le code d’API JavaScript pour Office qui facilite l’interaction entre le volet des tâches et l’application cliente Office.

Mettre à jour le code

Ouvrez le fichier ./src/taskpane/taskpane.js dans votre éditeur de code et ajoutez le code suivant à la fonction run. Ce code utilise l’API JavaScript Office pour définir le champ Name et le champ Notes de la tâche sélectionnée.

var taskGuid;

// Get the GUID of the selected task
Office.context.document.getSelectedTaskAsync(
    function (result) {
        if (result.status === Office.AsyncResultStatus.Succeeded) {
            taskGuid = result.value;

            // Set the specified fields for the selected task.
            var targetFields = [Office.ProjectTaskFields.Name, Office.ProjectTaskFields.Notes];
            var fieldValues = ['New task name', 'Notes for the task.'];

            // Set the field value. If the call is successful, set the next field.
            for (var i = 0; i < targetFields.length; i++) {
                Office.context.document.setTaskFieldAsync(
                    taskGuid,
                    targetFields[i],
                    fieldValues[i],
                    function (result) {
                        if (result.status === Office.AsyncResultStatus.Succeeded) {
                            i++;
                        }
                        else {
                            var err = result.error;
                            console.log(err.name + ' ' + err.code + ' ' + err.message);
                        }
                    }
                );
            }
        } else {
            var err = result.error;
            console.log(err.name + ' ' + err.code + ' ' + err.message);
        }
    }
);

Essayez

  1. Accédez au dossier racine du projet.

    cd "My Office Add-in"
    
  2. Démarrez le serveur web local.

    Notes

    Les compléments Office doivent utiliser le protocole HTTPS, et non HTTP, même lorsque vous développez. Si vous êtes invité à installer un certificat après avoir exécuté la commande suivante, acceptez d’installer le certificat fourni par le générateur Yeoman.

    Exécutez la commande suivante dans le répertoire racine de votre projet. Lorsque vous exécutez cette commande, le serveur web local démarre.

    npm run dev-server
    
  3. Dans Project, créez un plan de projet simple.

  4. Chargez votre complément dans Project en suivant les instructions fournies dans Chargement de versions test de compléments Office sur Windows.

  5. Sélectionnez une seule tâche dans le projet.

  6. Au bas du volet des tâches, sélectionnez le lien Exécuter pour renommer la tâche sélectionnée et ajouter des notes à la tâche sélectionnée.

    Capture d'écran de l'application Project avec le complément du volet des tâches chargé.

Étapes suivantes

Félicitations, vous avez créé un complément de volet de tâches Project ! À présent, découvrez les fonctionnalités d’un complément Project et explorez des scénarios courants.

Voir aussi