使用 SAP Business Application Studio 创建 Fiori Elements 应用显示 OData 服务的数据
![使用 SAP Business Application Studio 创建 Fiori Elements 应用显示 OData 服务的数据](https://static001.geekbang.org/infoq/67/6745230bacab674943260fc362b7b574.jpeg)
关于 SAP Fiori Elements 的介绍,请参考我这些文章:
本文使用公网上可以任意访问的用于教学用途的 northwind OData 服务为例,在 SAP Business Application Studio 上创建一个 Fiori Elements 应用来显示 OData 服务的数据。
这个 OData service 的 url:
https://services.odata.org/V2/Northwind/Northwind.svc/
打开 SAP Business Application Studio,New Project from Template,选择 SAP Fiori Application
:
![](https://static001.geekbang.org/infoq/e8/e800689ca884337e47c01bb7308a5621.png)
应用类型选择 SAP Fiori elements
,floorplan 选择 List Report Object Page
:
List Report 标准 SAP Fiori floorplan 之一,它以最常用的表格控件为载体,能够让用户查看大量项目数据。用户可以使用过滤器、排序和分组作为该 floorplan 的开箱即用功能来搜索相关项目。 这些功能都是开箱即用的,无需应用开发人员手动编写 JavaScript 代码。
![](https://static001.geekbang.org/infoq/54/542bbdbbe7bac9191dbf4b6ec6c87666.png)
Data source 选择 Connect to an OData Service
, 将 Northwind OData url 维护进去:
![](https://static001.geekbang.org/infoq/bd/bda7150653f5fe186717c32055c09049.png)
Main entity 选择 Customers
,意思是生成的应用里,默认在表格里显示 Customers 数据。
Navigation entity
选择 Orders
:
![](https://static001.geekbang.org/infoq/84/847aec9329eb898972eb23609047ac0e.png)
随便维护一个 module name,点击 finish:
![](https://static001.geekbang.org/infoq/ab/ab4ea204130ff71662a4685c0036787a.png)
稍等片刻,应用即生成完毕。
右键点击 webapp 文件夹,选择 Preview Application
:
![](https://static001.geekbang.org/infoq/cd/cde8b5b32f8ad9f8ba1df6f160efa2e5.png)
选择 start:
![](https://static001.geekbang.org/infoq/57/57ad0279be0c809137e4ce034da0892d.png)
会自动弹出一个新的浏览器窗口,显示空白数据:
![](https://static001.geekbang.org/infoq/ce/cedbf4acfad548b347c276e0ca356fda.png)
点击齿轮的图标,打开配置页面,将期望查看的 table column 前面的 checkbox 打上勾:
![](https://static001.geekbang.org/infoq/ac/ac12a32548b0af7e9c6e0a172a0b45c4.png)
点击 ok,northwind odata 服务里的客户数据,就显示在这个列表里了:
![](https://static001.geekbang.org/infoq/27/27545aed2f6d7eebf5f986830d3f128f.png)
但是这种设置下一次本地启动应用后就会丢失。
正规的做法是,对 webapp
文件夹点击右键,选择 Open Guided development
:
![](https://static001.geekbang.org/infoq/96/96f6bc1063029d4fbe7ccd71c90b9ff3.png)
然后选择 Add and edit table columns
,意思是为 List Report 的表格增加新的 column:
![](https://static001.geekbang.org/infoq/dd/dd9c32dd7b6516bcbb8cd441226728dc.png)
得到提示是使用 UI.LineItem
注解:
![](https://static001.geekbang.org/infoq/f8/f8c84fa546f81f4555a513df099ae56e.png)
选中要添加注解的 Entity Type 为 Customer
:
![](https://static001.geekbang.org/infoq/8d/8dcd02c8b59634a32db8452070a433d9.png)
选择要添加到表格里的列数据源来自 OData 模型的属性 CustomerID
:
![](https://static001.geekbang.org/infoq/f3/f39035c2ad0bbc5b8a67bfc30c4a698b.png)
自动生成了需要的 annotation,点击 Insert Snippet:
![](https://static001.geekbang.org/infoq/83/83b67e529ffd7486eb66a1e9a21e72be.png)
![](https://static001.geekbang.org/infoq/a2/a2b26f540aa3675fe0387aa59b3a3b05.png)
上述代码自动被添加到了 webapp/annotations/annotation.xml:
![](https://static001.geekbang.org/infoq/4e/4e70bff70ae84343db4a9c51c137506d.png)
最后刷新应用,发现 CustomerID 能够在默认情况下正常显示了:
![](https://static001.geekbang.org/infoq/0d/0d3d9cc8c17c90f11b5bc9e0e559a8c4.png)
版权声明: 本文为 InfoQ 作者【Jerry Wang】的原创文章。
原文链接:【http://xie.infoq.cn/article/e47f625f918f769054ce16c57】。文章转载请联系作者。
评论