SAP Fiori - Designer de Tema

O designer de tema da IU é 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 seus temas de identidade corporativa facilmente, 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

Os principais recursos e benefícios são apresentados a seguir.

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

  • Build-in preview pages - Selecione as páginas de visualização integradas para ver a aparência do seu tema personalizado quando aplicado a um aplicativo.

  • Application previews - Exemplo: aprovação do pedido de compra, SAP Fiori Launchpad

  • Control previews.

Diferentes níveis de temas

  • 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.

  • Paleta de cores para reutilização - Especifique um conjunto de parâmetros com os principais valores de cores que definem sua marca corporativa

  • Tema de tecnologia cruzada - 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 -

  • Ilha HTML

  • Container HTML

  • Chart

  • Ilha Flash

  • Silver Light Island

  • Gráficos de Negócios

  • Você só pode consumir temas criados com o designer de tema de interface do usuário 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 um tema para aplicativos que não usam ilhas HTML ou fazer gráficos de UIBBs
SAPUIS Você pode criar um tema para bibliotecas padrão SAP. Bibliotecas SAPUI5 customizadas não podem ter temas.
SAP NetWeaver Business Client (NWBC)
  • NWBC for Desktop (4.0 or higher) - 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 for HTML (3.6)- Você pode tema o mapa de serviço. O shell não pode ser temático.

Como chamar o Theme Designer no SAP Fiori?

Faça login no servidor SAP Fiori Front-end.

Você pode usar o T-Code: Theme Designer ou use o atalho conforme mostrado abaixo e faça o login.

Depois de fazer o login, você terá todos os modelos padrão fornecidos pelo SAP para Theme Designer. Selecione o tema padrão e clique emOpen.

Digite o link Fiori Launchpad e o nome do aplicativo e clique em ADD.

Do lado direito, você pode selecionar cor, fonte, imagem e outras propriedades. Você pode editar as cores conforme mostrado no instantâneo fornecido abaixo.

Para salvar o tema, clique no ícone salvar conforme mostrado abaixo. Você também tem a opção de salvar e construir.

Depois de selecionar Save and Build, ele começará a ser salvo e, uma vez concluído, você receberá uma confirmação de Salvar e construir concluído.

Para obter o link deste tema personalizado, use T-code:theme_tool.

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

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