SAP BAS中Fiori开发的高阶功能(storyboard, navigation, guided development, variant)

1. 前言

在之前的几篇文章中，我介绍了SAP BAS的一些基本功能，包括账户申请，创建工作区，git的使用以及如何step-by-step去创建出你的第一个Fiori项目等等。在本篇中，我将进一步介绍一些在开发Fiori应用程序时会用到的高阶功能。

2. 功能点

2.1 SAP Fiori View

在SAP Fiori视图活动中，我们可以访问应用程序建模器（Application Modeler）以及一些 通用的SAP帮助文档和消息发布。

我们可以通过Application Modeler来显示、修改已有的应用程序界面，也可以在此为应用程序添加新页面。

2.1.1 Page Map

在page map页面可以更改应用程序的页面结构，也可更改应用程序的设置例如如标题，描述或灵活列布局（Flexible Column Layout）。这些改动都会被保持至manifest.json配置文件中。

当然，通过page map可以为应用新增页面。

2.1.2 Page Editor

在Page Edior中，可以展示出每个Page元素，并在Properties面板上更改它的设置。
通过Page Editor对页面进行的调整会保存至manifest.json文件中或保存为SAPUI5 Flexibility Change。

2.2 Service Modeler

SAP BAS中的服务建模器Service Modeler支持基于.xml /.edmx 文件的OData V2/V4服务模型的可视化。打开Service Modeler的两种方式：

• 通过命令面板，输入命令：Fiori: Open Service Modeler
• 右键metadata.xml文件，然后选择Override Annotations

通过service modeler我们可以：

• 轻松浏览复杂的服务，并查看服务的实体集、实体和属性
• 查看与服务的实体和属性相关联的注释annotations
• 管理SAP Fiori元素应用程序所需的服务，例如向项目添加新服务或同步已经存在的服务
• 管理与SAP Fiori元素项目的不同OData服务相关联的本地注释文件（local annotation）
• 在本地覆盖annotations(通过使用复制annotation按钮)

2.3 Manifest Manager

Manifest Manager包含两部分功能：Service Manager服务管理器和Annotation File Manager注解文件管理器。

邮件manifest.json文件，可以选择打开哪种管理器：

2.3.1 Service Manager

通过Service Manager服务管理器可以为项目添加新服务(仅适用于Overview floorplan和Freestyle应用程序)，以及从服务器刷新服务，进而重新生成本地的metadata.xml和annotation XMLL。

2.3.2 Annotation File Manager

通过Annotation File Manager注解文件管理，则可以：

• 列出项目中所有的annotations文件
• 创建新的本地annotation文件
• 更改注解文件的顺序
• 激活/取消激活/删除注解文件

2.4 Storyboard

打开Storyboard的方式，命令面板 中输入命令 Open Storyboard 。通过故事版storyboard可以用图形化编辑器和向导的方式开发应用程序。

故事板提供了应用程序的数据模型、外部数据模型、服务和应用程序的UI前端的图形视图，以及它们之间的连接关系。这种可视化的表现形式让开发人员可以快速理解应用程序的结构和组件。

Storyboard也可以显示为树状结构。

2.5 Service Diagram

在Storyboard中有一个隐藏功能，那就是service diagram。在storyboard上点击service name, 然后选择View Diagram可以打开对应服务的Service Diagram。

在service diagram中可以显示metadata.xml文件的不同可视化模式：

• 通用（General）:实体及其属性的列表
• 图表 (Diagram):可视化实体及其关系
• 元数据 (Metadata):显示纯XML文件

注意，单独打开metadata.xml文件时，其仅会显示为元数据的格式。仅在service diagram中，可以显示成图表的方式。

2.6 Guided Development

通过有Guided Development，可以查看如何在SAP Fiori元素应用程序中实现某些功能的指南和教程。可以使用命令面板的 Fiori: open Guided Development 命令，或邮件webapp文件夹打开此功能。

选定功能后，可以直接通过Guided Development一步一步实现选定的扩展功能。

2.7 App-to-App Navigation (应用间导航)

如果两个应用程序位于相同的workspace工作空间中，则可以用预览功能，来测试从一个应用程序到另一个应用程序的导航。

使用命令面板并选择 Fiori: Enable App-to-App Navigation Preview 命令启动此功能

1.  选择源项目-配置将被添加到该项目
2.  选择目标项目-想要导航的位置

该命令生成一个新的配置 appconfig/fioriSandboxConfig.json 到源应用程序文件夹，并更新ui5.yaml 文件。可以向同一个源应用程序添加多个目标导航。

2.8 在外部的Fiori Launchpad上运行Fiori应用程序

SAP BAS为用户提供测试应用程序运行的能力，而无需在外部Fiori Launchpad上重新部署应用程序。打开命令面板, 输入命令Fiori: Add FLP Embedded Configuration:

然后完成以下步骤：

1. 以小写输入已部署应用程序的BSP（BSP容器是SAP系统中的一个存储位置，用于存放Web应用程序的所有文件，每个BSP容器都有一个唯一的名称，可以通过这个名称在SAP系统中访问到对应的Web应用程序）
2. 输入含后端配置的YAML（通常是_ui5.yaml_文件）
3. 输入到SAP Fiori Launchpad的相对链接，例如sap/bc/ui5_ui5/ui2/ushell/shells/abap/Fiorilaunchpad.html (将根据后端服务解析)
4. 构建应用程序
5. 使用新的start-embedded脚本运行应用程序

完成任何更改后，应用程序不会立即刷新，需要通过执行npm _run build_ _来重新构建应用，进而查看UI上的变化。一旦构建执行完成，在外部启动台上运行的应用程序就会自动刷新。

2.9 创建开发者变式

通过SAP Fiori工具提供的variant creation，开发人员可以为应用程序或单个表创建variant，这些variant变式可以与应用程序一起交付给用户。这些variant将会作为SAPUI5 flexibility changes存储在项目的webapp/changes文件夹中，并在构建Build步骤中与应用程序一起打包。

执行NPM脚本 start-variables-management。也可以使用NPM脚本start-control-property-edito，它会以UI自适应模式打开应用程序，并封装在属性编辑器页面中。

如果这个脚本不存在，可以通过命令面板的 Fiori: Add Configuration for Variants Creation 命令来配置此功能。

对于每个新变体，在项目的webapp/changes文件夹中会创建一个或多个SAPUI5更改文件。

2.10 在本地运行单元测试

您可以在本地运行单元测试。使用预配置的NPM脚本，创建一个运行配置（run configuration）或从终端（terminal）启动它。

fiori run --open webapp/test/unitTests.opa.html

3 小结

在本文中，介绍了开发Fiori应用过程中会用到的一些高阶功能，但限于篇幅限制，对于特别复杂的功能仅是做了初步的介绍，并未完全展开。有需求的同学，可以进一步在此基础上学习和探索。