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.
-
logotipo y nombre de la aplicación, incluido el icono que se muestra en la pestaña del navegador
-
Fondo de concha. Puede definir un color diferente o usar una imagen como fondo.
-
Íconos en la página de inicio
-
Nombre debajo de cada ícono
-
Línea de separación
-
Color de fondo del contenido
-
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.
-
Inicie sesión en su servidor de aplicaciones con suficientes privilegios.
-
Transacción abierta SE80
-
Vaya a «Repository Browser» y abra la aplicación BSP «bpcwebclient»
-
Vaya a «bpcwebclient/Page Fragments/themes/bas/» para descargar el archivo css de muestra (customer_sample.css) o copie el código.
-
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).
-
Inicie sesión en su servidor de aplicaciones con suficientes privilegios.
-
Transacción abierta SE80
-
Vaya a «Repository Browser» y abra la aplicación BSP «bpcwebclient»
-
Haga clic derecho en «Fragmentos de página» y luego haga clic en «Crear» en el menú contextual emergente.
-
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)
-
Copie el contenido de su customer.css local en el archivo y luego actívelo (Ctrl + F3).
-
Ir a «MIMEs/themes/base/img_c/».
-
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.
-
Sube tus archivos de imagen uno por uno.
-
Haga clic derecho en «Fragmentos de página» y luego haga clic en «Crear» en el menú contextual emergente.
-
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.
-
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/
Medievals Trucos 