Localiser les éléments d’interface utilisateur Exemple de complément SharePoint

L’exemple de complément Core.JavaScriptCustomization montre comment utiliser JavaScript pour remplacer la valeur de texte d’un élément de l’interface utilisateur SharePoint par une valeur de texte traduite, qui est lue à partir d’un fichier de ressources JavaScript.

Cet exemple de code utilise un complément hébergé par le fournisseur pour :

• Localiser le titre d’une page de site ou d’un lien de lancement rapide avec des valeurs de texte spécifiques.
• Conserver le titre d’une page de site ou d’un lien de lancement rapide dans une langue principale et fournir des versions traduites de la page de site et du titre du lien de lancement rapide dans une autre langue au moment de l’exécution.
• Utilisez des fichiers de ressources JavaScript pour la localisation côté client.
• Liez un fichier JavaScript à un site SharePoint à l’aide d’une action personnalisée.
• Vérifiez la culture de l’interface utilisateur du site, puis chargez des valeurs de texte spécifiques à la culture à partir d’un fichier de ressources JavaScript.
• Remplacer les titres de page de site et de lancement rapide par des valeurs de texte spécifiques à la culture à l’aide de jQuery.

Avant de commencer

Pour commencer, téléchargez l’exemple de complément Core.JavaScriptCustomization à partir du projet de modèles et pratiques pour développeurs d’Office 365 sur GitHub.

Avant d’exécuter cet exemple de code, procédez comme suit.

Configurer les paramètres de langue sur votre site

1. Sur votre site d’équipe, sélectionnez Paramètres>Paramètres du site.

2. Dans Administration du site, choisissez Paramètres de langue.

3. Sur la page Paramètres de langue , dans Autre langue(s), choisissez l’autre langue que votre site doit prendre en charge. Par exemple, choisissez le finnois et le français, comme illustré dans la figure suivante.

   

4. Sélectionnez OK.

Définir la langue d’affichage sur la page de profil de votre utilisateur

1. Dans le haut de votre site Office 365, choisissez votre photo de profil, puis cliquez sur À mon sujet.

   

2. Dans la page À propos de moi , choisissez Modifier votre profil.

3. Choisissez les points de suspension (...) pour des options supplémentaires, puis choisissez Langue et région.

4. Dans Mes langues d’affichage, choisissez une nouvelle langue dans la liste Choisir une nouvelle langue , puis sélectionnez Ajouter. Par exemple, choisissez le finnois et le français. Vous pouvez déplacer votre langue préférée vers le haut ou vers le bas en choisissant les flèches vers le haut et vers le bas.

   

5. Cliquez sur Enregistrer tout et fermer.

Avant d’exécuter le scénario 2 de cet exemple de code, effectuez les tâches suivantes.

Créer un lien de lancement rapide

1. Sur le site web hôte, choisissez MODIFIER LES LIENS.

2. Choisissez un lien.

   

3. Dans Texte à afficher, entrez Mon entrée de lancement rapide.

4. Dans Adresse, entrez l’URL d’un site Web.

5. Choisissez OK>Enregistrer.

Page Créer un site

1. Sur le site web hôte, choisissez Contenu> du siteSite Pages>Nouveau.
2. Dans Nouveau nom de page, entrez Hello SharePoint.
3. Sélectionnez Créer.
4. Entrez Page de test dans le corps de la page.
5. Cliquez sur Enregistrer.

Exécuter l’exemple d’application Core.JavaScriptCustomization

Lorsque vous exécutez cet exemple de code, une application hébergée par le fournisseur apparaît, comme illustré dans la figure suivante. Cet article décrit les scénarios 1 et 2, car vous pouvez utiliser les techniques de ces deux scénarios pour fournir des versions localisées de votre page de site et des titres de lien de lancement rapide .

Scénario 1

Le scénario 1 montre comment ajouter une référence à un fichier JavaScript sur un site SharePoint à l’aide d’une action personnalisée. Le choix du bouton de personnalisation Injecter appelle la méthode btnSubmit_Click dans scenario1.aspx.cs. La méthode btnSubmit_Click appelle AddJsLink pour ajouter des références aux fichiers JavaScript à l’aide d’une action personnalisée sur le site web hôte.

La figure suivante montre la page de démarrage du scénario 1.

La méthode AddJSLink fait partie du fichier JavaScriptExtensions.cs dans OfficeDevPnP.Core. AddJSLink exige que vous fournissiez une chaîne représentant l’identificateur à attribuer à l’action personnalisée et une chaîne contenant une liste d’URL délimitées par des points-virgules vers les fichiers JavaScript que vous souhaitez ajouter au site web hôte. Notez que cet exemple de code ajoute une référence à Scripts\scenario1.js, qui ajoute un message de barre de status au Web hôte.

protected void btnSubmit_Click(object sender, EventArgs e)
{
  var spContext = SharePointContextProvider.Current.GetSharePointContext(Context);
  using (var cc = spContext.CreateUserClientContextForSPHost())
  {
      cc.Web.AddJsLink(Utilities.Scenario1Key, Utilities.BuildScenarioJavaScriptUrl(Utilities.Scenario1Key, this.Request));
  }
}

if ("undefined" != typeof g_MinimalDownload && g_MinimalDownload && (window.location.pathname.toLowerCase()).endsWith("/_layouts/15/start.aspx") && "undefined" != typeof asyncDeltaManager) {
    // Register script for MDS if possible.
    RegisterModuleInit("scenario1.js", RemoteManager_Inject); //MDS registration
    RemoteManager_Inject(); //non MDS scenario
} else {
    RemoteManager_Inject();
}

var jQuery = "https://ajax.aspnetcdn.com/ajax/jQuery/jquery-2.0.2.min.js";
    // Load jQuery first, and then continue running the rest of the code.
    loadScript(jQuery, function () {
    // Add additional JavaScript code here to complete your task.
});

Cliquez sur Revenir au site. Comme illustré dans la figure suivante, le web hôte affiche à présent un message de barre de status ajouté par scenario1.js.

Scénario 2

Le scénario 2 utilise la technique décrite dans le scénario 1 pour remplacer le texte de l’interface utilisateur par le texte traduit lu à partir d’un fichier de ressources JavaScript. Le scénario 2 remplace le titre du lien de lancement rapide (Mon entrée de lancement rapide) et le titre de la page du site (Hello SharePoint) que vous avez créés précédemment. Le scénario 2 attache un fichier JavaScript qui lit les valeurs de texte traduites à partir de variables dans des fichiers de ressources JavaScript spécifiques à la culture. Le scénario 2 met ensuite à jour l’interface utilisateur.

La figure suivante montre la page de démarrage du scénario 2.

Comme indiqué, le choix de la personnalisation Injecter applique les modifications suivantes au site :

• Titre du lien de lancement rapideMon entrée de lancement rapide est remplacée par Lien Contoso.

• Le titre de la page Hello SharePoint est remplacé par Page Contoso.

  

Comme dans le scénario 1, btnSubmit_Click dans scenario2.aspx.cs appelle AddJsLink pour ajouter une référence au fichier Scripts\scenario2.js. Dans scenario2.js, la fonction RemoteManager_Inject appelle la fonction TranslateQuickLaunch , qui effectue les tâches suivantes :

• Détermine la culture du site à l’aide de _spPageContextInfo.currentUICultureName.
• Charge le fichier de ressources JavaScript contenant les ressources spécifiques à la culture qui correspondent à la culture de l’interface utilisateur du site. Par exemple, si la culture du site était anglais (États-Unis), le fichier scenario2.en-us.js est chargé.
• Remplace mon entrée de lancement rapide par la valeur de la variable quickLauch_Scenario2 lue à partir du fichier de ressources JavaScript.

function RemoteManager_Inject() {
    var jQuery = "https://ajax.aspnetcdn.com/ajax/jQuery/jquery-2.0.2.min.js";

    loadScript(jQuery, function () {
        SP.SOD.executeOrDelayUntilScriptLoaded(function () { TranslateQuickLaunch(); }, 'sp.js');
    });
}

function TranslateQuickLaunch() {
    // Load jQuery and if complete, load the JS resource file.
    var scriptUrl = "";
    var scriptRevision = "";
    // Iterate over the scripts loaded on the page to find the scenario2 script. Then use the script URL to dynamically build the URL for the resource file to be loaded.
    $('script').each(function (i, el) {
        if (el.src.toLowerCase().indexOf('scenario2.js') > -1) {
            scriptUrl = el.src;
            scriptRevision = scriptUrl.substring(scriptUrl.indexOf('.js') + 3);
            scriptUrl = scriptUrl.substring(0, scriptUrl.indexOf('.js'));
        }
    })

    var resourcesFile = scriptUrl + "." + _spPageContextInfo.currentUICultureName.toLowerCase() + ".js" + scriptRevision;
    // Load the JS resource file based on the user's language settings.
    loadScript(resourcesFile, function () {

        // General changes that apply to all loaded pages.
        // ----------------------------------------------

        // Update the Quick Launch labels.
        // Note that you can use the jQuery  function to iterate over all elements that match your jQuery selector.
        $("span.ms-navedit-flyoutArrow").each(function () {
            if (this.innerText.toLowerCase().indexOf('my quicklaunch entry') > -1) {
                // Update the label.
                $(this).find('.menu-item-text').text(quickLauch_Scenario2);
                // Update the tooltip.
                $(this).parent().attr("title", quickLauch_Scenario2);
            }
        });

        // Page-specific changes require an IsOnPage call.
        // ----------------------------------------------------------

        // Change the title of the "Hello SharePoint" page.
        if (IsOnPage("Hello%20SharePoint.aspx")) {
            $("#DeltaPlaceHolderPageTitleInTitleArea").find("A").each(function () {
                if ($(this).text().toLowerCase().indexOf("hello sharepoint") > -1) {
                    // Update the label.
                    $(this).text(pageTitle_HelloSharePoint);
                    // Update the tooltip.
                    $(this).attr("title", pageTitle_HelloSharePoint);
                }
            });
        }

    });
}

Voir aussi

• Solution de gestion de contenu d’entreprise pour SharePoint
• Solutions de localisation pour SharePoint