En muchas ocasiones, a la hora de personalizar nuestro portal corporativo SAP nos encontramos con una herramienta de diseño algo limitada: el Theme Editor. En este artículo se va a explicar qué alternativas tenemos para customizar SAP Enterprise Portal de una manera más libre y que permite lograr resultados más trabajados.
Limitaciones del Theme Editor del Portal de SAP
Como comentaba al inicio, la herramienta que por defecto está disponible en SAP Portal para dar formato a las páginas de framework del nuestro portal SAP es el Theme Editor. Esta herramienta, permite crear temas propios, basados en los temas predeterminados puestos a disposición por SAP, con los que crear una identidad corporativa propia para el portal.
Sin embargo, el Theme Editor limita en gran medida la capacidad del diseñador ya que sólo permite modificar algunas propiedades de ciertos elementos:
- No es posible añadir nuevas reglas con las que personalizar elementos de la interfaz de usuario no tratados por defecto, ni por supuesto utilizar imágenes de fondo que no sean las a priori solicitadas por la propia herramienta.
- Así mismo, tampoco es sencillo ampliar las reglas de estilo ya dispuestas por SAP. Para esto último, es posible llevar a cabo trucos, añadiendo propiedades CSS concatenadas a valores de las propiedades propuestas, de manera que se “cuelen” nuevas propiedades.
A continuación se muestra un ejemplo de cómo añadir la propiedad padding a una regla que a priori no trataba esta propiedad.
UI Theme Designer: Nuevas formas de diseñar el portal SAP
Todo esto puede quedar atrás si hacemos uso de la nueva funcionalidad que ofrece SAP Enterprise Portal desde su versión 7.30: UI Theme Designer.
Esta nueva herramienta surge sobre todo ante la aparición de SAP Fiori UX, con la que SAP pretende dar un paso adelante en lo que a trabajar la interfaz y experiencia de usuario se refiere.
Con la activación del UI Theme Designer, podemos abordar la personalización de nuestro SAP Enterprise Portal de dos maneras:
1. Utilizando la propia herramienta UI Theme Designer
Este método sigue con la idea de edición propuesta que ya conocemos del Theme Editor, pero ofreciendo una interfaz mucho más agradable y sencilla para no diseñadores con selectores de color, explorador de ficheros entre otros muchos aspectos.
El UI Theme Designer está disponible desde el rol de portal Content Management, accediendo al apartado Portal Display>UI Theme Designer.
2. Editando directamente los ficheros CSS de la interfaz web del portal SAP
Desde el rol de portal Content Management, disponemos de una nueva sección “Repository para recursos web”, a través de la que será posible cargar y descargar recursos web (CSS, imágenes etc.) propios de cada theme creado en el UI Theme Designer, ya sea modificando los ya existentes o incluyendo nuevos.
Esta opción es más compleja, pero aporta una mayor flexibilidad a la hora de diseñar una interfaz de usuario para nuestro portal corporativo SAP.
Como se puede ver en la imagen, dentro de la carpeta theming aparecen diferentes carpetas que agrupan recursos web para diferentes controles y elementos de la interfaz del portal (AFP para los elementos del Ajax Framework Page, UR>ls para controles de interfaces Web Dynpro etc.)
Dentro de cada una de esas carpetas encontraremos otra carpeta con el nombre de cada tema creado en el UI Theme Designer y dentro de estas segundas se encontrarán los ficheros CSS para cada navegador (o grupo de navegadores) para los que se prepara el portal de SAP.
Una vez localizados los ficheros generados por el UI Theme Designer, es posible descargar y recargar estos ficheros (CSS, imágenes, fuentes etc.) tantas veces como queramos, dejando libre la imaginación de los diseñadores, hasta ir consiguiendo la interfaz corporativa deseada para nuestro portal de SAP.
