Customizar Iconografía y CSS

Estructura de carpetas en Minio/S3

La carpeta cdn/ de Minio o S3 tiene como finalidad permitir agregar iconos o estilos personalizados por parte del usuario que pueden ser visualizados en la aplicación por toda la organización.

Están organizados en subcarpetas según su finalidad detallada a continuación:

Carpeta i18n

Esta carpeta contiene todos los ficheros de traducciones para el uso de Anjana.

Estos ficheros se actualizan desde Portuno, a través del botón “Upload translations files” de la cabecera, recuperando la información de BD para generar automáticamente los ficheros y subirlos a Minio/S3.

En caso de que el nombre de algún fichero de esta carpeta no coincida con un código i18n de los idiomas, conviene revisar la tabla de configuración translations de portuno porque es posible que alguna traducción no esté bien informada.

Carpeta images

Esta carpeta contiene un conjunto de subcarpetas. A continuación se detalla la finalidad de cada una de ellas.

Carpeta attribute-icons

Se encuentra dentro del directorio /images y contiene las imágenes para los atributos de tipo SELECT_IMG, MULTI_SELECT_IMG, SELECT_IMG_TXT y MULTI_SELECT_IMG_TXT.

En el apartado Iconos personalizados de este documento se detallan los requisitos que han de cumplir estos iconos y la forma de incluirlos en la aplicación para su correcto funcionamiento.

Carpeta brand

Se encuentra dentro del directorio /images y tiene como propósito permitir que el cliente suba el logo de la empresa y que se muestre tanto en la cabecera de la plataforma como en el indicador de espera. Si no se desea añadir un logo se debe dejar vacía.

En el apartado Iconos personalizados de este documento se detallan los requisitos que han de cumplir estas imágenes y la forma de incluirlos en la aplicación para su correcto funcionamiento.

Sin marca incluida:

Con marca incluida:

Indicador de espera con el logo de cliente:

Carpeta subtype-icons

Se encuentra dentro del directorio /images y contiene todos los iconos personalizables de entidades y relaciones.

En el apartado Iconos personalizados de este documento se detallan los requisitos que han de cumplir estos iconos y la forma de incluirlos en la aplicación, para su correcto funcionamiento.

Iconografía

Iconos por defecto

Son aquellos iconos que vienen por defecto en toda la aplicación y que no pueden ser modificados por el usuario. Para mejorar la experiencia de usuario, Anjana dispone de tooltips que describen el término/acción que representa el icono.

Iconos de banderas para los idiomas

El proyecto incluye un pack de banderas (que incluyen los diferentes idiomas usados en España). Para facilitar la configuración de los idiomas, se facilita una tabla con los códigos a usar para que se pueda visualizar correctamente estas banderas en el anexo al documento.

En caso de necesitar alguna bandera adicional, contacte con Global Support de Anjana Data.

Iconos de estado

Los iconos utilizados por la aplicación para representar los estados de los objetos y/o flujos van incluidos en el proyecto. Los estados que están contemplados actualmente en Anjana son: aprobado, deprecado, deshabilitado, borrador, expirado, importado, pendiente, rechazado y en espera.

Iconos personalizados

Iconos para atributos con imagen (attribute-icons)

Anjana permite personalizar los iconos que se utilizan en los atributos nuevos con imágenes: SELECT_IMG

MULTI_SELECT_IMG

SELECT_IMG_TXT

MULTI_SELECT_IMG_TXT

Características que deben cumplir los iconos para atributos con imagen

Para que los iconos se vean correctamente es necesario que cumplan los siguientes requisitos:

• Únicamente en formato SVG

• Tamaño máximo recomendado 5KB

• El nombre del archivo debe seguir la siguiente estructura (respetando mayúsculas y minúsculas):

<nombreAtributo>_<valor>.svg

Logo en la cabecera de la plataforma (brand)

Es posible añadir el logo de la organización y se mostrará en la cabecera de la plataforma de esta forma:

El logo también aparecerá por defecto en el indicador de espera:

Características que deben cumplir el logo de cliente para la cabecera

Para que el logo se vea correctamente es necesario que los iconos cumplan los siguientes requisitos:

• Únicamente en formato SVG

• Tamaño máximo recomendado del archivo 5KB

• Tamaño máximo a mostrar: 80 x 25px

• El nombre del archivo debe ser: logo.svg

Iconos de subtipo de objeto y relación (subtype_icons)

Anjana permite personalizar los iconos que se usan para los diferentes tipos de objetos en Data Catalog y en Business Glossary.

Características que deben cumplir los iconos de subtipo

Para que los iconos se vean correctamente en todas las pantallas de la aplicación es necesario que los iconos cumplan los siguientes requisitos:

• Únicamente en formato SVG

• Tamaño máximo recomendado 5KB

• El nombre del fichero subido a Minio debe ser igual que el subtipo de objeto en minúsculas. Por ejemplo: para el subtipo de entidad DATASET el icono debe llamarse dataset.svg

CSS

Es posible cambiar los estilos en Anjana pero es muy recomendable que lo haga un desarrollador con conocimientos sobre CSS para no afectar el funcionamiento de la aplicación.

Anjana no se responsabiliza de los cambios efectuados en el CSS de la aplicación.

CSS personalizado

Características que debe cumplir el fichero css

Para que los estilos editados se vean correctamente en la aplicación es necesario que se cumplan los siguientes requisitos:

• El fichero tiene que ir en la raíz de Minio cdn/

• El fichero que contiene los estilos modificados se debe llamar custom-css.css

Cómo personalizar el CSS para Anjana

En la clase donde se quieran modificar estilos, estos deben ir acompañados de !important para que así se pueda ver el cambio correctamente.

Ejemplo de modificación del color de fondo del login

Resultado

ANEXO

A continuación se detallan las banderas incluidas en el proyecto y la configuración del idioma correspondiente en la tabla de BD del esquema de zeus de languages. Para más detalle acceder a la Guía de configuración funcional.