当前位置： 首页 > news >正文

SAP Fiori Object Page 导航与行项目配置全解析：从UI.Facets到manifest.json

news 2026/4/19 20:04:36

SAP Fiori Object Page深度配置实战：从数据架构到界面导航设计

在SAP Fiori应用开发中，Object Page作为展示业务对象详情的核心界面，其信息架构的合理性直接影响用户体验。本文将基于销售订单场景，系统讲解如何通过配置驱动的方式构建层次分明的Object Page结构。

1. Object Page信息架构设计基础

Object Page的信息组织遵循"抬头-行项目"的业务逻辑模式。以销售订单为例，抬头信息包含订单编号、创建日期等主数据，而行项目则记录具体的商品明细。这种结构需要通过OData服务的EntitySet和Association来建立数据关联。

典型的配置链路包含三个层级：

  1. 后端数据模型：通过CDS视图或SEGW事务码定义EntitySet及其关联关系
  2. 注解层：使用UI.Facets、UI.FieldGroup等注解定义界面元素
  3. 前端路由：在manifest.json中配置页面跳转逻辑

提示：良好的信息架构应保持单个Object Page的导航项不超过7个，每个字段组包含3-5个关键字段

2. 后端数据模型配置

2.1 EntitySet与Association创建

在SEGW事务码中创建销售订单主表和行项目的EntitySet：

DATA: lo_entity_type TYPE REF TO /iwbep/if_mgw_odata_entity_typ. " 主表EntitySet lo_entity_type = model->get_entity_type( 'SalesOrders' ). " 行项目EntitySet lo_entity_type = model->get_entity_type( 'SalesOrderItems' ).

创建两者间的Association：

<Association Name="SalesOrderToItems"> <End Type="ZSALESORDER_SRV.SalesOrder" Multiplicity="1" Role="SalesOrder"/> <End Type="ZSALESORDER_SRV.SalesOrderItem" Multiplicity="*" Role="Items"/> </Association>

2.2 数据获取方法实现

重写GET_ENTITYSET方法实现行项目数据获取：

METHOD salesorderitems_get_entityset. DATA: lv_vbeln TYPE vbak-vbeln. READ TABLE it_key_tab INTO DATA(ls_key) WITH KEY name = 'Vbeln'. lv_vbeln = ls_key-value. SELECT * INTO CORRESPONDING FIELDS OF TABLE et_entityset FROM vbap WHERE vbeln = lv_vbeln. ENDMETHOD.

3. 前端注解配置策略

3.1 抬头信息区配置

使用UI.HeaderInfo定义标题区显示内容：

<Annotation Term="UI.HeaderInfo"> <Record Type="UI.HeaderInfoType"> <PropertyValue Property="Title" Path="Vbeln"/> <PropertyValue Property="Description" Path="Erdat"/> </Record> </Annotation>

3.2 导航菜单结构设计

通过Facets构建多级导航菜单：

<Annotation Term="UI.Facets"> <Collection> <Record Type="UI.CollectionFacet"> <PropertyValue Property="Label" String="订单概览"/> <PropertyValue Property="Facets"> <Collection> <Record Type="UI.ReferenceFacet"> <PropertyValue Property="Target" AnnotationPath="@UI.FieldGroup#BasicInfo"/> <PropertyValue Property="Label" String="基本信息"/> </Record> </Collection> </PropertyValue> </Record> <Record Type="UI.ReferenceFacet"> <PropertyValue Property="Target" AnnotationPath="SalesOrderItems/@UI.LineItem"/> <PropertyValue Property="Label" String="行项目明细"/> </Record> </Collection> </Annotation>

3.3 字段组定义

为不同业务区块创建字段组：

<Annotation Term="UI.FieldGroup" Qualifier="BasicInfo"> <Record Type="UI.FieldGroupType"> <PropertyValue Property="Data"> <Collection> <Record Type="UI.DataField"> <PropertyValue Property="Value" Path="Vbeln"/> <PropertyValue Property="Label" String="订单编号"/> </Record> <Record Type="UI.DataField"> <PropertyValue Property="Value" Path="Erdat"/> <PropertyValue Property="Label" String="创建日期"/> </Record> </Collection> </PropertyValue> </Record> </Annotation>

4. 行项目展示配置

4.1 行项目LineItem定义

配置行项目表格显示字段：

<Annotations Target="ZSALESORDER_SRV.SalesOrderItems"> <Annotation Term="UI.LineItem"> <Collection> <Record Type="UI.DataField"> <PropertyValue Property="Value" Path="Posnr"/> <PropertyValue Property="Label" String="项目号"/> </Record> <Record Type="UI.DataField"> <PropertyValue Property="Value" Path="Matnr"/> <PropertyValue Property="Label" String="物料编号"/> </Record> </Collection> </Annotation> </Annotations>

4.2 表格特性增强

通过UI.TableFacet定义表格特性：

<Annotation Term="UI.TableFacet"> <Record Type="UI.TableFacetType"> <PropertyValue Property="Label" String="行项目明细"/> <PropertyValue Property="Data"> <Collection> <Record Type="UI.DataField"> <PropertyValue Property="Value" Path="Netwr"/> <PropertyValue Property="Label" String="净价值"/> </Record> </Collection> </PropertyValue> </Record> </Annotation>

5. 前端路由与manifest配置

5.1 manifest.json页面结构

配置ListReport到ObjectPage的导航关系：

"pages": { "ListReport|SalesOrders": { "entitySet": "SalesOrders", "pages": { "ObjectPage|SalesOrders": { "entitySet": "SalesOrders", "pages": { "SalesOrderItems": { "navigationProperty": "SalesOrderItems", "entitySet": "SalesOrderItems" } } } } } }

5.2 路由参数处理

在控制器中处理行项目跳转逻辑：

onItemPress: function(oEvent) { var oContext = oEvent.getSource().getBindingContext(); this.getOwnerComponent().getRouter().navTo("SalesOrderItem", { SalesOrderID: oContext.getProperty("Vbeln"), ItemID: oContext.getProperty("Posnr") }); }

6. 高级配置技巧

6.1 条件显示字段

使用UI.Hidden注解实现字段动态显示：

<Annotation Term="UI.Hidden" Bool="not(IsActiveEntity or HasActiveEntity)"/>

6.2 字段级帮助配置

为关键字段添加值帮助：

<Annotation Term="Common.ValueList"> <Record> <PropertyValue Property="CollectionPath" String="MaterialHelp"/> <PropertyValue Property="Parameters"> <Collection> <Record Type="Common.ValueListParameterOut"> <PropertyValue Property="LocalDataProperty" PropertyPath="Matnr"/> <PropertyValue Property="ValueListProperty" String="Material"/> </Record> </Collection> </PropertyValue> </Record> </Annotation>

在实际项目中，Object Page的响应速度与关联数据量直接相关。当行项目超过500条时，建议启用分页加载机制，可通过OData的$skip和$top参数实现渐进式加载。

http://www.jsqmd.com/news/667559/

相关文章：

  • 安信可ESP8266 AT固件连接自建MQTT服务器实战：从烧录到订阅发布的完整避坑指南
  • 【实战指南】FreeRTOS 10.4.6源码解析与STM32F429移植全流程
  • 如何为AI编写功能规格说明
  • PgQue：复兴经典 Postgres 队列架构，在多平台畅行无阻！
  • 别再写脚本了！用sql_exporter把MySQL业务数据变成Prometheus监控指标（附实战配置）
  • 为什么头部科技公司已启动“AGI设计审计”？奇点大会披露的5类高危产品架构（附自检评分表）
  • 别再傻傻分不清了！Arduino编程中I/O和GPIO到底有啥区别？（附实战代码）
  • 【虚幻引擎】UE4/UE5 容器实战指南：Map、Set、Array 的核心操作与性能考量
  • 从宏观到微观：交通流模型如何驱动现代仿真系统
  • 全球仅存12套完整AGI天文发现训练数据集（含SKA Phase1真实噪声注入样本），今日限时开放3个核心子集下载权限
  • 10个最佳Unity开源游戏项目：开发者必备的终极学习宝库 [特殊字符]
  • 保姆级教程：在Windows 10/11上搞定Vivado 2018.3与ModelSim SE的安装与破解（附资源）
  • AGI客服系统效能瓶颈大起底（92%企业正在忽视的3个隐性体验断点）
  • 从零到一：使用Rufus打造你的万能系统安装U盘（Ubuntu 20.04与Win11 PE）
  • XFCE桌面环境深度定制：彻底禁用自动锁屏与待机策略
  • 告别迷茫！手把手教你用IQxel搞定Wi-Fi 6E信号测试（附详细配置截图）
  • RAG 只是权宜之计
  • 高效批量处理工具：3步完成飞书文档迁移的完整指南
  • Vivado里AXI接口IP核怎么选？从DMA到VDMA，一次讲清ZYNQ数据搬运的“十八般兵器”
  • 【MicroPython ESP32】SPI总线驱动SD卡：从硬件连接到文件系统挂载实战
  • 从零到一：在国产化ARM麒麟系统上构建Prometheus监控体系
  • 终极BongoCat指南：让电脑操作变得生动有趣的虚拟猫咪伴侣
  • DDR4 笔记本内存条引脚定义
  • Scapy实战：从ARP缓存投毒到中间人攻击的攻防演练
  • 零代码调用Unet预训练模型【Pytorch实战】【即开即用】
  • WindowResizer：轻松解决Windows窗口调整难题的终极工具
  • 5步高效配置LXMusic开源音源：专业级音乐播放解决方案
  • Qt/C++ 信号阻塞的RAII实践：QSignalBlocker的进阶用法与场景剖析
  • 从结构到实战：深度解析Xilinx Transceiver的ibert自测与性能验证
  • 【JAVA基础面经】线程安全的List