SAP UI5 – 主题化

SAP UI5 – 主题化


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

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

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

支持平台

  • SAP NetWeaver 作为 ABAP(通过 UI Add-On 1.0 SP4)
  • SAP NetWeaver Portal(7.30 SP10 及更高版本)
  • SAP HANA 云(计划中)
  • SAP NetWeaver 门户(7.02 计划)

主要特点和优势

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

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

    • 应用程序预览(例如:采购订单审批、SAP Fiori Launchpad)

    • 控制预览

  • 不同级别的主题

    • 快速主题(基本跨技术主题设置)

    • 专家主题(特定于技术的主题设置)

    • 手动 LESS 或 CSS 编辑

  • 用于重用的调色板– 指定一组参数,其中包含定义公司品牌的主要颜色值。

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

    • SAPUI5 标准库(包括 SAP Fiori 应用程序和 SAP Fiori Launchpad)

    • 统一渲染技术(例如 Web Dynpro ABAP 和 Floorplan Manager)

    • SAP NetWeaver 业务客户端

SAP UI Client UI部分可以主题化
Web Dynpro ABAP

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

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

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

Floorplan Manager for Web Dynpro ABAP (FPM) 您可以将不使用 HTMLIslands 或 Chart UIBB 的应用程序设为主题
SAPUI5 您可以主题化 SAP 标准库。自定义 SAPUI5 库不能主题化
SAP NetWeaver Business Client (NWBC)

NWBC 桌面版(4.0 或更高版本):您可以为 NWBC 外壳和概览页面(索引页面、新标签页、服务地图)设置主题。

NWBC for HTML (3.6):您可以为服务地图设置主题。外壳不能被主题化。

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

步骤 1 – 登录 SAP Fiori 前端服务器。您可以使用T-Code: Theme Designer或使用快捷方式,如下面的屏幕截图所示并登录。

SAP 轻松访问

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

SAP ALL

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

添加目标内容
SAP UI5 目标

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

定制蓝水晶
预习

步骤 5 – 要保存主题,您可以单击保存图标,如下面的屏幕截图所示。您还可以选择保存和构建选项。

保存主题

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

保存和构建

第 6 步– 要获取此自定义主题的链接,请使用 T 代码,如下面的屏幕截图所示 –

菲奥里服务器

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

信息标签

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

屏幕

支持的主题

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

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

支持的主题

图表类型

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

 图表类型
CVOM 图表

觉得文章有用?

点个广告表达一下你的爱意吧 !😁