SAP UI5 - Temas

O UI theme designer é uma ferramenta baseada em navegador que permite desenvolver seus temas modificando um dos modelos de tema fornecidos pela SAP.

Example- Você pode alterar o esquema de cores ou adicionar o logotipo da sua empresa. A ferramenta fornece uma visualização ao vivo do tema enquanto você projeta.

Aplique sua marca corporativa e observe os aplicativos desenvolvidos com as tecnologias SAP UI. O designer de tema da IU é uma ferramenta baseada em navegador para cenários de temas cruzados. Use-o para criar facilmente seus temas de identidade corporativa, modificando um dos modelos de tema fornecidos pela SAP. Por exemplo, você pode alterar o esquema de cores ou adicionar o logotipo da sua empresa. A ferramenta é direcionada a diferentes grupos de usuários, incluindo desenvolvedores, designers visuais e administradores.

Plataforma Suportada

  • SAP NetWeaver como ABAP (via UI Add-On 1.0 SP4)
  • SAP NetWeaver Portal (7.30 SP10 e versão superior)
  • SAP HANA Cloud (planejado)
  • SAP NetWeaver Portal (7.02 planejado)

Principais recursos e benefícios

  • Browser-based, graphical WYSIWYG editor - Altera os valores dos parâmetros de tema e vê imediatamente como isso afeta a visualização da página de visualização selecionada.

  • Built-in preview pages - Selecione as páginas de visualização integradas para ver como ficará o seu tema personalizado quando for aplicado a um aplicativo -

    • Visualizações do aplicativo (exemplo: aprovação do pedido de compra, SAP Fiori Launchpad)

    • Visualizações de controle

  • Different levels of theming -

    • Temas rápidos (configurações básicas de temas de várias tecnologias)

    • Temas especializados (configurações de temas específicos da tecnologia)

    • Edição manual de LESS ou CSS

  • Color palette for reuse - Especifica um conjunto de parâmetros com os principais valores de cores que definem sua marca corporativa.

  • Cross-technology theming - Crie um tema consistente que se aplique a vários clientes e tecnologias SAP UI -

    • Bibliotecas padrão SAPUI5 (incluindo aplicativos SAP Fiori e SAP Fiori Launchpad)

    • Tecnologias de renderização unificadas (como Web Dynpro ABAP e Floorplan Manager)

    • SAP NetWeaver Business Client

Cliente SAP UI As partes da IU podem ter temas
Web Dynpro ABAP

Você pode criar um tema para aplicativos que não usam os seguintes elementos da IU:

  • HTMLIsland
  • HTMLContainer
  • Chart
  • FlashIsland
  • SilverlightIsland
  • BusinessGraphics

Você só pode consumir temas criados com o designer de tema de UI para aplicativos Web Dynpro ABAP a partir do SAP NetWeaver 7.0 EHP2

Gerente de planta baixa para Web Dynpro ABAP (FPM) Você pode criar temas para aplicativos que não usam HTMLIslands ou Chart UIBBs
SAPUI5 Você pode criar um tema para bibliotecas SAP Standard. Bibliotecas SAPUI5 personalizadas não podem ter temas
SAP NetWeaver Business Client (NWBC)

NWBC para Desktop (4.0 ou superior): Você pode criar um tema NWBC shell e páginas de visão geral (página de índice, página de nova guia, mapa de serviço).

NWBC para HTML (3.6): Você pode criar um tema para o mapa de serviço. O shell não pode ser temático.

Como chamar um Theme Designer no SAP Fiori?

Step 1- Faça login no servidor SAP Fiori Front-End. Você pode usarT-Code: Theme Designer ou use o atalho conforme mostrado na captura de tela a seguir e faça o login.

Step 2- Depois de fazer o login, você terá todos os modelos padrão fornecidos pelo SAP for Theme Designer. Selecione o tema padrão e clique em Abrir.

Step 3 - Insira o link Fiori Launchpad e o Nome do aplicativo e clique em Adicionar.

Step 4- Do lado direito do painel da tela, você pode selecionar Cor, Fonte, Imagem e outras propriedades. Você pode editar as cores conforme mostrado nas imagens a seguir.

Step 5- Para salvar o tema, você pode clicar no ícone Salvar como mostrado na imagem a seguir. Você também tem a opção de salvar e construir.

Depois de clicar em Salvar e construir, ele começará a salvar e quando concluído, você receberá uma mensagem de confirmação - Salvar e construir concluído.

Step 6 - Para obter o link deste tema personalizado, use o código T conforme mostrado na imagem a seguir -

Step 7 - Selecione o tema que você criou e clique na guia Informações.

Step 8 - Use Ctrl + Y para copiar o URL da tela e anote isso.

Temas Suportados

Estes são os temas padrão fornecidos com a UI5 -

  • Cristal Azul
  • Reflexo Dourado
  • Identificação visual móvel
  • Preto alto contraste

Tipos de gráfico

Existem vários tipos de gráficos na biblioteca de gráficos sap.viz.ui5 que podem ser usados ​​para representar os dados de negócios. A seguir estão alguns tipos de gráfico CVOM - Coluna, Bolha, Linha, Pizza, etc.