如何用SAP WebIDE的Fiori创建向导基于ABAP OData service快速创建UI5应用

如果我们手上已经有可以正常工作的OData服务,无论位于ABAP on-premise系统还是public上的internet OData service,都可以用SAP WebIDE里的Fiori创建向导,几分钟之内轻松创建出可以持续开发的UI5应用。

打开SAP云平台上的WebIDE,New->Project from Template:

如何用SAP WebIDE的Fiori创建向导基于ABAP OData service快速创建UI5应用_第1张图片

选择Master Detail风格的Fiori应用:

如何用SAP WebIDE的Fiori创建向导基于ABAP OData service快速创建UI5应用_第2张图片如何用SAP WebIDE的Fiori创建向导基于ABAP OData service快速创建UI5应用_第3张图片

这里就要指定这个UI5应用消费的OData服务url了。下拉菜单里看到的是一个我在SAP云平台创建的Destination,指向on premise系统:

如何用SAP WebIDE的Fiori创建向导基于ABAP OData service快速创建UI5应用_第4张图片

url路径选择/sap/opu/odata/sap/CRM_OPPORTUNITY,做过CRM的朋友们会知道这个路径指向的是CRM ABAP里的OData服务CRM_OPPORTUNITY:

如何用SAP WebIDE的Fiori创建向导基于ABAP OData service快速创建UI5应用_第5张图片如何用SAP WebIDE的Fiori创建向导基于ABAP OData service快速创建UI5应用_第6张图片

点击Test,会解析出OData服务的metadata,然后可以点Next按钮:

如何用SAP WebIDE的Fiori创建向导基于ABAP OData service快速创建UI5应用_第7张图片

点了Next之后,需要指定Master list和detail视图里重要字段的绑定路径。这些字段的说明在上图右边的缩略图里有展示。

如何用SAP WebIDE的Fiori创建向导基于ABAP OData service快速创建UI5应用_第8张图片

点finish后,应用成功创建。执行应用:

如何用SAP WebIDE的Fiori创建向导基于ABAP OData service快速创建UI5应用_第9张图片

最后渲染的应用如下:

如何用SAP WebIDE的Fiori创建向导基于ABAP OData service快速创建UI5应用_第10张图片

至此我们没有编写一行代码,就得到了一个可以工作的master-detail风格的Fiori应用。

压缩过后webIDE自动生成的JavaScript总共代码也不过500多行:

如何用SAP WebIDE的Fiori创建向导基于ABAP OData service快速创建UI5应用_第11张图片

要获取更多Jerry的原创文章,请关注公众号"汪子熙":

转载于:https://my.oschina.net/u/3771578/blog/3065141

你可能感兴趣的:(如何用SAP WebIDE的Fiori创建向导基于ABAP OData service快速创建UI5应用)