• SAP UI5 视频教程

SAP UI5 - 主题

UI 主题设计器是一个基于浏览器的工具，允许您通过修改 SAP 提供的主题模板之一来开发主题。

示例- 您可以更改配色方案，或添加您公司的徽标。该工具在您设计时提供主题的实时预览。

应用您的企业品牌并关注使用 SAP UI 技术构建的应用程序。UI 主题设计器是一个基于浏览器的跨主题场景工具。通过修改 SAP 提供的主题模板之一，使用它可以轻松构建您的企业形象主题。例如，您可以更改配色方案，或添加您公司的徽标。该工具针对不同的用户群体，包括开发人员、视觉设计师和管理员。

支持平台

  • SAP NetWeaver 作为 ABAP（通过 UI 附加组件 1.0 SP4）
  • SAP NetWeaver Portal（7.30 SP10 及更高版本）
  • SAP HANA 云（计划）
  • SAP NetWeaver Portal（7.02 计划）

主要特性和优点

  • 基于浏览器的图形所见即所得编辑器- 更改主题参数的值并立即查看它如何影响所选预览页面的可视化。

  • 内置预览页面- 选择内置预览页面以查看自定义主题应用于应用程序时的外观 -

    • 应用程序预览（示例：采购订单审批、SAP Fiori Launchpad）

    • 控制预览

  • 不同级别的主题-

    • 快速主题化（基本的跨技术主题设置）

    • 专家主题（特定于技术的主题设置）

    • 手动 LESS 或 CSS 编辑

  • 用于重用的调色板- 指定一组参数，其中主要颜色值定义您的公司品牌。

  • 跨技术主题- 创建一个适用于各种 SAP UI 客户端和技术的一致主题 -

    • SAPUI5标准库（包括SAP Fiori应用程序和SAP Fiori Launchpad）

    • 统一渲染技术（例如Web Dynpro ABAP和Floorplan Manager）

    • SAP NetWeaver 业务客户端

SAP 用户界面客户端 UI 部分可以主题化
Web Dynpro ABAP

您可以为不使用以下 UI 元素的应用程序设置主题：

  • HTML岛
  • HTML容器
  • 图表
  • 闪光岛
  • 银光岛
  • 商业图形

自 SAP NetWeaver 7.0 EHP2 起，您只能使用通过 UI 主题设计器为 Web Dynpro ABAP 应用程序创建的主题
Web Dynpro ABAP 的布局管理器 (FPM) 您可以主题化不使用 HTMLIslands 或 Chart UIBB 的应用程序
SAPUI5 您可以主题 SAP 标准库。自定义 SAPUI5 库无法设置主题
SAP NetWeaver 业务客户端 (NWBC)

NWBC 桌面版（4.0 或更高版本）：您可以主题 NWBC shell 和概述页面（索引页、新选项卡页、服务地图）。

NWBC for HTML (3.6)：您可以为服务地图设置主题。shell 无法主题化。

如何在SAP Fiori中调用主题设计师？

步骤 1 - 登录 SAP Fiori 前端服务器。您可以使用T-Code：主题设计器或使用如下截图所示的快捷方式并登录。

SAP 轻松访问

步骤 2 - 登录后，您将拥有 SAP 为主题设计器提供的所有默认模板。选择默认主题并单击“打开”。

SAP全部

步骤 3 - 输入 Fiori Launchpad 链接和应用程序名称，然后单击添加。

添加目标内容 SAP UI5 目标

步骤 4 - 从屏幕面板的右侧，您可以选择颜色、字体、图像和其他属性。您可以编辑颜色，如以下屏幕截图所示。

定制蓝水晶 预览

步骤 5 - 要保存主题，您可以单击“保存”图标，如以下屏幕截图所示。您还可以选择保存和构建选项。

保存主题

单击“保存并构建”后，它将开始保存，完成后，您将收到一条确认消息 -“保存并构建已完成”。

保存并构建

步骤 6 - 要获取此自定义主题的链接，请使用 T 代码，如以下屏幕截图所示 -

菲奥里服务器

步骤 7 - 选择您创建的主题，然后单击“信息”选项卡。

信息选项卡

步骤 8 - 使用 Ctrl+Y 从屏幕复制 URL 并记下这一点。

屏幕

支持的主题

这些是 UI5 附带的默认主题 -

  • 蓝水晶
  • 金色反射
  • 移动视觉识别
  • 高对比度黑色
支持的主题

图表类型

sap.viz.ui5 图表库中有多种图表类型可用于表示业务数据。以下是一些 CVOM 图表类型 - 柱形图、气泡图、折线图、饼图等。

图表类型 CVOM 图表