专栏首页Jerry的SAP技术分享使用SAP WebIDE创建SAP Fiori Elements应用

使用SAP WebIDE创建SAP Fiori Elements应用

在新建项目菜单里,

Category选择为SAP Fiori Elements,模板选择为List Report Application:

该List Report Application消费的OData服务,从Service Catalog的下拉菜单里选择指向ES5系统的Destination,从中选择EPM_REF_APPS_SHOP_SR这个服务:

选择Suppliers这个data collection:

OData Collection选择Suppliers:

一切就绪后,运行:

看到空白的页面,这是因为我们尚未在该List Report Application里指定更多有意义的annotation:

新建一个annotation文件,用来存放我们的自定义注解:

而manifest.json也自动引用了我们刚刚创建的annotation.xml:

新建一个annotation:

注解类型选择为UI.LineItem:

在UI.LineItem下再创建一个DataFieldWithURL注解:

再添加一个UI.DataField注解。这样,在Fiori Elements绘制的表格里出现了两列,分别通过UI.DataFieldWithUrl和UI.DataField实现。

在添加一个UI.PresentationVariant注解,实现排序功能:

把UI.PresentationVariant.SortOrder.Common.SortOrder施加到Name字段上:

这样Name字段就支持自动排序了:

通过UI.HeaderInfo注解,我们可以维护对用户更友好的信息:

分别通过UI.HeaderInfo的TypeName和TypeNamePlural维护HeaderInfo的单数和复数形式:

效果如下:

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • SAP不同产品的UI开发策略概述

    今天我看了SAP Cloud for Customer UI的JavaScript代码,下面我是结合S/4 HANA和CRM,以及SAP Engagement ...

    Jerry Wang
  • SAP CRM WebClient UI和Fiori UI混搭并存

    SAP CRM里有个功能可以创建HANA live report,消费HANA Studio里创建的模型。

    Jerry Wang
  • SAP Webclient UI和Fiori UI的混搭

    HANA那边定义了VDM和Query哪些,但是Fiori这边不直接访问HANA,所以CRM这边的UI可以创建report把HANA的那个信息存在report里面...

    Jerry Wang
  • 前端-现代 js 框架存在的根本原因

    我曾见过很多很多人盲目地使用(前端)框架,如 React,Angular 或 Vue 等等。这些框架提供了许多有意思的东西,然而通常人们(自以为)使用框架是因为...

    grain先森
  • 优测优分享 | 游戏的UI自动化测试可以这样开展

    对于目前的两大游戏引擎cocos-2dx、unity3D,其UI自动化测试的技术方案都已经实现。可以获取、设置UI对象的各个属性,并且可以调用UI对象及引擎的一...

    优测utest
  • 你不知道的秘密:UI设计行业内幕!

    在2015年的时候,UI火爆了!月薪万元以下的UI设计师似乎已经难觅踪迹,很多公司开出20-30K的月薪仍然难以挖到心仪的UI人才,很多人纷纷投入设计行业。我们...

    宇相
  • UI初学者的弯路,你走过几条?

    对于初学UI设计的人而言,可能对UI具体是做什么,或者自己是否能顺利转行胜任这样的岗位存在一定的顾虑,今天我们就来重点说说UI是做什么的,以及学UI到有哪些需要...

    宇相
  • 论UI设计师的素养

    image.png 我是个产品经理,作为UI Designer的长期合作伙伴,我觉着一个合格的UI是这样的: 01 视觉过关很重要 不好看还要UI干什么,产品...

    BestSDK
  • 想在小公司混的如鱼得水,我来告诉你

    自从土哥推出「 粉丝问答 」系列文章之后,效果出乎我的意料,粉丝特别买账,原本只是在帮助粉丝解决困惑的同时,写文记录下土哥的职场生活。没想到却成了意外收获,导致...

    闰土大叔
  • Xcode 7 自动测试XCTestCase

    rectinajh

扫码关注云+社区

领取腾讯云代金券