SAP Fiori Theme Designer, la guía para personalizar SAP Fiori

SAP Fiori es una plataforma de aplicaciones empresariales que ofrece una experiencia de usuario moderna y consistente. Los administradores Basis tienen la responsabilidad de personalizar la apariencia visual de las aplicaciones Fiori para satisfacer las necesidades específicas de sus organizaciones.

Configuración de Fiori Theme Designer para administradores

Fiori Theme Designer es una herramienta que permite a los administradores Basis personalizar la apariencia visual de las aplicaciones Fiori. La herramienta proporciona una interfaz gráfica de usuario (GUI) que facilita la creación y edición de temas.

Objetivos de esta guía

El objetivo de esta guía es proporcionar a los administradores Basis una referencia completa para la personalización visual de SAP Fiori con Fiori Theme Designer. La guía cubre los siguientes temas:

• Introducción a la personalización visual de SAP Fiori
• Introducción a Fiori Theme Designer
• Creación de un tema
• Edición de un tema
• Administración de temas

Requisitos previos

Para seguir esta guía, los administradores Basis deben tener los siguientes requisitos previos:

• Conocimiento básico de SAP Fiori
• Conocimiento básico de HTML, CSS y JavaScript
• Acceso a un sistema SAP Fiori

Introducción a la personalización visual de SAP Fiori

La personalización visual de SAP Fiori permite a los administradores Basis modificar la apariencia de las aplicaciones Fiori para satisfacer las necesidades específicas de sus organizaciones. La personalización visual puede aplicarse a los siguientes elementos de la interfaz de usuario:

• Colores
• Fuentes
• Imágenes
• Logotipos
• Disposición
• Comportamiento

Propiedades de los elementos de la interfaz de usuario

Cada elemento de la interfaz de usuario tiene una serie de propiedades que pueden personalizarse. Las propiedades más comunes incluyen:

• Color de fondo
• Color del texto
• Fuente
• Tamaño de fuente
• Espacio entre líneas
• Anchura
• Altura
• Posición

Herramientas de personalización visual

Hay dos herramientas disponibles para la personalización visual de SAP Fiori:

• Fiori Theme Designer
• Fiori Elements

Fiori Theme Designer es una herramienta que permite a los administradores Basis crear y editar temas personalizados. Fiori Elements es una biblioteca de componentes de interfaz de usuario que pueden utilizarse para crear aplicaciones Fiori personalizadas.

Introducción a Fiori Theme Designer

Fiori Theme Designer es una herramienta web que permite a los administradores Basis crear y editar temas personalizados para aplicaciones Fiori. La herramienta proporciona una interfaz gráfica de usuario (GUI) que facilita la creación y edición de temas.

Inicio de sesión en Fiori Theme Designer

Para iniciar sesión en Fiori Theme Designer, abra un navegador web y vaya a la siguiente dirección:

https://fiori-theme-designer.hana.ondemand.com/ 

Introduzca sus credenciales de SAP Fiori y haga clic en Iniciar sesión.

Creación de un nuevo tema

Para crear un nuevo tema, haga clic en Crear nuevo tema.

Introduzca un nombre y una descripción para el tema y haga clic en Crear.

Edición de un tema existente

Para editar un tema existente, haga clic en el nombre del tema.

Creación de un tema

Plantillas de temas

Fiori Theme Designer proporciona una serie de plantillas de temas que pueden utilizarse como punto de partida para la creación de temas personalizados. Las plantillas de temas están disponibles para las siguientes categorías:

• Temas de aplicación
• Temas de página
• Temas de control

Aplicación de estilos a los elementos de la interfaz de usuario

Los temas personalizados se crean aplicando estilos a los elementos de la interfaz de usuario. Los estilos pueden aplicarse a los siguientes elementos:

• Colores
• Fuentes
• Imágenes
• Logotipos
• Disposición
• Comportamiento

Adición de imágenes y logotipos

Los temas personalizados pueden incluir imágenes y logotipos. Las imágenes y los logotipos pueden utilizarse para personalizar la apariencia de las aplicaciones Fiori.

Edición de un tema

Los temas personalizados pueden editarse para modificar su apariencia. Los cambios más comunes que se realizan en los temas personalizados incluyen:

• Cambio de colores
• Cambio de fuentes
• Cambio de imágenes y logotipos

Cambio de colores

Los colores de un tema personalizado pueden cambiarse editando los estilos de los elementos de la interfaz de usuario.

Cambio de fuentes

Las fuentes de un tema personalizado pueden cambiarse editando los estilos de los elementos de la interfaz de usuario.

Cambio de imágenes y logotipos

Las imágenes y los logotipos de un tema personalizado pueden cambiarse editando los estilos de los elementos de la interfaz de usuario.

Administración de temas

Una vez que un tema personalizado se haya creado y editado, debe publicarse y desplegarse para que pueda utilizarse en las aplicaciones Fiori.

Publicación de temas

Para publicar un tema personalizado, haga clic en Publicar.

Despliegue de temas

Para desplegar un tema personalizado, haga clic en Desplegar.

Como vimos Fiori Theme Designer es una herramienta potente que permite a los administradores Basis personalizar la apariencia de las aplicaciones Fiori. Esta guía proporciona una referencia completa para la personalización visual de SAP Fiori con Fiori Theme Designer.

Recursos adicionales

• Documentación de SAP Fiori Theme Designer
• Tutoriales de SAP Fiori Theme Designer
• Foro de SAP Fiori Theme Designer

Recursos de interés técnico

• SAP Fiori Design Guidelines
• SAP Fiori Theme Designer Reference
• SAP Fiori Theme Designer API

Ejemplo de personalización visual

En este ejemplo, se creará un tema personalizado que cambia los colores de la aplicación Fiori My Inbox.

Paso 1: Inicio de sesión en Fiori Theme Designer

Inicie sesión en Fiori Theme Designer con sus credenciales de SAP Fiori.

Paso 2: Creación de un nuevo tema

Haga clic en Crear nuevo tema.

Introduzca un nombre y una descripción para el tema y haga clic en Crear.

Paso 3: Aplicación de estilos a los elementos de la interfaz de usuario

En la pestaña Elementos, expanda el árbol de elementos.

Seleccione el elemento Barra de título.

En la pestaña Estilos, cambie el color de fondo a #000000.

Paso 4: Publicación del tema

Haga clic en Publicar.

Paso 5: Despliegue del tema

Haga clic en Desplegar.

El tema personalizado ahora se aplicará a la aplicación Fiori My Inbox.

Resultado

La aplicación Fiori My Inbox ahora tendrá una barra de título de color negro.

Este ejemplo muestra cómo puede utilizarse Fiori Theme Designer para personalizar la apariencia de las aplicaciones Fiori.