Internacionalización en Dashboard Sofia2

image1

 

En la nueva versión de Sofia2 se han incluido capacidades de internacionalización dentro de los dashboards. Esta característica es configurable desde el menú de edición del propio dashboard.

 

Mediante etiquetas, se pueden internacionalizar los diferentes elementos de texto del dashboard y visualizarlo a través de la configuración de idioma de la propia consola, o bien, a través del parámetro lang de la query, indicando el lenguaje requerido, que debe estar reflejado en el JSON de internacionalización mediante su referencia abreviada (en, es, pt…).

 

image2

image3

 

Este JSON de internacionalización tiene la siguiente estructura


{

"label1": {

"es": "Spanish text 1",

"en": "English text 1",

"pt": "Portuguese text 1"

},

"label1": {

"es": " Spanish text 2",

"en": " English text 2",

"pt": "Portuguese text 2"

},

"label3": {

"es": " Spanish text 3",

"en": " English text 3".

"pt": "Portuguese text 3"

},

….

}

 

Pudiendo tener cualquier número de etiquetas o idiomas reflejados en el mismo. Estas etiquetas habrá que incluirlas dentro de los diferentes elementos de texto con la siguiente sintaxis: #{label1} que será sustituida por el correspondiente valor internacionalizado.

Internacionalización en Dashboard Sofia2

Ejecución de código personalizado en Dashboards

image1

 

Siguiendo con las nuevas capacidades de los Dashboards de Sofia2, otra nueva posibilidad que se nos brinda, es la de ejecutar código javascript propio, para tener un acceso a más bajo nivel en nuestros dashboards, así como incluir nuevas interacciones, como por ejemplo botones que realicen ciertas tareas sobre el mismo o realizar cambios de estilado o la inclusión y eliminación de ciertos elementos.

 

Todo esto se puede programar en la nueva opción habilitada para ello, dentro del menú de dashboard, denominada Custom JS.

image2

 

Como se puede ver, este código tiene la posibilidad de usar jQuery, con lo que podremos acceder a diferentes elementos del dashboard o gadgets gracias a su sencilla sintaxis de selección. También, al igual que el estilado personalizado, este javascript se compartirá entre todas las páginas, por lo que habrá que tener esto en cuenta a la hora de usar esta funcionalidad.

 

A parte de ejecutar cierto código propio, un uso muy interesante es la combinación con el gadget markdown actual. Con este gadget, podemos crear contenido HTML como botones, selectores, checkboxs… combinado con la agilidad de usar bootstrap para ello y referenciar funciones que tengamos definidas en nuestro propio código javascript.

image3

Ejecución de código personalizado en Dashboards

Estilado personalizado en Dashboards Sofia2

image3

Una de las nuevas capacidades más importantes de los Dashboards de Sofia2 es la posibilidad de incluir y editar código de la hoja de estilos (css) en los mismos. Con esta característica, podemos estilar los dashboards de manera profesional, incluyendo cambios de imagen, transparencias, colores, animaciones, eliminar u ocultar elementos que no nos interesen… con toda la potencia que nos brinda este lenguaje de marcado.

 

Todo esto, se ha posibilitado gracias al remodelado del menú de edición de estilos, donde ahora, al pulsar en uno de los estilos predeterminados, podemos ver y editar en vivo el css que contiene. Este css será posteriormente inyectado al dashboard con todo nuestro estilado personalizado.

image1image2

Adicionalmente a esto, también es posible incluir uno o varios estilos externos por url. Mediante el nuevo parámetro de query styles se pueden incluir las referencias a archivos css externos separados por comas que se irán incluyendo en orden en el dashboard. Estos estilos sustituirán a los estilos base del dashboard. Hay que tener en cuenta que los propios elementos del dashboard tienen estilados de posiciones o tamaños por lo que es recomendable partir de un css de los dashboards actuales y a partir de ahí mantenerlo como estilo base.

urlDashboard?styles=url1.css,url2.css

Estilado personalizado en Dashboards Sofia2

Inyección de parámetros en Dashboards

image339

 

En la última release de Sofia2 se han mejorado las capacidades de integración de dashboards y gadgets en aplicaciones o webs. Uno de estos cambios, ha sido la posibilidad de pasar parámetros a los gadgets y dashboards de manera dinámica. Esta integración se apoya en los gadgets paramétricos que ya existían en Sofia2.

 

image1

 

Con esta nueva funcionalidad, se pueden integrar tanto gadgets como dashboards desde su url en sitios externos y, desde estos, refrescar el contenido de los mismos mediante parámetros de url.

 

image2

 

Existen dos formas de incluir estos parámetros a los gadgets:

  • Formato directo: sigue el siguiente formato y sustituye tanto en gadgets como dashboards todos los parámetros por nombre indistintamente.

          urlDashboard/Gadget?param1=value1&param2=value2

 

Gadgets:

image3

 

Dashboards:

  • Formato específico: sólo para dashboard. Con este formato podemos elegir que gadgets reciben un determinado parámetro dentro de un dashboard, con lo que podemos tener, por ejemplo, varias instancias del mismo gadget paramétrico y que cada una reciba un parámetro diferente. En este caso, se tiene que enviar una estructura más compleja en formato JSON sobre el parámetro “params” para indicar que gadget recibe un determinado parámetro o parámetros comunes a todos los gadgets. El formato es el siguiente:

image4

          urlDashboard/Gadget?params={‘idGadget1’:[{‘param1’:value1},{‘param2′: value2}],’all’:[{‘comun1’:value3},{‘param1’: value2}]}

 

Con la palabra reservada ‘all’ indicaremos que todos los gadgets recibirán un determinado parámetro. Si este parámetro ya lo tiene el propio gadget entonces tendrá preferencia el del propio gadget. En el caso anterior, si tenemos dos gadgets con IDs idGadget1 y idGadget2, el primero recibirá los parámetros:

  • param1: value1
  • param2: value2
  • comun1: value3

 

El segundo recibirá:

  • comun1:value3
  • param1:value2

image5

 

Los identificadores de Gadgets pueden obtenerse pulsando, en el modo edición del dashboard, las opciones del gadget.

image6

 

Si un gadget tiene más parámetros que los que recibe, entonces se pintará un formulario en su área de dibujado con los parámetros restantes para poder completar la lista.

Inyección de parámetros en Dashboards