使用 SAPBusiness Application Studio 创建 SAPFiori El

# 使用 SAP Business Application Studio 创建 SAP Fiori Elements应用程序

原创 申亮 [ 建广技师 ](javascript:void\(0\);)

__ _ _ _ _

1. 1\. 为 SAP Fiori Elements 开发环境

首先为其创建开发空间， 在 SAP Business Application Studio 起始页上创建开发空间并为其命名，选中 Full-

Stack Application Using Productivity Tools 并点击创建

等待开发空间准备就绪，通过点击开发空间名字进入，可以看到以下界面并通过 Clone from Git 从 GitHub 存储库中克隆

https://github.com/SAP-samples/fiori-elements-incident-management.git 该 URL

为 sap 官方其中的一个地址并把该地址放到以下框中

等待 Clone 完成会生成以下项目

然后根据以下路径选择新建终端 New Terminal

然后输入命令 npm install 安装 sap Fiori element 所需的 npm 必要的模块完成后再输入命令 npm i

@sap/cds-dk -g 安装 SAP 云应用程序编程模型的命令行客户端和开发工具包

2\. 创建 SAP Fiori Elements 应用程序

Sap Fiori 工具包括一个应用程序生成器，它提供了一种向导式的方法，用于基于 SAP Fiori Elements

页面类型创建应用程序可以通过以下路径创建选中 List Report Page

执行下一步骤根据以下选择相对应的选择然后 Next

对于应用程序，需要从 OData 服务中选择主实体集。此类型的对象将显示在列表报告中。在应用程序中，从

开始。由于应用程序没有子对象页，因此不需要导航实体

执行后到以下界面，然后命名好项目属性， 请务必准确选择 ** “ ** ** 模块名称 ** ” 和 “ ** 应用程序 ” 命名空间

** ，如下所示，因为它们在示例代码中引用 。

点击完成按钮后显示以下界面表示完成新的 Sap Fiori Elements 应用程序创建成功，以下显示项目信息界面

然后通过 View->Command Palette 中命令 ** Fiori: Open Application Info ** ** 打开 **

** **

**

**

将会看到一个折叠的文件夹

SAP Fiori Elements 应用程序需要服务器才能运行。此服务器由 SAP

云应用程序编程模型的命令行客户端和开发工具包提供。使用服务器的设置已在上一教程 准备开发环境中 完成通过 在 ** Application

Information ** page ** ** ** 选择 ** ** Preview Application **

然后通过 watch npx cds watch 命令启动

然后通过以下打开新的界面

现在可以通过点击以下链接来启动新的 SAP Fiori Elements 应用程序

展示效果为

3\. 优化 SAP Fiori Elements 应用程序报表

将筛选器的类别字段添加到筛选栏，首先打开文件夹中的 annotations.cds 文件

文件夹下面还有第二个文件。此文件 app/incidents 是在生成应用程序期间创建的，不能进行修改。在 SelectionFields

中注释定义筛选器栏中提供的筛选器字段 Category_code. 保存文件后，服务器将重新启动，刷新应用程序后，新添加字段也会显示

以下界面是新添加的字段

应用程序可以为允许用户从现有值中进行选择的字段提供值帮助。属性具有值列表注释后，它将显示为带有值帮助图标的输入字段。值帮助对话框支持全文搜索和筛选器栏，可帮助用户找到正确的值。

单击 ** “ ** ** 类别 ** 选择 ” 字段中的值帮助图标以查看当前值帮助。

默认值帮助将如下所示

要为其添加描述字段可以通过以下步骤

打开文件夹中的 SRV 中的 common.cds 在 category property 中添加相应的代码

以下为新添加的代码示例，保存会自动刷新

该属性定义实体集，以请求值帮助的数据。在此示例中，数据是从实体集加载的 CollectionPathCategory

该属性确定值帮助中使用的单个参数的行为。该值用于接管应用程序预填充的值以筛选数据 （ -In ） 的参数。另一方面，所选值也将传递回应用程序 （

-Out ）。该值用于参数，应用程序与值帮助之间没有交互。该参数仅用于显示要选择的数据。

$TypeValueListParameterInOutValueListParameterDisplayOnly 根据的值，需要定义参数的其他属性：

$Type LocalDataProperty 将为其定义值帮助的源实体集的属性。 ValueListProperty

目标实体的属性设置值帮助将从中请求数据（请参阅）。这些是值帮助对话框的筛选器栏和表中显示的属性。 CollectionPath

以下是其展示效果

也可以新添加列在文件夹中找到 annotations.cds 文件并在其中找到 LineItem 并在其添加相应的代码

保存后刷新打开新的网页可以看到新添加的字段

以下步骤可以程序配置启动时无需点击执行按钮，数据自动加载

在 Application Information 页面点击 ListReport

在页面编辑器中树状结构选择 Table 节点在其属性页面 Initial Load 将其设置为 Enabled

将应用程序刷新后，数据将会自动加载

下面我们也可以对详情页面进行修改添加字段

首先我们向其字段组添加添加另外的字段，首先打开文件夹下 app 的 annotation.cds 文件其中 incidents

文件是自动生成的无需修改

页面的字段收集在字段组中其注释为 FieldGroup 中使用限定字段 #IncidentDetails 搜索并把 description

字段添加到其中

保存刷新后新添加字段会显示

在上一步骤中我们在字段组中添加了新字段，下面我们添加新的字段组

还是在文件 annotation.cds 的 #IncidentDetail 添加相应的代码在以下键入字段出现筛列表选择 FieldGroup

，注释和代码会一块键入

然后为其添加字段 priority_code category_code incidentStatus_code 字段

然后在此为字段组声明属性，属性的内容将依赖语言的标签 Label

保存后刷新页面将会看到新添加的字段组的常规信息

可以将自定义内容添加到页面，以下是为其添加甘特图 UI 。

首先将位于 test-resource 中的 ext 文件移动到 incidents 文件夹下的 webapp 下

然后点击 Application information 页面的 open Page Map

看到应用程序的页面结构。在对象页面条目上，单击铅笔按钮以配置对象页面。

可以在 Sections 中添加自定义的部分 Add Custom Section

填上相应的属性

添加内容位于之前的 ext 文件中

现在已完成新自定义部分的创建。刷新应用程序并检查对象页面上显示的新部分。

我们在此添加新的列

.textContent = new Date().getFullYear();