使用 UI Theme Designer

学习目标

  • 使用 UI Theme Designer。

主题的适配

UI Theme Designer 是一款基于浏览器的编辑器。

观看此视频，了解更多关于 UI Theme Designer 的内容。

视频：本节含 SAP 官方视频（视频 ID 1_5larq8uw），需在 learning.sap.com 在线观看。

包含三个区块的示意图：支持的技术（如 Unified Rendering、SAPUI5 等）、交付渠道（如 SAP NetWeaver AS ABAP 和 SAP Enterprise Portal）以及一条 SAP 注释 1852401。

UI Theme Designer 支持所有基于 HTML4 和 HTML5 的 Web 版 SAP 应用程序和客户端。它可通过三种渠道使用：

(SAP NetWeaver) Application Server ABAP

事务

/UI5/THEME_DESIGNER

SAP Enterprise Portal

内容管理

→

门户显示

→

门户主题

→

UI Theme Designer

SAP Business Technology Platform

SAP Fiori launchpad

→

用户操作菜单

→

主题管理器

→

启动 Theme Designer

前置条件、安装和配置信息请参见 SAP 注释 1852401 – UI Theme Designer for SAP NetWeaver AS ABAP（主 SAP 注释）。

提示

在为以下对象创建主题时 Unified Rendering，建议始终使用最新版本。请查看 SAP 注释 2090746–WD ABAP：使用 TCI 的 Unified Rendering 更新 - 说明和相关 SAP 注释。

以了解详细信息。

要设计主题，请参考以下过程。

SAP UI 主题定制流程图：1. 选择基础主题，2. 添加模板应用程序，3. 定义调色板，4. 更改主要参数，5. 深入细节。箭头表示顺序。

所有主题都有一个基础主题（CSS 文件）。对于 SAP Fiori 3，基础主题是 SAP Quartz Light。在选择用于可视化更改的模板应用程序后，新主题将基于一组与主题相关（特定样式）的 CSS 文件构建。主题生成器会将基础主题与特定样式合并为最终主题。

SAPUI5 使用 LESS 处理 CSS 参数，并允许一些附加功能。LESS 可被视为一个预处理器，用于生成最终版本的 CSS。更多信息请参见 http://lesscss.org/。

四种不同的 SAP Fiori 主题：SAP Fiori with Horizon、SAP Fiori 3、SAP Fiori 2.0 以及 High Contrast Black/White。每种主题都显示一个员工通知审批界面。

可用的基础主题取决于提供 UI Theme Designer 的系统的版本。

SAP 为 SAPUI5 提供以下主题：

SAP Morning / Evening Horizon

  • 主题发布版本为 SAP Fiori with Horizon

  • 首次交付于 SAP S/4HANA Cloud 2202 / SAPUI5 1.102

  • 使用自有字体“72”

SAP Quartz Dark

  • 主题发布版本为 SAP Fiori 3

  • 首次交付于 SAP S/4HANA Cloud 2002 / SAPUI5 1.72

  • 使用自有字体“72”

SAP Quartz Light

  • 主题发布版本为 SAP Fiori 3

  • 首次交付于 SAP Cloud Platform 1904 / SAPUI5 1.65

  • 使用自有字体“72”

SAP Belize (Deep)

  • 主题发布版本为 SAP Fiori 2.0

  • 首次交付于软件组件 SAP_UI 7.51 / SAPUI5 1.44

  • 使用字体 Arial Regular 和 Bold

SAP High Contrast Black / White

  • 主题为无障碍目的而发布

  • 首次交付于软件组件 SAP_UI 7.40 / SAPUI5 1.28

  • 提供 SAP Belize、Quartz 和 Horizon 的变体

SAP Blue Crystal – 已弃用

  • 主题发布版本为 SAP Fiori

  • 首次交付于软件组件 SAP_UI 7.40 / SAPUI5 1.28

  • 使用字体 Arial Regular 和 Bold

SAP Gold Reflection – 已弃用

  • 主题为非 Fiori 独立应用而发布

  • 首次交付于 SAPUI5 1.0

  • 不适用于 SAP Fiori

主题的维护

Theme Tool 的屏幕截图，显示针对主题 EducCornPoppy 的 Info、传输、下载和删除等主题维护选项，下方是详细的 URL 参数。

Theme Tool 管理 Application Server (AS) ABAP 主题库中的主题。可以查看、导入、导出和删除主题，也可以将主题传输到后续系统。这也是获取指向某个主题的 URI 最简单的方法。使用以下事务启动该工具：/UI5/THEME_TOOL。

观看视频，了解如何为 SAP Fiori launchpad 设置中央主题参数。设置中央主题参数

视频：本节含 SAP 官方视频（视频 ID 1_cgjsgmx6），需在 learning.sap.com 在线观看。

主题参数值

Theme

Parameter Value

SAP Belize

sap_belize

SAP Belize Dark

sap_belize_plus

SAP High Contrast Black (Belize)

sap_belize_hcb

SAP High Contrast White (Belize)

sap_belize_hcw

SAP Quartz Light

sap_fiori_3

SAP Quartz Dark

sap_fiori_3_dark

SAP High Contrast Black (Quartz)

sap_fiori_3_hcb

SAP High Contrast White (Quartz)

sap_fiori_3_hcw

SAP Morning Horizon

sap_horizon

SAP Evening Horizon

sap_horizon_dark

SAP High Contrast Black (Horizon)

sap_horizon_hcb

SAP High Contrast White (Horizon)

sap_horizon_hcw

创建 SAP Fiori 主题

业务示例

您希望使用 UI Theme Designer 为 SAP Fiori launchpad 创建并测试一个主题。

注意

本练习需要 SAP Learning 系统。登录信息由您的系统设置指南提供。

注意

本练习中，凡是值或对象名称包含 ## 的地方，请将 ## 替换为您的用户编号。

任务 1：在 UI Theme Designer 中创建主题并定义调色板

Exercise：开始练习（SAP 官方交互式练习）

步骤

  1. 在您的 SAP S/4HANA (S4H) 系统的 UI Theme Designer 中，基于 SAP Morning Horizon 主题创建一个主题。

  2. 在您的 S4H 的 SAP Easy Access 菜单中，搜索 UI Theme Designer 或启动事务 /UI5/THEME_DESIGNER。

  3. 在 UI Theme Designer 中，选择 Create a New Theme。

  4. 在 Base Theme 菜单中，选择 SAP Morning Horizon。

  5. 选择 Create Theme。

  6. 将您的 SAP S/4HANA (S4H) 系统的 SAP Fiori launchpad 添加为预览。

  7. 选择 Preview Pages 旁边的 +。

  8. 在 Link to Application 字段中，输入 /sap/bc/ui2/flp。

  9. 在 Name of Application 字段中，输入 SAP Fiori Launchpad。

  10. 选择 Add。

  11. 在您的主题中定义一个名为 CornPoppyRed 的调色板参数，其十六进制值为 E00025。

  12. 选择右上角的 Palette 选项卡。

  13. 在 Enter parameter ID 字段中，输入 CornPoppyRed。

  14. 对于 Parameter color 字段，打开值帮助。

  15. 在 Hex 字段中，输入 e00025。

  16. 选择 OK。

  17. 选择 Add palette parameter（值帮助旁边的 +）。

任务 2：在 UI Theme Designer 中设计主题

Exercise：开始练习（SAP 官方交互式练习）

步骤

  1. 在您的 S4H 的 UI Theme Designer 中，将主题中的主 Brand Color 更改为 CornPoppyRed。

  2. 在您的 S4H 的 UI Theme Designer 中，选择 Quick 选项卡。

  3. 对于 Main 组中的 Brand Color 字段，打开值帮助。

  4. 在 Palette 窗格中，选择 CornPoppyRed。

  5. 注意 Link Color 的变化。

  6. 将培训共享上课程文件夹中的 *FioriMeadow.jpg* 图像设置为您的主题的 Shell Canvas 的 Background Image/Gradient。

注意

培训共享上的课程文件夹位于 S:\Courses。

  1. 选择 Detailed 选项卡。

  2. 对于 Shell Canvas 组中的 Background Image 字段，打开值帮助。

  3. 选择 Drop image files here or press to browse。

  4. 选择 *S:\Courses\UX100_24\FioriMeadow.jpg*。

  5. 选择 Open。

  6. 选择 OK。

  7. 将主题中的 sapShellColor 更改为 CornPoppyRed。

  8. 选择 Expert 选项卡。

  9. 选择筛选器 Colors。

  10. 在 Search 字段中，输入 shellc 并选择 Enter。

  11. 对于 sapShellColor 字段，打开值帮助。

  12. 在 Palette 窗格中，选择 CornPoppyRed。

  13. 注意许多其他颜色的变化。

任务 3：在 UI Theme Designer 中构建并预览主题

Exercise：开始练习（SAP 官方交互式练习）

步骤

  1. 在您的 S4H 的 UI Theme Designer 中，将主题保存并构建为 CornPoppy##，描述为 Corn Poppy Meadow ##。在 UI Theme Designer 中运行主题预览。

  2. 在您的 S4H 的 UI Theme Designer 中，在菜单中依次选择 Theme→Save As…。

  3. 在 Theme ID 字段中，输入 CornPoppy##。

  4. 在 Title 字段中，输入 Corn Poppy Meadow ##。

  5. 选择 Save。

  6. 在菜单中，依次选择 Theme→Save & Build。

  7. 选择 Preview built theme in a new window（预览上方的三角形）。

SAP Fiori 主题的配置参数

这些定制参数可用于配置 SAP Fiori launchpad 中的主题：

DARK_MODE

指定用户是否可以启用深色模式。

true（默认）/false

THEMING_DEFAULT_THEME

指定用户的默认主题。

sap_horizon（默认）

THEMING_HIDE_SAP_THEMES

指定是否从 Settings 中移除 SAP 主题。

true/false（默认）

USERSETTINGS_SET_THEME

指定用户是否可以在 Settings 中选择其他主题。

true（默认）/false