Personalizar SAP BPC 10.1

Al igual que SAP, muchas empresas tienen sus propios requisitos de marca incluso para herramientas y aplicaciones internas utilizadas. Quieren que aparezca su propio logotipo, que se usen sus propias fuentes, que se pinten sus propios colores.

Admitimos este tipo de personalización de la interfaz de usuario desde el lanzamiento inicial de BPC 10.1 NW. Aun así, muchos clientes no lo saben y solicitan más información sobre cómo hacerlo. Aquí presentaré los detalles y espero que sea útil para las personas con tales necesidades.

Qué se puede personalizar

Como se ilustra a continuación, se pueden personalizar las siguientes cosas.

  1. logotipo y nombre de la aplicación, incluido el icono que se muestra en la pestaña del navegador
  2. Fondo de concha. Puede definir un color diferente o usar una imagen como fondo.
  3. Íconos en la página de inicio
  4. Nombre debajo de cada ícono
  5. Línea de separación
  6. Color de fondo del contenido
  7. todas las fuentes


Ejemplo de después de la personalización.


No solo las cosas en la página de inicio, los elementos de la interfaz de usuario en otras páginas también se pueden personalizar. Por ejemplo, el color y la fuente en la barra de herramientas de cada página y los cuadros de diálogo emergentes también están abiertos para la personalización.


Después de la personalización.


Cómo personalizar

Técnicamente, la personalización se realiza en un archivo CSS, que se ve a continuación.

/* ================================================================================= */

/* Special CSS for Customer Start Here; */

/* Customer Can Modify Font Style(Size/Color/Family); Nav Icon; Page Background; Logo */

/* Customer’s Modification Can Affect One Theme or All Themes */

/* ================================================================================= */

/* ================================================================================= */

/* For All Themes */

/* ================================================================================= */

/* ======================================================================== */

/* Global Font Face */

/* ======================================================================== */

.sapUiBody *{

    font-family: Times New Roman;

}

/* ======================================================================== */

/* Logo */

/* ======================================================================== */

.bpc-shell-logo
{

    background:url(img_c/logo_sample.png) no-repeat;

    background-size:100%;

    width:40px;

}

/* ================================================================================= */

/* For Theme Goldreflection */

/* All Selector Should Begin by ‘html[class*=’goldreflection’]’ */

/* ================================================================================= */

/* ======================================================================== */

/* Global Font Style */

/* ======================================================================== */

html[class*=’goldreflection’] .sapUiBody *
{

    font-family: Century Gothic;

}

/* ======================================================================== */

/* Shell Background */

/* ======================================================================== */

html[class*=’goldreflection’] .sapUiUx3ShellHeader,

html[class*=’goldreflection’] .sapUiUx3ShellBgImg
{

    background:#213950;

}

html[class*=’goldreflection’] .slideClass
{

    background-color:#F5F2E8;

}

/* ======================================================================== */

/* Homepage Top Nav Icon */

/* ======================================================================== */

html[class*=’goldreflection’] .homeview-navigation-bar li:nth-child(2){

    background-image:
url(img_c/home_bar_activities_sample.png);

}

html[class*=’goldreflection’] .homeview-navigation-bar li:nth-child(3){

    background-image:
url(img_c/home_bar_library_sample.png);

}

html[class*=’goldreflection’] .homeview-navigation-bar li:nth-child(4){

    background-image:
url(img_c/home_bar_consolidation_sample.png);

}

html[class*=’goldreflection’] .homeview-navigation-bar li:nth-child(5){

    background-image:
url(img_c/home_bar_administration_sample.png);

}

html[class*=’goldreflection’] .homeview-navigation-bar li:nth-child(6){

    background-image:
url(img_c/home_bar_reports_sample.png);

}

html[class*=’goldreflection’] .homeview-navigation-bar li:nth-child(7){

    background-image:
url(img_c/home_bar_documents_sample.png);

}

html[class*=’goldreflection’] .homeview-navigation-bar li:nth-child(8){

    background-image:
url(img_c/home_bar_temp_sample.png);

}

/* ======================================================================== */

/* Homepage Top Nav Title */

/* ======================================================================== */

html[class*=’goldreflection’] .homeview-navigation-bar .sapUiUx3NavBarItemSel > a
{

    color:#921F1F;

}

html[class*=’goldreflection’] .homeview-navigation-bar .sapUiUx3NavBarItem
{

    color:#B6AF9E;

}

/* ======================================================================== */

/* Shell Navigation Bar Line & Arrow */

/* ======================================================================== */

html[class*=’goldreflection’] .sapUiUx3NavBar
{

    border-color:#AD754F;

}

html[class*=’goldreflection’] .sapUiUx3NavBarArrow
{

    border-bottom-color:#AD754F;

}

/* ======================================================================== */

/* Workspace */

/* ======================================================================== */

html[class*=’goldreflection’] .sapEpmUiControlsCustomToolBar{

    background:#C9D6DB;

}

html[class*=’goldreflection’] .sapEpmUiControlsWorkspaceLowerDiv > .sapUiSplitter > .sapUiVSplitterFirstPane{

    background:#FFF;

}

html[class*=’goldreflection’] .sapEpmUiControlsViewContainer{

    background:#FFF;

}

/* ======================================================================== */

/* Dialog */

/* ======================================================================== */

html[class*=’goldreflection’] .sapUiDlg{

    background:#213950;

}

/* ================================================================================= */

/* For Theme UX */

/* All Selector Should Begin by ‘html[class*=’ux’]’ */

/* ================================================================================= */

/* ======================================================================== */

/* Global Font Style */

/* ======================================================================== */

html[class*=’ux’] .sapUiBody *{

    font-family: Tahoma;

}

/* ================================================================================= */

/* For Theme HCB */

/* All Selector Should Begin by ‘html[class*=’hcb’]’ */

/* ================================================================================= */

/* ======================================================================== */

/* Global Font Style */

/* ======================================================================== */

html[class*=’hcb’] .sapUiBody *{

    font-family: Trebuchet MS;

}

Hay muchos selectores en este archivo CSS. Necesita saber dónde definir qué. La siguiente tabla le ofrece una asignación de elementos y selectores de la interfaz de usuario.

Parte de la función Selector CSS
All Font Face .sapUiBody *
Logo .bpc-shell-logo
Fondo de concha .sapUiUx3ShellHeader, .sapUiUx3ShellBgImg
Fondo de contenido .slideClass
Íconos de navegación .homeview-navigation-bar li: nth-child (2)/(3)/(4) …
Título de navegación (resaltado) .homeview-navigation-bar .sapUiUx3NavBarItemSel> a
Título de navegación (normal) .homeview-navigation-bar .sapUiUx3NavBarItem
Línea de navegación .sapUiUx3NavBar
Flecha de navegación .sapUiUx3NavBarArrow
Barra de herramientas del espacio de trabajo .sapEpmUiControlsCustomToolBar
Fondo del panel izquierdo del espacio de trabajo .sapEpmUiControlsWorkspaceLowerDiv> .sapUiSplitter> .sapUiVSplitterFirstPane
Fondo del panel derecho del espacio de trabajo .sapEpmUiControlsViewContainer
Fondo de cuadro de diálogo/encabezado .sapUiDlg

BPC 10.1 NW ofrece dos temas: estándar (el predeterminado, que también se denomina reflejo dorado internamente) y tema de alto contraste. Puede personalizar cualquiera de ellos solamente o personalizar todos. Si no especifica un prefijo, lo define a nivel global y su código CSS afecta a todos los temas; si especifica un prefijo, solo personaliza el tema en particular.

Aquí está el mapeo entre el nombre del tema y el prefijo CSS.

Nombre del tema Prefijo en CSS
Reflejo de oro html[class*=’goldreflection’]
Alto contraste negro html[class*=’hcb’]

Algún código de muestra

Define tu logo. Tenga en cuenta que el logotipo tiene una altura fija de 18 píxeles. Su propio logotipo cambiará de tamaño proporcionalmente para adaptarse a la altura. El tipo de archivo puede ser gif, jpg o png. Y para su referencia, la imagen original del logotipo de SAP es un archivo png de 73 × 36.

.bpc-shell-logo{

    background:url(img_c/logo.png) no-repeat;

    background-size:100%;

    width:40px;

}

Cambiar color de fondo. Obviamente, el siguiente código es solo para el tema estándar: Goldreflection

html[class*=’goldreflection’] .sapUiUx3ShellHeader,

html[class*=’goldreflection’] .sapUiUx3ShellBgImg{

    background:#213950;

}

Cambiar imagen de fondo.

html[class*=’goldreflection’] .sapUiUx3ShellHeader,

html[class*=’goldreflection’] .sapUiUx3ShellBgImg{

background:url(img_c/background.png) no-repeat;

}

Si desea cambiar el nombre de la aplicación y el ícono de la pestaña del navegador, necesita un archivo personalizar.json y colocar el siguiente código en el archivo. Tenga en cuenta que la imagen del icono debe ser un archivo ico de 32 × 32.

{

“title”:
“Business Planning and Consolidation”,

“titleImage”:
“themes/bas/img_c/saplogo.ico”

}


Archivos de muestra

Para acelerar dicha personalización, también entregamos archivos de muestra en su instalación de BPC. Aquí se explica cómo obtener los archivos de muestra.

  1. Inicie sesión en su servidor de aplicaciones con suficientes privilegios.
  2. Transacción abierta SE80
  3. Vaya a “Repository Browser” y abra la aplicación BSP “bpcwebclient”
  4. Vaya a “bpcwebclient/Page Fragments/themes/bas/” para descargar el archivo css de muestra (customer_sample.css) o copie el código.
  5. Vaya a “bpcwebclient/Page Fragments/” para descargar el archivo JSON de muestra (personalizar_muestra.json) o copie el código.


Cómo desplegar

Debe cambiar el nombre del archivo como customer.css y cutomize.json y cargarlos en su servidor web BPC, luego activarlos. Aquí están los pasos detallados (creamos los archivos en el servidor directamente y pegamos su código en ellos).

  1. Inicie sesión en su servidor de aplicaciones con suficientes privilegios.
  2. Transacción abierta SE80
  3. Vaya a “Repository Browser” y abra la aplicación BSP “bpcwebclient”
  4. Haga clic derecho en “Fragmentos de página” y luego haga clic en “Crear” en el menú contextual emergente.
  5. Ingrese “themes/bas/customer.css” como nombre de la página, seleccione “Fragmento de página” como tipo de página, y luego haga clic en el botón Guardar para guardar. (consulte la captura de pantalla a continuación)
  6. Copie el contenido de su customer.css local en el archivo y luego actívelo (Ctrl + F3).
  7. Ir a “MIMEs/themes/base/img_c/”.
  8. Haga clic con el botón derecho en la carpeta “img_c” y luego haga clic en “Importar objetos MIME” en el menú contextual emergente.
  9. Sube tus archivos de imagen uno por uno.
  10. Haga clic derecho en “Fragmentos de página” y luego haga clic en “Crear” en el menú contextual emergente.
  11. Ingrese “personalizar.json” como nombre de página, seleccione “Fragmento de página” como tipo de página, y luego haga clic en el botón Guardar para guardar.
  12. Copie el contenido de su personal.json local en el archivo y luego actívelo (Ctrl + F3).


Resumen

En BPC 10.1 NW, con una simple escritura CSS, puede personalizar la interfaz de usuario web de BPC a su propio tema para satisfacer la necesidad de marca de su organización. Dicha personalización es compatible con el producto, se mantendrá intacto y funcionará como antes, incluso si actualiza a un paquete de soporte BPC posterior. La solución también es independiente de la tecnología de modelado (BPC Standard y BPC Embedded) ya que el servidor web es compartido.

Fuente: https://blogs.sap.com/2016/10/21/customize-bpc-10.1-nw-web-ui-theme/

Responder

Introduce tus datos o haz clic en un icono para iniciar sesión:

Logo de WordPress.com

Estás comentando usando tu cuenta de WordPress.com. Salir /  Cambiar )

Google photo

Estás comentando usando tu cuenta de Google. Salir /  Cambiar )

Imagen de Twitter

Estás comentando usando tu cuenta de Twitter. Salir /  Cambiar )

Foto de Facebook

Estás comentando usando tu cuenta de Facebook. Salir /  Cambiar )

Conectando a %s

Este sitio usa Akismet para reducir el spam. Aprende cómo se procesan los datos de tus comentarios .