En Clariba tenemos muchos años de experiencia en el desarrollo y mantenimiento de cuadros de mando en SAP Design Studio y SAP Lumira. Desde el principio, reconocimos el poder que estas soluciones tienen para producir cuadros de mando impresionantes y funcionales para ejecutivos de nivel C en organizaciones de alto rendimiento en Europa y Oriente Medio.
With one of our prominent customers having more than 50 dashboards in production, and many other customers having similar complexity and volume, we developed the act·in | dashboard framework to provide a re-usable, component-based approach that allows for rapid development while also ensuring easier maintenance and support.
En este artículo, compartiremos algunos consejos y trucos que aplicaremos en nuestros cuadros de mandos. Espero que te sean útiles:
1. CSS
¡Pobre CSS , tan útil y sin embargo tan desatendido! En el primer apartado abordamos los archivos CSS, ya que son una fuente común de caos, con interminables líneas de código, buscar entre ellas puede convertirse en una odisea. Para evitarlo, hay algunos principios simples que se pueden aplicar.
1.1 Un archivo CSS para cada pantalla
Hemos visto algunas empresas con múltiples cuadros de mandos, todos ellos compartiendo un mismo fichero CSS. Al principio, puede funcionar bien, pero a medida que se agreguen más cuadros de mandos, el archivo CSS único será inmanejable y será imposible mantenerlo actualizado. Así que asegúrese de que cada cuadro de mandos tenga su propio archivo CSS.
Si tienes varios cuadros de mandos que comparten un archivo CSS porque es una forma de mantener el diseño consistente, hay una mejor manera de hacerlo - vincular.
1.2 Vincula archivos CSS
CSS nos permite vincular diferentes archivos entre sí. Podemos tener un archivo “framework” CSS en el que crearemos clases comunes para todos los paneles, por ejemplo: el tipo de fuente, el tamaño del título, el formato de las tablas, etc.
Luego podemos vincular este archivo CSS al archivo CSS que se está utilizando en un cuadro de mandos específico. El segundo, solo contendrá las clases que lo afectan individualmente. Al vincular, podemos acceder tanto a las clases específicas de ese cuadro de mandos como a las generales que se encuentran en el CSS “framework”.
To make this link we will create the two CSS files in the same folder, and at the beginning of our specific CSS we will make an @import of our framework:
1.3 Establece el tipo de fuente
A veces encontramos que el tipo de fuente se especifica en cada clase, lo cual es innecesario y causa más trabajo si necesita ser cambiado. Definir la misma fuente para todos nuestros cuadros de mandos es muy simple: solo tenemos que agregar una línea de código. Si lo agregamos al CSS “framework”, solo tenemos que cambiar esta línea para cambiar la fuente en todos los cuadros de mandos:
NB: This type of font is also applied to the icons. To be able to visualize the SAP icons we will have to specify the font as follows:
1.4 Añade variables
En este momento, estamos usando las variables para estandarizar los colores que se usan en los cuadros de mandos, pero estamos seguros de que les podemos sacar más partido.
Declarar las variables en el CSS “framework” significa que si queremos cambiar un color solo tenemos que cambiarlo en un lugar. Además, nos permite mantener la consistencia de colores en todos los cuadros de mandos sin tener que recordar el código RGB correcto cada vez. En cambio, solo usamos el nombre de la variable que hemos definido para ese color.
Declaración de variables:
Uso de las variables:
2. Framework
Es importante que consideremos los elementos comunes que se compartirán en todos los cuadros de mandos, por ejemplo, el encabezado, el pie de página, los filtros, las pestañas, etc. Pero no es solo el aspecto visual lo que debemos tener en cuenta. También hay scripts que podemos agregar al framework, por ejemplo, scripts para formatear textos, desviaciones o para cambiar páginas, etc.
Cuando vamos a comenzar un nuevo cuadro de mandos, podemos copiar el framework y sobre este, agregar los elementos específicos de cada cuadro de mandos, manteniendo siempre la misma estructura. Siempre es beneficioso tomarse un tiempo para pensar en esto antes de comenzar a implementar un nuevo cuadro de mandos: podemos ahorrar mucho tiempo.
3. “Scripts” Reutilizables
Crear scripts reutilizables es un hábito importante que adoptar. Evita la repetición de elementos de código y reduce en gran medida el trabajo involucrado en el mantenimiento del código. Para hacerlo bien, cada “script” debe contener una sola tarea, y siempre debemos tratar de reducirla a la mínima expresión. Luego podemos agregar parámetros de entrada y crear scripts que devuelvan resultados que nos permitan concatenar tareas y lograr la funcionalidad deseada.
4. El código de los botones
A veces, nos encontraremos con cuadros de mandos de clientes que tienen todo el código en los objetos. Para alguien que no conoce el cuadro de mando, es muy difícil de entender y mantener, además que probablemente estemos duplicando código.
Una metodología mejor es llamar scripts en el objeto en lugar de escribir el código directamente. Es útil llamar a un script ingresando el objeto como parámetro, si además usamos “this” para referirnos al objeto en sí, podemos copiar y pegar el objeto sin tener que preocuparnos de cambiar el código uno por uno.
5. Lo básico
Por último, pero no menos importante, no olvide las reglas básicas de programación: se aplican a SAP Design Studio y SAP Lumira Designer tanto como a cualquier lenguaje:
Limita el uso de variables globales
Comenta el código, pero no demasiado, recuerda que un buen código debe entenderse por sí solo
Utiliza nombres fácilmente comprensibles y evita nombres que sean demasiado largos
Mantén un formato y una sangría consistentes: esto hace que tu código sea más legible
Estructura el código en funciones y agrupa las funciones en paquetes significativos
Escribe funciones de forma genérica para que puedan reutilizarse fácilmente
These are some of the key elements that we apply within our act·in | dashboard framework to deliver successful projects in over 20 countries. We hope this article has been useful to you and you can apply some of these tips & tricks in your dashboard development.
If you have a strategy you want to share, or if you simply want to know more about our act·in | dashboard framework, please leave a comment or contact us via the details below.