SAP UI5 - 主题



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

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

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

支持的平台

  • SAP NetWeaver 作为 ABAP(通过 UI 附加组件 1.0 SP4)
  • SAP NetWeaver Portal(7.30 SP10 及更高版本)
  • SAP HANA Cloud(已计划)
  • 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 Business Client

SAP UI 客户端 UI 部件可以进行主题设置
Web Dynpro ABAP

您可以对不使用以下 UI 元素的应用程序进行主题设置

  • HTMLIsland
  • HTMLContainer
  • 图表
  • FlashIsland
  • SilverlightIsland
  • BusinessGraphics

截至 SAP NetWeaver 7.0 EHP2,您只能使用 UI 主题设计器为 Web Dynpro ABAP 应用程序创建的主题。

Web Dynpro ABAP 的 Floorplan Manager (FPM) 您可以对不使用 HTMLIslands 或 Chart UIBBs 的应用程序进行主题设置
SAPUI5 您可以对 SAP 标准库进行主题设置。无法对自定义 SAPUI5 库进行主题设置。
SAP NetWeaver Business Client (NWBC)

NWBC for Desktop(4.0 或更高版本):您可以对 NWBC shell 和概述页面(索引页面、新选项卡页面、服务映射)进行主题设置。

NWBC for HTML(3.6):您可以对服务映射进行主题设置。无法对 shell 进行主题设置。

如何在 SAP Fiori 中调用主题设计器?

步骤 1 - 登录到 SAP Fiori 前端服务器。您可以使用T 代码:主题设计器或使用以下屏幕截图中所示的快捷方式并登录。

SAP Easy Access

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

SAP ALL

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

Add Target Content SAP UI5 Target

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

Custom Blue Crystal Preview

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

Save Theme

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

Save and Build

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

Fiori Server

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

Info Tab

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

Screen

支持的主题

这些是随 UI5 提供的默认主题 -

  • 蓝色水晶
  • 金色反射
  • 移动视觉识别
  • 高对比度黑色
Supported Theme

图表类型

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

 Chart Types CVOM Charts
广告