当前位置: 首页 > Web前端 > HTML

使用SAPBAS创建FioriElements应用展示OData数据

时间:2023-03-28 17:41:56 HTML

SAPFioriElements介绍可以参考我的文章:没有任何前端开发经验,创建第一个SAPFioriElements应用答网友提问:使用SAP如何对FioriTools创建的FioriElements应用进行二次开发?本文以可在公网自由访问的教学用northwindOData服务为例,在SAPBusinessApplicationStudio上创建一个FioriElements应用程序来展示OData服务的数据。这个OData服务的url:https://services.odata.org/V2...打开SAPBusinessApplicationStudio,NewProjectfromTemplate,选择SAPFioriApplication:应用类型选择SAPFiorielements,选择ListReportObjectPage对于平面图:ListReport是标准的SAPFiori平面图之一。它基于最常用的表格控件,允许用户查看大量的项目数据。用户可以使用过滤器、排序和分组作为此平面图的开箱即用功能来搜索相关项目。这些功能开箱即用,无需应用程序开发人员手动编写JavaScript代码。Datasource选择ConnecttoanODataService,将NorthwindODataurl维护进去:Mainentity选择Customers,这意味着在生成的应用程序中,Customers数据将默认显示在表格中。导航实体选择Orders:维护一个模块名称,点击finish:稍等片刻,应用生成。右键webapp文件夹,选择PreviewApplication:选择start:会自动弹出一个新的浏览器窗口,显示空白数据:https://workspaces-ws-pdwk4-a...点击齿轮图标打开配置页面,勾选你要查看的表格列前面的checkbox:点击ok,这个列表中会显示northwindodata服务中的客户数据:但是下次在本地启动应用时这个设置会丢失.正式的方式是在webapp文件夹上右击,选择OpenGuideddevelopment:然后选择Addandedittablecolumns,意思是在ListReport表格中增加一个新的列:提示是使用UI.LineItem注解:选择即可addannotationTheEntityTypeisCustomer:选择要添加到表中的列。数据源来自于OData模型的属性。CustomerID:需要的注解自动生成,点击InsertSnippet:上面代码自动添加到webapp/annotations/annotation.xml:最后刷新Application,发现CustomerID默认可以正常显示: