Desde que el mundo entero está conectado a golpe de click, cada día es más necesario trabajar en diferentes idiomas para llegar al mayor número de gente posible. Más aún si estamos en el sector tecnológico. Por ello, es muy frecuente encontrar organizaciones que necesitan tener la aplicación multilingüe.
En este artículo voy a intentar explicar cómo configurar de forma sencilla una Custom page dentro de una Model driven app para que se le muestre al usuario traducida al idioma que tenga establecido en el CRM. Para ello seguiremos los siguientes pasos:
-
Habilitar los diferentes idiomas en el entorno
-
Preparar los archivos RESX
-
Agregar los archivos RESX a la solución
-
Incluir los archivos en la custom page
-
Agregar las cadenas de traducción a los controles de la etiqueta de la custom page
-
Actualizar y administrar los recursos web
-
Comprobar las traducciones de la página en la aplicación
1. Habilitar los diferentes idiomas en el entorno
Antes de comenzar con la parte de las traducciones, tenemos que asegurarnos de que el entorno en el que las queremos aplicar está configurado para diferentes idiomas. De no ser así, tampoco podremos aplicar el cambio de idioma en la página personalizada.
Para configurar los idiomas en el entorno podemos consultar el siguiente enlace o seguir este breve resumen de los pasos:
Dentro del Centro de administración, elegimos el entorno en el que los queremos habilitar y, una vez dentro, iremos a Configuración > Producto > Idiomas y marcar o desmarcar los paquetes de idiomas que queramos tener en nuestro entorno.
Una vez habilitados los idiomas que vamos a necesitar, comenzaremos a preparar los archivos RESX, que más tarde incluiremos en la solución como recurso web.
2. Preparar los archivos RESX
Se generan a través de Microsoft Visual Studio de la siguiente manera:
-
En el Visual Studio, creamos un nuevo archivo de recursos. Deberemos repetir todo este proceso por cada idioma que se haya habilitado en el entorno, incluyendo el idioma principal.
-
El archivo se compone de tres columnas. La primera hace referencia al idioma principal del entorno. En este caso lo escribiremos en inglés. La columna Valor hace referencia a la traducción, al valor que le vamos a asignar a la columna anterior en el idioma que estemos creando, por ejemplo, en castellano. Por último, en los comentarios, hemos decidido indicar qué traducción se está realizando para facilitar su comprensión.
-
Una vez los tengamos listos, es muy importante guardarlos siguiendo el siguiente formato: nombreArchivo.IDidioma.resx
IDidioma: es el número identificador del idioma en cada caso. Podemos consultar la colección de idiomas de Microsoft Dataverse aquí.
En el siguiente ejemplo, el nombre del archivo va a ser CPopportunities y el ID varía dependiendo del idioma, quedando así:
CPopportunities.3082.resx para español,
CPopportunities.1033.resx para inglés,
CPopportunities.1036.resx para francés, etc.
3. Agregar los archivos RESX a la solución
Seleccionamos el archivo que vamos a registrar, elegimos un nombre para mostrar que será común en todos los recursos que agreguemos, le asignamos un nombre interno y elegimos que sea Tipo Cadena (RESX). Como opción, en el apartado Descripción, vamos a indicar a qué idioma hace referencia ese recurso para ayudarnos a identificar el contenido.
IMPORTANTE – El nombre para mostrar tiene que ser el mismo para todos los recursos web RESX.
Una vez agregados todos los archivos, es necesario publicar los cambios.
A continuación, muestro un ejemplo de los recursos RESX ya agregados en la solución.
4. Incluir los archivos en la custom page
En el cuadro de diálogo que se abre, buscamos nuestros recursos y elegimos el del idioma que coincida con el idioma que se está usando para crear la página. En el caso de ejemplo será el inglés.
Como se muestra en la siguiente imagen, al agregar el recurso web, el nombre que aparece es el común a todos. La plataforma asigna los idiomas en función del nombre del archivo cargado (los llamamos a todos con el mismo nombre) por lo que está englobando también todos los archivos RESX de los demás idiomas.
Solo será necesario agregar ese recurso ya que si hacemos esto para cada idioma nos aparecerá un mensaje de error que indica que los archivos ya se han cargado en su página.
5. Agregar las cadenas de traducción a los controles de etiqueta de la custom page
Para que esto ocurra, seleccionamos la etiqueta que queremos traducir. Después, en el panel de Power Fx elegimos la opción Texto y, por último, en el panel Fx indicamos el recurso web del que queremos extraer la información y el nombre del atributo (la columna Nombre del recurso RESX).
También se puede acceder a ese apartado de Texto desde las opciones avanzadas de la etiqueta cuando la seleccionamos (menú que se muestra a la derecha):
Repetir este proceso en cada etiqueta que se quiera traducir.
Una vez se tenga todo cambiado, y como nos indica Microsoft, es importante guardar y publicar tanto la página para que coja los cambios, como la aplicación para garantizar que las etiquetas se muestran con los cambios de la página.
6. Actualizar y administrar los recursos web
Siguiendo el mismo recorrido, encontramos también la opción de eliminar de la página el recurso web.
Ya sea por alguna actualización como por la eliminación del recurso, hay que guardar y publicar tanto la página como la aplicación.
Es importante que cada vez que se realice algún cambio en los archivos de traducción se sigan todos estos pasos, si no no se verán reflejadas las actualizaciones.
7. Comprobar las traducciones de la página en la aplicación
Para probar los diferentes idiomas debemos cambiar la configuración. Pulsamos en Configuración (icono del engranaje) > Configuración de personalización > Idiomas y vamos cambiando el Idioma de la interfaz de usuario para comprobar todos.
Las etiquetas de la página aparecerán traducidas al idioma que hemos elegido en el entorno.
Con estas sencillas configuraciones podemos realizar la traducción de nuestras custom pages de una forma accesible y sin necesidad de código o, al menos, con código bajo, facilitando mucho el trabajo a aquellos que no tengan conocimientos avanzados de programación o no quieran dedicarle mucho tiempo a la edición de código.
