Remarque
L’accès à cette page nécessite une autorisation. Vous pouvez essayer de vous connecter ou de modifier des répertoires.
L’accès à cette page nécessite une autorisation. Vous pouvez essayer de modifier des répertoires.
Vous pouvez librement implémenter n’importe quel schéma de localisation convenant à votre Complément Office. L’API JavaScript et le schéma du manifeste de la plateforme Compléments Office offrent quelques choix. Vous pouvez utiliser l’API JavaScript Office pour déterminer des paramètres régionaux et afficher des chaînes en fonction des paramètres régionaux de l’application Office, ou pour interpréter ou afficher des données en fonction des paramètres régionaux des données. Vous pouvez utiliser le manifeste pour spécifier l’emplacement des fichiers et les informations descriptives propres à un paramètre régional. Vous pouvez également utiliser Visual Studio et le script Microsoft Ajax pour prendre en charge la globalisation et la localisation.
Utiliser l’API JavaScript pour déterminer les chaînes propres aux paramètres régionaux
L’API JavaScript Office fournit deux propriétés qui prennent en charge l’affichage ou l’interprétation des valeurs cohérentes avec les paramètres régionaux de l’application et des données Office.
Context.displayLanguage spécifie les paramètres régionaux (ou la langue) de l’interface utilisateur de l’application Office. L’exemple suivant vérifie si l’application Office utilise les paramètres régionaux en-US ou fr-FR et affiche un message d’accueil spécifique aux paramètres régionaux.
function sayHelloWithDisplayLanguage() { const myLanguage = Office.context.displayLanguage; switch (myLanguage) { case 'en-US': write('Hello!'); break; case 'fr-FR': write('Bonjour!'); break; } } // Function that writes to a div with id='message' on the page. function write(message) { document.getElementById('message').innerText += message; }Context.contentLanguage spécifie le paramètre régional (ou langue) des données. En étendant le dernier exemple de code, au lieu de vérifier la propriété displayLanguage , affectez
myLanguagela valeur de la propriété contentLanguage et utilisez le reste du même code pour afficher un message d’accueil basé sur les paramètres régionaux des données.const myLanguage = Office.context.contentLanguage;
Contrôler la localisation à partir du manifeste
Les techniques de localisation avec le manifeste varient selon que vous utilisez le manifeste de complément uniquement ou le manifeste d’application unifié pour Microsoft 365.
Lorsque vous utilisez le manifeste d’application unifié pour Microsoft 365, localisez les chaînes publiques dans le manifeste, comme décrit dans Localiser des chaînes dans le manifeste de votre application. Voici un exemple pour un complément Outlook. Tout d’abord est l’objet "localizationInfo" dans le manifeste. Voici le fichier fr-fr.json avec les chaînes traduites. Le complément dispose d’un volet Office (avec une version française de la page d’accueil), d’icônes localisées en français et d’un bouton de ruban personnalisé qui ouvre un lecteur vidéo dans une boîte de dialogue.
"localizationInfo": {
"defaultLanguageTag": "en",
"additionalLanguages": [
{
"languageTag": "fr-fr",
"file": "fr-fr.json"
}
]
}
{
"$schema": "https://developer.microsoft.com/json-schemas/teams/v1.16/MicrosoftTeams.Localization.schema.json",
"name.short": "Lecteur vidéo",
"name.full": "Lecteur vidéo pour Outlook",
"description.short": "Voir les vidéos YouTube dans Outlook via les mails.",
"description.full": "Visualisez les vidéos YouTube référencées dans vos courriers électronique directement depuis Outlook.",
"icons.color": "https://localhost:3000/assets/fr-fr/icon-128.png",
"extensions[0].audienceClaimUrl": "https://localhost:3000/fr-fr/taskpane.html",
"extensions[0].ribbons[0].tabs[0].groups[0].label": "Outils de médias",
"extensions[0].ribbons[0].tabs[0].groups[0].controls[0].icons[0].url": "https://localhost:3000/assets/fr-fr/player-icon.png",
"extensions[0].ribbons[0].tabs[0].groups[0].controls[0].label": "Ouvrir le lecteur vidéo",
"extensions[0].ribbons[0].tabs[0].groups[0].controls[0].supertip.description": "Cliquez pour ouvrir le lecteur vidéo.",
"extensions[0].ribbons[0].tabs[0].groups[0].controls[0].supertip.title": "Ouvrir le lecteur vidéo",
}
Mettre en correspondance le format de date/heure avec le paramètre régional du client
Vous pouvez obtenir les paramètres régionaux de l’interface utilisateur de l’application cliente Office à l’aide de la propriété displayLanguage . Vous pouvez ensuite afficher les valeurs de date et d’heure dans un format cohérent avec les paramètres régionaux actuels de l’application Office. Vous pouvez ensuite afficher les valeurs de date et d’heure dans un format cohérent avec les paramètres régionaux actuels de l’application hôte. Au moment de l’exécution, votre complément peut utiliser le fichier de ressources et faire correspondre le format de date/heure approprié avec les paramètres régionaux obtenus à partir de la propriété displayLanguage .
Vous pouvez obtenir les paramètres régionaux des données de l’application cliente Office à l’aide de la propriété contentLanguage . Vous pouvez obtenir les paramètres régionaux des données de l’application d’hébergement en utilisant la propriété contentLanguage. En fonction de cette valeur, vous pouvez correctement interpréter ou afficher des chaînes de date/heure.
Utiliser Visual Studio pour créer un complément localisé et globalisé
Utiliser Ajax pour l’internationalisation et la localisation
Vous pouvez internationaliser et utiliser les extensions de type JavaScript Date et Number ainsi que l’objet JavaScript Date dans le code JavaScript pour qu’une Complément Office affiche les valeurs en fonction des paramètres régionaux du navigateur actuel. Pour plus d’informations, voir Walkthrough: Globalizing a Date by Using Client Script. Vous pouvez internationaliser et utiliser les extensions de type JavaScript Date et Number ainsi que l’objet JavaScript Date dans le code JavaScript pour qu’une Complément Office affiche les valeurs en fonction des paramètres régionaux du navigateur actuel.
Vous pouvez inclure des chaînes de ressources localisées directement dans des fichiers JavaScript autonomes pour fournir des fichiers de script client pour les différents paramètres régionaux, qui sont définis dans le navigateur ou fournis par l’utilisateur. Créez un fichier de script distinct pour chaque paramètre régional pris en charge. Dans chaque fichier de script, incluez un objet au format JSON contenant les chaînes de ressources pour ce paramètre régional. Les valeurs localisées sont appliquées lorsque le script s’exécute dans le navigateur. Vous pouvez inclure des chaînes de ressources localisées directement dans des fichiers JavaScript autonomes pour fournir des fichiers de script client pour les différents paramètres régionaux, qui sont définis dans le navigateur ou fournis par l’utilisateur. Créez un fichier de script distinct pour chaque paramètre régional pris en charge. Dans chaque fichier de script, incluez un objet au format JSON contenant les chaînes de ressources pour ce paramètre régional.
Exemple : créer un complément Office localisé
Cette section inclut des exemples expliquant comment localiser la description, le nom d’affichage et l’interface utilisateur d’une Complément Office.
Remarque
Pour télécharger Visual Studio, consultez la page IDE Visual Studio. Lors de l’installation, vous devez sélectionner la charge de travail de développement Office/SharePoint.
Configurer Office pour utiliser des langues supplémentaires pour l’affichage ou l’édition
Pour exécuter l’exemple de code fourni, configurez Office sur votre ordinateur pour utiliser d’autres langues afin de pouvoir tester votre complément en changeant la langue utilisée pour l’affichage dans les menus et les commandes, pour la modification et la vérification, ou les deux.
Vous pouvez utiliser un module linguistique Office pour installer une autre langue. Pour plus d’informations sur les Modules linguistiques et où les obtenir, voir Pack d’accessoires linguistiques pour Office.
Après avoir installé le Pack d’accessoires linguistiques, vous pouvez configurer Office pour utiliser la langue installée pour l’affichage dans l’interface utilisateur, pour modifier du contenu de document, ou les deux. L’exemple dans cet article utilise une installation d’Office qui contient le module linguistique espagnol.
Créer un projet de complément Office
Vous devez créer un projet de complément Office Visual Studio.
Remarque
Si vous n’avez pas installé Visual Studio, consultez la page de l’IDE Visual Studio pour obtenir des instructions de téléchargement. Lors de l’installation, vous devez sélectionner la charge de travail de développement Office/SharePoint. Si vous avez déjà installé Visual Studio 2019 ou version ultérieure, utilisez la Visual Studio Installer pour vous assurer que la charge de travail développement Office/SharePoint est installée.
Choisissez Créer un nouveau projet.
À l’aide de la zone de recherche, entrez complément. Choisissez Complément web Word, puis sélectionnez Suivant.
Nommez votre projet WorldReadyAddIn et sélectionnez Créer.
Visual Studio crée une solution et ses deux projets apparaissent dans l’Explorateur de solutions. Le fichier Home.html s’ouvre dans Visual Studio.
Localiser le texte utilisé dans votre complément
Le texte que vous souhaitez localiser pour une autre langue s’affiche dans deux zones.
Nom d’affichage et description du complément. Ce contenu est contrôlé par les entrées du fichier manifeste de l’application. Nom d’affichage et description du complément.
Interface utilisateur du complément. Vous pouvez localiser les chaînes qui s’affichent dans l’interface utilisateur de votre complément à l’aide du code JavaScript, par exemple en utilisant un fichier de ressources séparé contenant les chaînes localisées.
Localiser le nom d’affichage et la description du complément
Dans l’Explorateur de solutions, développez WorldReadyAddIn, WorldReadyAddInManifest, puis choisissez WorldReadyAddIn.xml.
Dans WorldReadyAddInManifest.xml, remplacez les éléments DisplayName et Description par le bloc de code suivant.
Remarque
Vous pouvez remplacer les chaînes localisées en espagnol utilisées dans cet exemple pour les éléments DisplayName et Description par les chaînes localisées en une autre langue.
<DisplayName DefaultValue="World Ready add-in"> <Override Locale="es-es" Value="Aplicación de uso internacional"/> </DisplayName> <Description DefaultValue="An add-in for testing localization"> <Override Locale="es-es" Value="Una aplicación para la prueba de la localización"/> </Description>Lorsque vous modifiez la langue d’affichage de Microsoft 365 de l’anglais à l’espagnol, par exemple, puis que vous exécutez le complément, le nom d’affichage et la description du complément sont affichés avec du texte localisé.
Disposer l’interface utilisateur du complément
Pour mettre en page l’interface utilisateur du complément :
Remplacez le
<body>contenu de l’élément dansHome.html par le code HTML suivant, puis enregistrez le fichier.<body> <!-- Page content --> <div id="content-header" class="ms-bgColor-themePrimary ms-font-xl"> <div class="padding"> <h1 id="greeting" class="ms-fontColor-white"></h1> </div> </div> <div id="content-main"> <div class="padding"> <div class="ms-font-m"> <p id="about"></p> </div> </div> </div> </body>
La figure suivante montre l’élément titre (h1) et l’élément paragraphe (p) qui afficheront le texte localisé lorsque vous terminez les étapes restantes et exécutez le complément.
Ajouter le fichier de ressources qui contient les chaînes localisées
Le fichier de ressource JavaScript contient les chaînes utilisées pour l’interface utilisateur du complément. Le code HTML pour l’exemple d’interface utilisateur du complément contient un <h1> élément qui affiche un message d’accueil et un <p> élément qui présente le complément à l’utilisateur.
Pour activer les chaînes localisées pour le titre et le paragraphe, placez les chaînes dans un fichier de ressources distinct. Le fichier de ressources crée un objet JavaScript qui contient un objet JavaScript Object Notation (JSON) individuel pour chaque ensemble de chaînes localisées. Le fichier de ressources fournit une méthode pour obtenir l’objet JSON approprié pour des paramètres régionaux donnés. Pour activer les chaînes localisées pour le titre et le paragraphe, placez les chaînes dans un fichier de ressources distinct. Le fichier de ressources crée un objet JavaScript qui contient un objet JavaScript Object Notation (JSON) individuel pour chaque ensemble de chaînes localisées.
Ajouter le fichier de ressources au projet de complément
Dans Explorateur de solutions dans Visual Studio, cliquez avec le bouton droit (ou sélectionnez et maintenez-le enfoncé) sur le projet WorldReadyAddInWeb, puis choisissez Ajouter un>nouvel élément.
Dans la boîte de dialogueAjouter un nouvel élément, choisissez Fichier JavaScript.
Entrez UIStrings.js comme nom de fichier puis sélectionnez Ajouter.
Ajoutez le code suivant au fichier UIStrings.js et enregistrez le fichier.
/* Store the locale-specific strings */ const UIStrings = (() => { "use strict"; const UIStrings = {}; // JSON object for English strings UIStrings.EN = { "Greeting": "Welcome", "Introduction": "This is my localized add-in." }; // JSON object for Spanish strings UIStrings.ES = { "Greeting": "Bienvenido", "Introduction": "Esta es mi aplicación localizada." }; UIStrings.getLocaleStrings = (locale) => { let text; // Get the resource strings that match the language. switch (locale) { case 'en-US': text = UIStrings.EN; break; case 'es-ES': text = UIStrings.ES; break; default: text = UIStrings.EN; break; } return text; }; return UIStrings; })();
Le fichier de ressourcesUIStrings.js crée un objet, UIStrings, qui contient les chaînes localisées pour l’interface utilisateur de votre complément.
Localiser le texte utilisé pour l’interface utilisateur du complément
Pour utiliser le fichier de ressources dans votre complément, vous devez ajouter une balise de script pour celui-ci sur Home.html. Lorsque Home.html est chargé, UIStrings.js s’exécute et l’objet UIStrings que vous utilisez pour obtenir les chaînes est disponible pour votre code. Ajoutez le code HTML suivant dans la balise head pour Home.html afin de rendre UIStrings disponible pour votre code.
<!-- Resource file for localized strings: -->
<script src="../UIStrings.js" type="text/javascript"></script>
Ajoutez le code HTML suivant dans la balise head pour Home.html pour que UIStrings soit disponible pour votre code.
Si vous souhaitez modifier la localisation de votre complément en fonction de la langue utilisée pour l’affichage dans les menus et les commandes de l’application cliente Office, vous utilisez la propriété Office.context.displayLanguage pour obtenir les paramètres régionaux de cette langue. Par exemple, si la langue de l’application utilise l’espagnol pour l’affichage dans les menus et les commandes, la propriété Office.context.displayLanguage renvoie le code de langue es-ES.
Si vous souhaitez modifier la localisation de votre complément en fonction de la langue utilisée pour modifier le contenu du document, vous utilisez la propriété Office.context.contentLanguage pour obtenir les paramètres régionaux de cette langue. Par exemple, si la langue de l’application utilise l’espagnol pour modifier le contenu du document, la propriété Office.context.contentLanguage renvoie le code de langue es-ES.
Une fois que vous connaissez la langue utilisée par l’application, vous pouvez utiliser UIStrings pour obtenir l’ensemble de chaînes localisées qui correspond à la langue de l’application.
Remplacez le code dans le fichier Home.js par le code suivant. Le code montre comment modifier les chaînes utilisées dans les éléments d’interface utilisateur sur Home.html en fonction de la langue d’affichage de l’application ou de la langue d’édition de l’application.
Remarque
Pour basculer entre la modification de la localisation du complément en fonction de la langue utilisée pour la modification, supprimez les marques de commentaire de la ligne de code const myLanguage = Office.context.contentLanguage; et commentez la ligne de code const myLanguage = Office.context.displayLanguage;
/// <reference path="../App.js" />
/// <reference path="../UIStrings.js" />
(() => {
"use strict";
// The initialize function must be run each time a new page is loaded.
Office.onReady(() => {
$(document).ready(() => {
// Get the language setting for editing document content.
// To test this, uncomment the following line and then comment out the
// line that uses Office.context.displayLanguage.
// const myLanguage = Office.context.contentLanguage;
// Get the language setting for UI display in the Office application.
const myLanguage = Office.context.displayLanguage;
let UIText;
// Get the resource strings that match the language.
// Use the UIStrings object from the UIStrings.js file
// to get the JSON object with the correct localized strings.
UIText = UIStrings.getLocaleStrings(myLanguage);
// Set localized text for UI elements.
$("#greeting").text(UIText.Greeting);
$("#about").text(UIText.Introduction);
});
});
})();
Tester votre complément localisé
Pour tester votre complément localisé, modifiez la langue utilisée pour l’affichage ou la modification dans l’application Office, puis exécutez votre complément.
Dans Word, sélectionnez Fichier>Options>Langue. La figure suivante montre la boîte de dialogue Options Word ouverte sous l’onglet Langue.
Sous Choisir la langue d’affichage, sélectionnez la langue que vous souhaitez afficher, par exemple espagnol, puis sélectionnez la flèche vers le haut pour déplacer la langue Espagnol en première position dans la liste. Sinon, pour modifier la langue utilisée pour l’édition, sous Choisir les langues d’édition, choisissez la langue que vous souhaitez utiliser pour l’édition, par exemple l’espagnol, puis choisissez Définir par défaut.
Sélectionnez OK pour confirmer votre choix, puis fermez Word.
Appuyez sur F5 dans Visual Studio pour exécuter le complément d’exemple ou choisissez Déboguer>Démarrer le débogage dans la barre de menus.
Dans Word, sélectionnez Accueil>Afficher le volet de tâches.
Une fois exécutées, les chaînes de l’interface utilisateur du complément changent pour correspondre à la langue utilisée par l’application, comme illustré dans la figure suivante.
Voir aussi
Collaborer avec nous sur GitHub
La source de ce contenu se trouve sur GitHub, où vous pouvez également créer et examiner les problèmes et les demandes de tirage. Pour plus d’informations, consultez notre guide du contributeur.