不写一行代码创建Fiori App

Posted 2020-10-02 Alex_SAP

2017-08-14 Alex Fiori

我在上文中介绍了SAP Web IDE, 今天就基于SAP Web IDE的强大特性，不写一行代码的建立一个Fiori App。

当然，不写一行代码创建的App在实际项目中还是未免过于幼稚，但是通过标准模板可以大体搭建一个App的基本框架，为后来的开发开来非常大的便利。通过这个过程大家对Fiori的基本技术UI5，MVC的体系结构也有一个大体的认识。

我们今天创建一个Fiori App，来显示财务凭证的头信息，这个App和我之前一直作为例子的Manage Journal Entries的第一个页面类似，只是没有了filter等输入信息，直接无条件输出了。会调用oData Service  ：FAC_FINANCIAL_DOCUMENT_SRV_01

建立Fiori App包括以下几部分：

• 定义数据源，通过定义数据源可以建立和后端系统数据的连接，完成数据的增删查改，数据源在这里指：OData Service；

• 创建数据模型，配置模型类型、数据源、URI；

• 设计页面布局，基于UI5，在页面展示财务凭证的Header信息；

• 绑定基于OData Service的数据集；

• 绑定页面元素和OData Service 数据字段。

首先登陆WebIDE 然后创建基于模板的项目Create a New Project from Template.

我们选择SAPUI5 Application Template.

创建项目名称：

选择 View Type和名称

点击完成，我们的工程创建完成，Fiori App的基本代码框架就创建完成了，我们会看到如下图的页面：

请注意，有三个独立的文件夹Model, View 和Controller，其中Model是数据模型，View是页面视图，Controller是控制模块，也就是业务代码部分。MVC是前端开发的常见结构，从struts, JSF，Spring等前端框架开始，基本都是这种架构。

添加数据源

 

开发Fiori App，首先需要定义数据源，所有的App其实不都是消费数据，更新或者添加数据么。开发程序定义数据源大都是JDBC/ODBC的data source,今天的data source是OData Service。之前我也介绍过，Fiori消费ERP数据通过SAP Gateway作为工具OData Service作为接口。

点击文件：manifest.json ，其中有两种编辑视图：Descriptor 和Code Editor，

在文件manifest.json 上右键，选择Open With -> Descriptor Editor

因为我们今天的初衷是尽量不写代码，所以我选择Descriptor，当然作为有经验的大神么，可以选择Code Editor。

在Descriptor Editor，到Data Source Tab，这里我们配置“从哪里”“怎么”获取数据，点击按钮“+”，选择SAP系统和services，如下图：

点击完成。

然后我们会看到如下页面：

请注意OData Service 和URI.

 

创建默认Model

在文件manifest.json点击Models 页面，默认会出现i18n（国际化信息模型，就是存储Fiori App页面文字信息的）

点击“+”按钮，创建一个新的Model,按照下图添加信息，并设置为默认的模型。

创建完模型，如下图，请注意下面的信息：

虽然我们没有写一行代码，但是WebIDE其实在后台默默的帮我们把代码写好了，请看下图自动生成的代码：

设计页面的视图信息

 

视图文件同样有可视化界面和代码界面，因为我们今天不写代码，所以就用视图界面拖拽了。视图界面主要是html5元素组成，如果是HTML5开发者，可以自行选择开发界面。如下图，我拖拽一个List元素到页面中，来显示财务文档的头信息。

配置页面控件显示信息

 我们只需要一个list item,其他两个可以删除了。

选择这个ListItem, 点击Data Set旁边的按钮，进行数据绑定。

绑定 OData Service Data Set Header 到页面控件

绑定OData Service Entity Type Properties (fields) 到 list item里

如下图，List Item有两部分，title和description，我们需要分别绑定信息：

双击字段，选择字段。

 

好了，我们设置完成，点击save 按钮保存文件，并点击测试按钮，进行测试。

可以看到下面的页面，虽然简陋，但是生成自己的Fiori App，是不是有点小兴奋？

看到title信息是默认的，我们可以修改一下。我之前提到过i18n是国际化的配置信息，可以在那里找到对应的字段信息进行修改。

修改完，保存，再测试一下页面，如下图：

SAPUI5事件

 

我们今天的文章本来到这里可以结束了，真的没写一行代码！但是为了证明，其实我也可以写代码的，我又加了一点内容。

在List item上单击，选择右手边的Events，选择press,创建function,如下图：

点击new function, 输入function name，然后系统会自动生成function在controller里面，如下图，当然具体代码语句我们还是需要自己写的。

随便写一行：alert("Testing: Navigating to Document Line Item.");

Ok, 测试一下。

今天的文章到这里真的结束了，我们就点一点，拖一拖就创建了一个Fiori App，而且数据真的来自SAP系统，我想说，基于Fiori的开发就是这么简单便捷，未来S4HANA的Fiori应用会越来越多，越来越好。

 

 

本文内容属于个人观点，不代表任何官方。