ABAP RESTful Application Programming Model（四）

最新推荐文章于 2024-07-25 20:27:47 发布

养鱼种菜

最新推荐文章于 2024-07-25 20:27:47 发布

阅读量878

点赞数 14

分类专栏： ABAP cloud 文章标签： restful 改行学it

本文链接：https://blog.csdn.net/z125512240/article/details/137641561

版权

ABAP cloud 专栏收录该内容

22 篇文章 8 订阅

订阅专栏

本文介绍了如何通过修改ABAP的MetadataExtension文件中的注释（annotation）来调整OData接口生成的UI界面，包括列表字段位置、列宽以及详细页面布局，并展示了如何将某些字段设置为只读状态。

摘要由CSDN通过智能技术生成

Restful暴露的OData接口不仅仅能用来传输数据，还可以定义或者调整UI。

一、注释annotation

在生成ABAP Repository Object时，除了之前提到的文件，还有一个Metadata Extension文件。这个文件用来定义Odata生成的UI界面，通过修改此文件，可以按照需要调整UI界面。
在这里插入图片描述
该文件主要包含字段和大量的注释（annotation），此注释非彼注释，页面的调整就是通过修改annotation来实现的。
常用的annotation如下：

@UI.hidden: true被该注释标记的字段将被隐藏，false或者删除此注释，字段恢复显示。
@UI.lineItem标识字段在列表中显示的配置，包括列位置，宽度等
@UI.identification标识字段在详情页面的配置，
注释对字段具体的配置可查看注释的定义，右键->Navigate To。

二、调整字段位置

2.1.调整列表字段位置

列表字段默认位置如下
在这里插入图片描述
打开Metadata Extensions文件夹下的ZC_XXXX。默认UI配置如下，position表示字段的位置，这里只关注@UI.lineItem。对比页面，position从10 开始，第二列在第一列基础上加10。

@UI.lineItem: [ {
  position: 10 , 
  importance: #MEDIUM
} ]
@UI.identification: [ {
  position: 10 
} ]
CarrierID;

@UI.lineItem: [ {
  position: 20 , 
  importance: #MEDIUM
} ]
@UI.identification: [ {
  position: 20 
} ]
ConnectionID;

将CarrierID和ConnectionID的position值调换，列表中Flight Number和Airline ID的位置就调换了。

@UI.lineItem: [ {
  position: 20 , 
  importance: #MEDIUM
} ]
@UI.identification: [ {
  position: 10 
} ]
CarrierID;

@UI.lineItem: [ {
  position: 10 , 
  importance: #MEDIUM
} ]
@UI.identification: [ {
  position: 20 
} ]
ConnectionID;

在这里插入图片描述

2.2.调整列表列宽

在这里插入图片描述
Flight Number超过了默认长度，有一部分文字被省略了。通过调整注释，可以解决这个问题。给lineItem添加cssDefault属性，如下：

2.3.调整详细页面字段位置

在这里插入图片描述
如图，详情页面的字段按列分布，Airport，City和Country并不能明显分组，而且Country的label相同，用户可读性不好。通过调整@UI.identification的position，使出发地和目的地按行分布，第一行为出发地，第二行为目的地。
对比页面和配置文件，字段位置匹配如下。
在这里插入图片描述
调整position的值如下。

@UI.lineItem: [ {
  position: 40 , 
  importance: #MEDIUM
} ]
@UI.identification: [ {
  position: 50 
} ]
CityFrom;

@UI.lineItem: [ {
  position: 50 , 
  importance: #MEDIUM
} ]
@UI.identification: [ {
  position: 70 
} ]
CountryFrom;

@UI.lineItem: [ {
  position: 60 , 
  importance: #MEDIUM
} ]
@UI.identification: [ {
  position: 40 
} ]
AirportToID;

@UI.lineItem: [ {
  position: 70 , 
  importance: #MEDIUM
} ]
@UI.identification: [ {
  position: 60 
} ]
CityTo;

在这里插入图片描述

三、字段只读

接前文，determination使city和country可以自动填充，这时city和country就没有必要是可编辑字段。设置为只读字段，避免不必要的麻烦。
打开ZC_XXX，并添加一下代码。如此，将city和country设置为只读字段。
在这里插入图片描述
刷新下预览页面，创建或者修改connection。