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.
Con uno de nuestros clientes destacados con más de 50 cuadros de mando en producción, y muchos otros clientes con complejidad y volumen similares, desarrollamos el act·in | dashboard framework para proporcionar un enfoque reutilizable basado en componentes que permita un desarrollo rápido al tiempo que garantiza un mantenimiento y soporte más fáciles.
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”.
Para hacer este enlace, crearemos los dos archivos CSS en la misma carpeta, y al comienzo de nuestro CSS específico haremos un @import de nuestro “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: Este tipo de fuente también se aplica a los íconos. Para poder visualizar los íconos SAP tenemos que especificar el tipo de fuente de la siguiente manera:
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
Estos son algunos de los elementos clave que aplicamos dentro de nuestro act·in | dashboard framework para entregar proyectos exitosos en más de 20 países. Esperamos que este artículo te haya sido útil y puedas aplicar algunos de estos consejos y trucos en el desarrollo de tu cuadro de mandos.
Si tienes una estrategia que quieres compartir, o si simplemente quieres saber más sobre nuestro, act·in | dashboard framework por favor deja un comentario o contáctanos a través de los detalles a continuación.