Localización de un complemento de SharePoint de ejemplo de elementos de interfaz de usuario

El complemento de ejemplo Core.JavaScriptCustomization muestra cómo usar JavaScript para reemplazar el valor de texto de un elemento de interfaz de usuario de SharePoint por un valor de texto traducido, que se lee desde un archivo de recursos de JavaScript.

Nota:

Es responsable de mantener los valores de texto traducido en el archivo de recursos de JavaScript.

Importante

Las personalizaciones basadas en JSLink (representación del cliente) no se admiten en la experiencia moderna. Esto incluye listas y bibliotecas modernas, así como la compatibilidad de JSLink en los elementos web de vista de lista de las páginas modernas. La representación del cliente es compatible con la experiencia clásica de SharePoint Online o local.

En este ejemplo de código se usa un complemento hospedado por el proveedor para:

• Localización de una página de sitio o título del vínculo inicio rápido con valores de texto específicos.
• Conserve un título de página de sitio o vínculo de inicio rápido en un idioma principal y proporcione versiones traducidas de la página del sitio y el título del vínculo inicio rápido en otro idioma en tiempo de ejecución.
• Use archivos de recursos de JavaScript para la localización del lado cliente.
• Vincule un archivo JavaScript a un sitio de SharePoint mediante una acción personalizada.
• Compruebe la referencia cultural de la interfaz de usuario del sitio y, a continuación, cargue los valores de texto específicos de la referencia cultural desde un archivo de recursos de JavaScript.
• Sobrescriba los títulos de página de sitio e Inicio rápido con valores de texto específicos de la referencia cultural mediante jQuery.

Antes de empezar

Para empezar, descargue el complemento de ejemplo Core.JavaScriptCustomization del proyecto Office 365 Patrones y prácticas para desarrolladores en GitHub.

Antes de ejecutar este ejemplo de código, complete los pasos siguientes.

Configuración del idioma en el sitio

1. En el sitio del equipo, elija Configuración Configuración>del sitio.

2. En Administración del sitio, elija Configuración de idioma.

3. En la página Configuración de idioma , en Idiomas alternativos, elija los idiomas alternativos que el sitio debe admitir. Por ejemplo, elija Finés y Francés, como se muestra en la ilustración siguiente.

   

4. Elija Aceptar.

Establecer el idioma para mostrar en la página de perfil del usuario

1. En la parte superior del sitio de Office 365, elija la imagen de perfil y, después, Acerca de mí.

   

2. En la página Acerca de mí , elija Editar su perfil.

3. Elija los puntos suspensivos (...) para obtener opciones adicionales y, a continuación, elija Idioma y región.

4. En Mis idiomas para mostrar, elija un nuevo idioma en la lista Elegir un nuevo idioma y, a continuación, elija Agregar. Por ejemplo, elija Finés y Francés. Puede mover el idioma que prefiera hacia arriba o hacia abajo si elige las flechas arriba y abajo.

   

5. Elija Guardar todo y cerrar.

Nota:

El sitio puede tardar unos minutos en representarse en los idiomas seleccionados.

Importante

El CSOM se actualiza periódicamente con nuevas características. Si el CSOM proporciona nuevas características para actualizar la página del sitio o los títulos de vínculo de inicio rápido , se recomienda usar las nuevas características del CSOM en lugar de las opciones que se describen aquí.

Antes de ejecutar el escenario 2 de este ejemplo de código, complete las siguientes tareas.

Crear un vínculo de inicio rápido

1. En la web host, elija EDITAR VÍNCULOS.

2. Elija el vínculo.

   

3. En Texto que se va a mostrar, escriba Mi entrada de inicio rápido.

4. En Dirección, escriba la dirección URL de un sitio web.

5. Elija Aceptar>Guardar.

Crear una página de sitio

1. En la web host, elijaPáginas>de sitio de contenido> del sitioNuevo.
2. En Nuevo nombre de página, escriba Hello SharePoint.
3. Elija Crear.
4. Escriba la página Prueba en el cuerpo de la página.
5. Seleccione Guardar.

Ejecución de la aplicación de ejemplo Core.JavaScriptCustomization

Al ejecutar este ejemplo de código, aparece una aplicación hospedada por el proveedor, como se muestra en la ilustración siguiente. En este artículo se describen los escenarios 1 y 2, ya que es posible que use las técnicas de estos dos escenarios para proporcionar versiones localizadas de la página del sitio y títulos de vínculo de inicio rápido .

Escenario 1

En el escenario 1 se muestra cómo agregar una referencia a un archivo JavaScript en un sitio de SharePoint mediante una acción personalizada. Al elegir el botón Insertar personalización , se llama al método btnSubmit_Click en scenario1.aspx.cs. El método btnSubmit_Click llama a AddJsLink para agregar referencias a archivos JavaScript mediante una acción personalizada en la web host.

En la ilustración siguiente se muestra la página de inicio del escenario 1.

Nota:

El código de este artículo se proporciona tal cual, sin garantía de ningún tipo, expresa o implícita, incluidas las garantías implícitas de aptitud para un propósito particular, comerciabilidad o ausencia de infracción.

El método AddJSLink forma parte del archivo JavaScriptExtensions.cs de OfficeDevPnP.Core. AddJSLink requiere que proporcione una cadena que represente el identificador para asignar a la acción personalizada y una cadena que contenga una lista delimitada por punto y coma de direcciones URL a los archivos de JavaScript que desea agregar a la web host. Tenga en cuenta que este ejemplo de código agrega una referencia a Scripts\scenario1.js, que agrega un mensaje de barra de estado a la web host.

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

Nota:

SharePoint usa la estrategia de descarga mínima para reducir la cantidad de datos que descarga el explorador cuando los usuarios navegan entre páginas de un sitio de SharePoint. En scenario1.js, el código siguiente garantiza que si se usa la estrategia de descarga mínima en el sitio de SharePoint, siempre se llama al método RemoteManager_Inject para ejecutar el código JavaScript para agregar el mensaje de la barra de estado a la web host. Para obtener más información, vea Información general de Estrategia de descarga mínima.

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

Nota:

Algunos archivos JavaScript pueden depender de otros archivos de JavaScript que se cargarán primero antes de que puedan ejecutarse y completarse correctamente. La siguiente construcción de código de RemoteManager_Inject usa la función loadScript en scenario1.js para cargar primero jQuery y, a continuación, seguir ejecutando el código JavaScript restante.

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

Elija Volver al sitio. Como se muestra en la ilustración siguiente, la web host ahora muestra un mensaje de barra de estado agregado por scenario1.js.

Escenario 2

En el escenario 2 se usa la técnica descrita en escenario 1 para reemplazar el texto de la interfaz de usuario por texto traducido leído de un archivo de recursos de JavaScript. El escenario 2 reemplaza el título del vínculo Inicio rápido (Mi entrada de inicio rápido) y el título de la página del sitio (Hello SharePoint) que creó anteriormente. El escenario 2 adjunta un archivo JavaScript que lee valores de texto traducidos de variables en archivos de recursos de JavaScript específicos de la referencia cultural. El escenario 2 actualiza la interfaz de usuario.

En la ilustración siguiente se muestra la página de inicio del escenario 2.

Como se muestra, al elegir Insertar personalización se aplican los siguientes cambios al sitio:

• El título del vínculo Inicio rápidoMi entrada de inicio rápido se cambia al vínculo Contoso.

• El título de la página del sitio de Hello SharePoint se cambia a la página Contoso.

  

Nota:

Si los valores del título del vínculo Inicio rápido y el título de la página del sitio difieren de los que se muestran en la ilustración anterior, edite las variables quickLauch_Scenario2 y pageTitle_HelloSharePoint en el archivo de recursos de JavaScript scenario2.en-us.js o scenario2.nl-nl.js y, a continuación, vuelva a ejecutar el ejemplo de código.

El archivo scenario2.en-us.js almacena recursos específicos de la referencia cultural en inglés (EE. UU.). El archivo scenario2.nl-nl.js almacena recursos específicos de la referencia cultural holandesa. Si va a probar este ejemplo de código mediante otro lenguaje, considere la posibilidad de crear otro archivo de recursos de JavaScript que use la misma convención de nomenclatura.

De forma similar al escenario 1, btnSubmit_Click en scenario2.aspx.cs llama a AddJsLink para agregar una referencia al archivo Scripts\scenario2.js. En scenario2.js, la función RemoteManager_Inject llama a la función TranslateQuickLaunch , que realiza las tareas siguientes:

• Determina la referencia cultural del sitio mediante _spPageContextInfo.currentUICultureName.
• Carga el archivo de recursos de JavaScript que contiene recursos específicos de la referencia cultural que coinciden con la referencia cultural de la interfaz de usuario del sitio. Por ejemplo, si la referencia cultural del sitio era inglés (Estados Unidos), se carga el archivo scenario2.en-us.js.
• Reemplaza mi entrada de inicio rápido por el valor de la variable quickLauch_Scenario2 leída del archivo de recursos de 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);
                }
            });
        }

    });
}

Vea también

• Soluciones de administración de contenido empresarial de SharePoint
• Soluciones de localización para SharePoint