Multilenguaje en SharePoint – Diseñar portales con cultura en árabe

Hola a tod@s, en esta entrada se va a continuar comentando ciertos aspectos relacionados con los portales web con múltiples idiomas en SharePoint. Mas concretamente, como configurar y desarrollar un portal web con la cultura en árabe.

Conocimientos previos antes de implementar la solución

Antes de proponer una solución a los problemas de la cultura árabe en portales web con múltiples idiomas, hay que establecer una serie de conocimientos previos:

  • No es necesario instalar el language pack en árabe para poder disponer de un portal web en árabe, salvo que la administración y gestión que se realice en ese idioma.

  • A la hora de crear la etiqueta para el idioma en árabe, seleccionar la cultura árabe que se adapte mejor a las necesidades de la organización. SharePoint ofrece más de quince culturas árabes.

  • No es necesario tener duplicados componentes (páginas maestras, ficheros CSS o JS), solo es necesario entender cómo funcionan los componentes SharePoint y HTML en diferentes culturas.

  • No es necesario usar componentes de terceros como JQuery, pero si el portal web con múltiples idiomas lo maneja, se puede adatar el ejemplo a estas tecnologías.

Diseñar un portal web con cultura en árabe

Para el ejemplo, informar que no se va a realizar un diseño innovador. Lo que se pretende es sembrar las bases de la convivencia de diferentes culturas en un mismo diseño y para hacerlo un poco más difícil, en SharePoint.

Los componentes que se van a manejar en el ejemplo son los siguientes:

  • Hoja de estilos: Para aplicar los estilos en árabe se puede usar la misma hoja de estilos que maneja el portal web con múltiples idiomas. En la hoja de estilos se aplicarán ciertas correcciones al estar en la cultura árabe.

  • Fichero JavaScript: Se necesita un fichero JavaScript, que se ejecute al finalizar la carga de la página en el lado cliente. Lo importante es que este fichero JavaScript esté en la página maestra, debido a que se tiene que ejecutar siempre, independientemente de la cultura de la página.

  • Fichero JavaScript para la edición de contenido de páginas: Por optimización y para evitar que el diseño se vea afectado de cara a los usuarios del portal web con múltiples idiomas, se necesita otro fichero JavaScript que solo funcionará cuando se esté editando la página contenido.

  • Página maestra: Igual es necesario modificar la página maestra de portal web con múltiples idiomas, para aplicar las configuraciones pertinentes para la cultura en árabe.

Como trabaja SharePoint con múltiples idiomas

Cuando en un portal web, se le aplican múltiples idiomas, en el HTML que genera SharePoint deja información de las culturas que maneja tanto a nivel visual del cliente, como la parte de administración del sitio web. Solo hay que buscar la información entre el HTML generado.

La información la podéis encontrar en las siguientes secciones del HTML generado:

  • La etiqueta HTML dispone del atributo lang, que informa al usuario de la cultura de la página.

  • La variable JavaScript _spPageContextInfo que contiene mucha información del contexto de la página. Destacar la información sobre la cultura de la plantilla de sitio como la cultura de la página que está visualizando el usuario.

Sabiendo en todo momento la cultura de la página, se puede diseñar un sencillo programa en JavaScript que modifique la orientación del texto, si el idioma de la página es árabe. Para el ejemplo, se va a usar la variable _spPageContextInfo y la propiedad currentCultureName.

Montar la página maestra

Para el ejemplo, no se dispone de un diseño corporativo, así que se va a partir de una página maestra mínima.

Esta página maestra mínima, se puede generar directamente desde la misma colección de sitios, desde la página Administrador de diseños en la sección Editar páginas principales con el enlace Crear una página maestra mínima. El servicio crea la página maestra con extensión html, que se recomienda convertir a extensión master para importar más tarde en la biblioteca Páginas maestras y diseños de página.

Editar la página maestra mínima, en la que se realizan los siguientes cambios:

  • En al final de la sección Head se registran los ficheros JavaScript y hojas de estilos que se van a utilizar.

    <SharePoint:SPHtmlTag runat="server" id="SPHtmlTag" dir="<%$Resources:wss,multipages_direction_dir_value%>">
    <head>
    …
    …
    <SharePoint:CssRegistration Name="<% $SPUrl:~sitecollection/Style Library/BricosejosSharepoint.css %>" runat="server" />
    <SharePoint:ScriptLink Name="~SiteCollection/Style Library/BricosejosSharepoint.js" runat="server" Language="javascript" Localizable="false" />
    <SharePointPublishingWebControls:EditModePanel runat="server" ID="EditModePanel" SuppressTag="true" PageDisplayMode="Edit">
        <SharePoint:ScriptLink Name="~SiteCollection/Style Library/BricosejosSharepointEditing.js" runat="server" Language="javascript" Localizable="false" />
    </SharePointPublishingWebControls:EditModePanel>
    </head>

    La etiqueta SharePointPublishingWebControls:EditModePanel es un componente de SharePoint que se usa para mostrar o cargar componentes, dependiendo del modo en el que se encuentre la página. Para usar este componente es necesario registrarlo en la página maestra.

    <%@ Master Language="C#" %>
...
...
<%@ Register TagPrefix="SharePointPublishingWebControls" Namespace="Microsoft.SharePoint.Publishing.WebControls" Assembly="Microsoft.SharePoint.Publishing, Version=15.0.0.0, Culture=neutral, PublicKeyToken=71e9bce111e9429c" %>
<!DOCTYPE html>
    ...

    Los ficheros de recursos indicados en el ejemplo se almacenan en la biblioteca de estilos, para poder acceder a ellos desde la página maestra.

  • Dentro de la etiqueta body de la página maestra, se busca la etiqueta div con el identificador s4-bodyContainer. Todo el contenido que contenga esta etiqueta se va a contener en una nueva etiqueta div que se identificará como BriconsejoSharepoint.

    La nueva etiqueta div se utilizará tanto en la programación del JavaScript como en las hojas de estilos del portal web con múltiples idiomas.

    La nueva etiqueta BriconsejoSharepoint, contendrá el diseño del portal web. Es importante mantener la etiqueta SharePoint:AjaxDelta y su contenido, que es la encargada de almacenar el contenido de nuestras páginas.

    <body onhashchange="if (typeof(_spBodyOnHashChange) != 'undefined') _spBodyOnHashChange();">
    …
    …
    <div id="s4-workspace">
        <div id="s4-bodyContainer">
            <div id="BriconsejoSharepoint">
                <header>
                    <div class="logo">
                        <SharePoint:SiteLogoImage ID="LogoBriconsejosSharepoint" LogoImageUrl="/_layouts/15/images/siteIcon.png?rev=23" runat="server" />
                    </div>
                    <div class="title">
                        <asp:ContentPlaceHolder ID="PlaceHolderPageTitleInTitleArea" runat="server" />
                    </div>
                </header>
                <div class="content">
                    <SharePoint:AjaxDelta id="DeltaPlaceHolderMain" IsMainContent="true" runat="server">
                        <asp:ContentPlaceHolder ID="PlaceHolderMain" runat="server">
                        </asp:ContentPlaceHolder>
                    </SharePoint:AjaxDelta>
                </div>
            </div>
        </div>
    </div>
    …
    …
</body>

    NOTA: El componente ContentPlaceHolder con identificador PlaceHolderPageTitleInTitleArea se ha sacado del final de la página maestra, y solo puede ser definido una única vez.

Realizados estos ajustes, ya se dispone de la página maestra mínima que se va a usar en el ejemplo.

Montar ficheros JavaScript

Antes de elaborar los ficheros JavaScript, se va a explicar cómo funciona la orientación de contenido dentro de un portal web dependiendo de la cultura. La forma de proceder y sin ser experto maquetador son dos:

  • Mediante las hojas de estilos: A través de clases de estilos, se puede definir configuraciones para leer el contenido de izquierda a derecha y viceversa. Utilizar esta técnica, supone más dedicación, ya que hay que mantener más componentes.

  • Mediante el atributo dir de las etiquetas HTML: A través de este atributo se puede indicar que el contenido de la etiqueta se oriente a la derecha o a la izquierda. A su vez los componentes internos también invierten sus posiciones, sin indicarles nada. Utilizar esta técnica es más eficiente, ya que no hay que mantener muchos componentes.

    Avisar que, si dentro de la etiqueta que usa el atributo dir, hay otras etiquetas que manejan el atributo align, puede que la funcionalidad del atributo dir no se aplique.

Con estos conceptos básicos de orientación de contenido, en el ejemplo se va a usar la técnica del atributo ‘dir’.

BricosejosSharepoint.js

El fichero ‘BricosejosSharepoint.js’ es un fichero que siempre se va a ejecutar en el portal web con múltiples idiomas, independientemente de si la página está siendo editada por el administrador de contendió o visualizada por un cliente.

Su funcionalidad JavaScript del fichero es la siguientes:

  • En caso de que la cultura de la página es del idioma árabe, se realizan las siguientes acciones.

    • Obtiene la etiqueta div con identificador BriconsejoSharepoint.

    • Agrega a la etiqueta div al atributo dir con el valor a orientación a la derecha.

    • Agrega a la etiqueta div la clase dir para configurar los estilos necesarios a esta orientación.

document.addEventListener("DOMContentLoaded", function () {
    if (_spPageContextInfo.currentCultureName === "ar-SA") {
        // the language is Arabic
        var divBriconsejoSharepoint = document.getElementById("BriconsejoSharepoint");
        divBriconsejoSharepoint.setAttribute("class", "dir");
        divBriconsejoSharepoint.setAttribute("dir", "rtl");
    }
});

BricosejosSharepointEditing.js

El fichero ‘BricosejosSharepointEditing.js’ es un fichero que se ejecutar solamente cuando la página se está editando por parte del administrador de contenido.

El objetivo del fichero JavaScript, se usa para corregir unos malos comportamientos de unos componentes en la edición de contenido. Estos controles que tienen el atributo ‘align’ que anulan la funcionalidad del atributo ‘dir’ que tiene su contenedor padre. Eliminando el atributo ‘align’, la orientación en modo edición es la correcta.

Su funcionalidad JavaScript del fichero es la siguientes:

  • En caso de que la cultura de la página es del idioma árabe, se realizan las siguientes acciones:

    • Obtiene la etiqueta div con identificador BriconsejoSharepoint.

    • Obtener a partir de la etiqueta div obtenía previamente, todos los componentes que contenga la clase ms-formfieldcontainer.

    • Recorre todos los elementos encontrados y eliminar el atributo align.

document.addEventListener("DOMContentLoaded", function () {
    if (_spPageContextInfo.currentCultureName === "ar-SA") {
        // the language is Arabic
        var divBriconsejoSharepoint = document.getElementById("BriconsejoSharepoint");
        var divEditing = divBriconsejoSharepoint.getElementsByClassName("ms-formfieldcontainer");
        for (var i = 0, len = divEditing.length; i < len; i++) {
            divEditing[i].removeAttribute("align");
        }
    }
});

Montar fichero hoja de estilos

El diseño que se ha aplicado es muy básico, lo único importante es destacar como manejar ciertos estilos al cambiar la orientación, para que el diseño sean los mismo pero invertidos.

Hay que destacar que el título de la página contempla una separación del logotipo y que al cambiar la orientación hay que mantener la misma separación.

#BriconsejoSharepoint {
    margin: 10px;
}

#BriconsejoSharepoint header {
    margin: 5px 0px;
}

#BriconsejoSharepoint header div {
    display: inline-block;
}

#BriconsejoSharepoint header div.title {
    font-size: xx-large;
    font-family: sans-serif;
    margin: 0px 0px 0px 30px;
}

/*Alignment for arab culture*/
#BriconsejoSharepoint.dir header div.title {
    margin: 0px 30px 0px 0px;
}

Desplegar solución

Antes de desplegar todos los componentes implicados en el ejemplo, hay que saber lo siguientes:

  • Como todos los elementos son contenido personalizado, no es necesario montar un paquete WSP. Con lo que la implantación, no requiere de corte de servicio.

  • La forma correcta de desplegar todos los componentes en el portal web con múltiples idiomas es a través de SharePoint PnP.

Indicar que como el ejemplo es muy sencillo de hacer y probar, no se ha diseñado el script de PnP para su despliegue y se ha realizado de forma manual. Los pasos de la intervención son los siguientes:

  1. Acceder a la biblioteca de estilos.

    • Agregar/actualizar los ficheros JavaScript.

    • Agregar/actualizar la hoja de estilo.

    • Dejar todos los ficheros implicados publicados.

  2. Acceder a la biblioteca Páginas maestras y diseños de página.

    • Agregar/actualizar la página maestra.

    • Asegurarse que el tipo de contenido del fichero utilizado es Página maestra ASP NET.

    • Dejar la página maestra publicada.

  3. Acceder a la página Configuración de la página maestra del sitio.

    • En la sección Página maestra del sitio seleccionar la página maestra.

    • Seleccionar la opción restablecer todos los subsitios para que hereden esta configuración de página principal del sitio, para propagar la configuración a todos los sitios web de la colección de sitios.

    • Al guardar los cambios realizados, este proceso interno de SharePoint puede tardar un poco e incluso en algún caso, algún sitio web, puede que no actualice su página maestra. Solo hay que repetir el proceso.

Realizar las pruebas de verificación

Con los pasos de la intervención realizados, solo queda comprobar el comportamiento del portal web con múltiples idiomas, para comprobar que todo está correcto.

Página de contenido de un idioma no árabe.

Página de contenido en un idioma árabe.

Edición de una página de contenido en un idioma árabe.

Las conclusiones

La verdad es que implantar un portal web con múltiples idiomas, en el que se nos requiere usar idiomas poco comunes como el árabe o chino, pueden complicar bastante el desarrollo. Por ello, el objetivo de este artículo es sentar las bases de cómo se comporta en SharePoint con las diferentes culturas y cómo afrontarlos de la forma más fácil.

Hay que tener en cuenta que cada organización es un mundo y que, a la hora de crear el portal web con múltiples idiomas, hay muchos factores que pueden influir en su desarrollo, como puede ser que el diseño a aplicar sea nuevo o se tenga que reutilizar un diseño de otros portales web de la organización.

Entradas populares de este blog

Cargar archivos desde PowerApps a bibliotecas de SharePoint

Imagen
Hola a tod@s, en la siguiente entrada vengo a presentaros como cargar en bibliotecas de SharePoint Online ficheros desde una aplicación de PowerApps a través de Power Automate . Hay que indicar en un principio, que el artículo que tenía pensado redactar, tenía como objetivo explicar cómo subir ficheros de más de 75Mb de tamaño , a las bibliotecas de documentos de SharePoint Online desde una aplicación de PowerApps , pero después de realizar muchas pruebas con diferentes técnicas, métodos y herramientas, he de reconocer que ha sido ¡Un fracaso absoluto! Bueno, hay que reconocer que tan poco ha sido en valde todos los intentos realizados para conseguir este objetivo, ya que me ha servido para entender más en profundidad, cómo trabajan las herramientas de SharePoint , PowerApps , Power Automate y OneDrive , con los ficheros que tienen un tamaño grande, como puedes ser los videos. ...
Leer más

Menús desplegables relacionados en SharePoint Online

Imagen
Hola a tod@s, en la siguiente entrada vengo a presentaros como resolver de forma sencilla, uno de los principales problemas que nos encontramos los desarrolladores de SharePoint desde sus orígenes en SharePoint On-Premise. Quien no se ha topado en su vida laboral, con el clásico problema de tener que trabajar en las listas con los menús desplegables, que tienen que estar relacionados entre ellos. Como pueden ser la lista de comunidades autónomas y sus provincias en los datos de los clientes. O por poner otro ejemplo, si se trata de una empresa su negocio está relacionado con la automoción, donde la lista de modelos de los vehículos está relacionada con las marcas de vehículos que maneja la empresa. Para resolver este tipo de problemas de datos relacionados en listas, se ...
Leer más

Generar contenido para páginas modernas con JSON

Imagen
Hola a tod@s, en la siguiente entrada vengo a presentaros como implementar una solución sencilla a nuestro cliente sin tener que implementar una solución con ' SharePoint FrameWork ', a través de la customización de las vistas en las listas. A la hora de hacer ofertas y propuestas a nuestros clientes, no se dispone de un presupuesto holgado y/o el cliente desea implementar soluciones con los componentes que ofrece el producto, para no depender de la implementación de soluciones a medida, en un futuro. Teniendo en cuenta este tipo de limitaciones, en las ofertas que se realizan a nuestros clientes, la mayoría de los requisitos se pueden resolver, con los componentes que ofrece ' SharePoint Online ', ofreciendo ejemplos y diseños, de la página oficial ...
Leer más