Localizar elementos da interface do usuário exemplo de suplemento do SharePoint

O suplemento de exemplo Core.JavaScriptCustomization mostra como usar JavaScript para substituir o valor de texto de um elemento da interface do usuário do SharePoint por um valor de texto traduzido, que é lido de um arquivo de recurso JavaScript.

Este exemplo de código usa um suplemento hospedado pelo provedor para:

• Localize uma página do site ou o título do link de Início Rápido com valores de texto específicos.
• Preserve uma página do site ou o título do link de Início Rápido em um idioma principal e forneça versões traduzidas da página do site e do título do link de Início Rápido em outro idioma em tempo de execução.
• Use arquivos de recurso JavaScript para localização do lado do cliente.
• Vincule um arquivo JavaScript a um site do SharePoint usando uma ação personalizada.
• Verifique a cultura da interface do usuário do site e, em seguida, carregue valores de texto específicos da cultura de um arquivo de recurso JavaScript.
• Substituir títulos de link da página do site e do Início Rápido por valores de texto específicos da cultura usando jQuery.

Antes de começar

Para começar, baixe o suplemento de exemplo Core.JavaScriptCustomization do projeto de padrões e práticas do Desenvolvedor do Office 365 no GitHub.

Antes de executar esta amostra de código, conclua as etapas a seguir.

Definir as configurações de idioma em seu site

1. No site de equipe, escolha Configurações>Configurações do site.

2. Em Administração do Site, escolha Configurações de idioma.

3. Na página Configurações de Idioma , em Idiomas(s) alternativos, escolha os idiomas alternativos que seu site deve suportar. Por exemplo, escolha finlandês e francês, conforme mostrado na figura a seguir.

   

4. Escolha OK.

Definir o idioma de exibição na página de perfil do usuário

1. Na parte superior do seu site do Office 365, escolha a imagem de perfil e escolha Sobre mim.

   

2. Na página Sobre mim , escolha Editar seu perfil.

3. Escolha as reticências (...) para obter opções adicionais e, em seguida, escolha Idioma e Região.

4. Em Meus Idiomas de Exibição, escolha um novo idioma na lista Escolha um novo idioma e escolha Adicionar. Por exemplo, escolha finlandês e francês. Você pode mover seu idioma preferido para cima ou para baixo escolhendo as setas para cima e para baixo.

   

5. Escolha Salvar tudo e fechar.

Antes de executar o Cenário 2 desta amostra de código, conclua as seguintes tarefas.

Criar um link de Início Rápido

1. No host da Web, escolha EDITAR LINKS.

2. Escolher link.

   

3. Em Texto a ser exibido, insira Minha entrada de início rápido.

4. Em Endereço, insira a URL de um site.

5. Clique em Ok>Salvar.

Criar uma página do site

1. No host da Web, escolha Conteúdo> do sitePáginas> do SiteNovo.
2. Em Nome da nova página, insira Olá SharePoint.
3. Escolha Criar.
4. Insira a página de Teste no corpo da página.
5. Escolha Salvar.

Execute o aplicativo de exemplo Core.JavaScriptCustomization

Quando você executa essa amostra de código, um aplicativo hospedado pelo provedor é exibido, conforme mostrado na figura a seguir. Este artigo descreve o Cenário 1 e o Cenário 2 porque você pode usar as técnicas nesses dois cenários para fornecer versões localizadas da página do site e títulos de link de Início Rápido .

Cenário 1

O Cenário 1 mostra como adicionar uma referência a um arquivo JavaScript em um site do SharePoint usando uma ação personalizada. A escolha do botão Injetar personalização chama o método btnSubmit_Click no scenario1.aspx.cs. O método btnSubmit_Click chama AddJsLink para adicionar referências a arquivos JavaScript usando uma ação personalizada no host da Web.

A figura a seguir mostra a página inicial do Cenário 1.

O método AddJSLink faz parte do arquivo JavaScriptExtensions.cs no OfficeDevPnP.Core. AddJSLink requer que você forneça uma cadeia de caracteres que representa o identificador a ser atribuído à ação personalizada e uma cadeia de caracteres contendo uma lista de URLs delimitada por ponto-e-vírgula para os arquivos JavaScript que você deseja adicionar ao host da Web. Observe que esta amostra de código adiciona uma referência a Scripts\scenario1.js, o que adiciona uma mensagem de barra de status ao host da Web.

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.
});

Escolha Voltar ao site. Como mostrado na figura a seguir, o host da Web agora exibe uma mensagem da barra de status que foi adicionada por scenario1.js.

Cenário 2

O Cenário 2 usa a técnica descrita no Cenário 1 para substituir o texto da interface do usuário pelo texto traduzido lido de um arquivo de recurso JavaScript. O Cenário 2 substitui o título do link de Início Rápido (minha entrada de início rápido) e o título da página do site (Olá SharePoint) que você criou anteriormente. O cenário 2 anexa um arquivo JavaScript que lê valores de texto traduzidos de variáveis em arquivos de recursos JavaScript específicos da cultura. O cenário 2 atualiza a interface do usuário.

A figura a seguir mostra a página inicial do Cenário 2.

Conforme mostrado, escolher Injetar personalização aplica as seguintes alterações ao site:

• O título do link de Início RápidoMinha entrada de início rápido foi alterada para link da Contoso.

• O título da página "Olá" site do SharePoint foi alterado para página Contoso.

  

Semelhante ao Cenário 1, btnSubmit_Click no scenario2.aspx.cs chama AddJsLink para adicionar uma referência ao arquivo Scripts\scenario2.js. No scenario2.js, a função RemoteManager_Inject chama a função TranslateQuickLaunch , que executa as seguintes tarefas:

• Determina a cultura do site usando _spPageContextInfo.currentUICultureName.
• Carrega o arquivo de recurso JavaScript que contém recursos específicos da cultura que correspondem à cultura da interface do usuário do site. Por exemplo, se a cultura do site era inglês (Estados Unidos), o arquivo scenario2.en-us.js é carregado.
• Substitui minha entrada de início rápido pelo valor da variável quickLauch_Scenario2 lida do arquivo de recurso 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);
                }
            });
        }

    });
}

Confira também

• Soluções do Gerenciamento de conteúdo corporativo no SharePoint
• Soluções de localização para SharePoint