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

SAP学习笔记 - 开发22 - 前端Fiori开发 数据绑定（Jason），Data Types（数据类型）

article 2025/8/26 17:21:55

上一章讲了Icons（图标），Icon Explorer。

SAP学习笔记 - 开发21 - 前端Fiori开发 Icons（图标），Icon Explorer（图标浏览器）-CSDN博客

本章继续讲SAP Fiori开发的知识。

目录

1，Aggregation Binding（聚合绑定）

1），Invoices.json

2），manifest.json

3），InvoiceList.view.xml

4），App.view.xml

5），i18n.properties

6），运行看效果

2，Data Types （数据类型）

1），InvoiceList.view.xml

2），InvoiceList.controller.js

3），运行看效果

4），总结

- currency: "JPY"

- 属性的查找方法

1），如何查找官方文档

方法1：直接访问SAPUI5 API参考

方法2：通过开发环境查找

方法3：使用SAPUI5文档结构导航

2），ObjectListItem常用属性

a），核心属性

b），状态相关属性

c），数字格式化

d），其他属性

以下是详细内容。

1，Aggregation Binding（聚合绑定）

Aggregation Binding是SAP Fiori和SAPUI5框架中数据绑定的一个重要概念，它允许开发者在UI控件与其数据模型之间建立关联，是SAP Fiori开发中实现动态、数据驱动UI的核心技术，它大大简化了列表、表格等集合型控件的开发工作。

Aggregation Binding指的是将控件中的聚合(aggregation)属性与数据模型中的集合数据进行绑定。在SAPUI5中，聚合是指可以包含多个子元素的容器属性，例如：

  • Table控件的items聚合

  • List控件的items聚合

  • Form控件的formContainers聚合

Aggregation Binding通过以下方式工作：

  1. 将UI控件的聚合属性连接到数据模型中的集合

  2. 为集合中的每个数据项创建相应的子控件

  3. 自动保持UI与数据的同步

上面这一段是Deepseek里面的解释，还挺高大上的哈，我好像也没太看懂🤦‍

下面来看看实例安慰一下心情。

1），Invoices.json

这个就是咱们这个小例子里面的数据源啦。

其实数据源基本都应该是DB，从DB取数据生成jason，然后再绑定到Fiori前端，咱一步步来。

{"Invoices": [{"ProductName": "Pineapple","Quantity": 21,"ExtendedPrice": 87.2,"ShipperName": "Fun Inc.","ShippedDate": "2015-04-01T00:00:00","Status": "A"},{"ProductName": "Milk","Quantity": 4,"ExtendedPrice": 10,"ShipperName": "ACME","ShippedDate": "2015-02-18T00:00:00","Status": "B"},{"ProductName": "Canned Beans","Quantity": 3,"ExtendedPrice": 6.85,"ShipperName": "ACME","ShippedDate": "2015-03-02T00:00:00","Status": "B"},{"ProductName": "Salad","Quantity": 2,"ExtendedPrice": 8.8,"ShipperName": "ACME","ShippedDate": "2015-04-12T00:00:00","Status": "C"},{"ProductName": "Bread","Quantity": 1,"ExtendedPrice": 2.71,"ShipperName": "Fun Inc.","ShippedDate": "2015-01-27T00:00:00","Status": "A"}]
}

- Invoices：这是json文件里数据名，可以简单理解为DB的表名，那下面就是数据行和字段

2），manifest.json

{"_version": "1.65.0","sap.app": {"id": "ui5.walkthrough","i18n": "i18n/i18n.properties","title": "{{appTitle}}","description": "{{appDescription}}","type": "application","applicationVersion": {"version": "1.0.0"}},"sap.ui": {"technology": "UI5","deviceTypes": {"desktop": true,"tablet": true,"phone": true}},"sap.ui5": {"dependencies": {"minUI5Version": "1.108.0","libs": {"sap.ui.core": {},"sap.m": {}}},"models": {"i18n": {"type": "sap.ui.model.resource.ResourceModel","settings": {"bundleName": "ui5.walkthrough.i18n.i18n","supportedLocales": [""],"fallbackLocale": ""}},"invoice": {"type": "sap.ui.model.json.JSONModel","uri": "Invoices.json"}},"rootView": {"viewName": "ui5.walkthrough.view.App","type": "XML","id": "app"},"resources": {"css": [{"uri": "css/style.css"}]}}
}

- "invoice": {  =》这是view里面使用的model 名称

- "type": "sap.ui.model.json.JSONModel", =》这个说的是数据源的类型

- "uri": "Invoices.json" =》这个和Type配套，指向的jason文件的路径（当前文件同路径）和名称

 "invoice": {
   "type": "sap.ui.model.json.JSONModel",
   "uri": "Invoices.json"
 }

将来等连接DB的时候，这里会改成SAP提供的API(Odata）

3），InvoiceList.view.xml

<mvc:Viewxmlns="sap.m"xmlns:mvc="sap.ui.core.mvc"><ListheaderText="{i18n>invoiceListTitle}"class="sapUiResponsiveMargin"width="auto"items="{invoice>/Invoices}" ><items><ObjectListItemtitle="{invoice>Quantity} x {invoice>ProductName}"/></items></List>
</mvc:View>

这个视图说的是把Invoices.json里的内容给通过List展示出来

- items="{invoice>/Invoices}" >

 invoice 如前述，是manifest.json 里面说的是model 名

 > 可以理解为下级访问符

 /Invoices =》/ 是绝对路径，Invoices 是 Invoices.json文件里面的名叫 Invoices(表名)的数据

- title="{invoice>Quantity} x {invoice>ProductName}"/>

 这个是个简写，完整写法是 invoice>/Invoices>Quantity，为了简略化，把>/Invoices 给省去了

<List
   headerText="{i18n>invoiceListTitle}"
   class="sapUiResponsiveMargin"
   width="auto"
   items="{invoice>/Invoices}" > 
   <items>
      <ObjectListItem
         title="{invoice>Quantity} x {invoice>ProductName}"/>
   </items>
</List>

4），App.view.xml

<mvc:ViewcontrollerName="ui5.walkthrough.controller.App"xmlns="sap.m"xmlns:mvc="sap.ui.core.mvc"displayBlock="true"><Shell><App class="myAppDemoWT"><pages><Page title="{i18n>homePageTitle}"><content><mvc:XMLView viewName="ui5.walkthrough.view.HelloPanel"/><mvc:XMLView viewName="ui5.walkthrough.view.InvoiceList"/></content></Page></pages></App></Shell>
</mvc:View>

- <mvc:XMLView viewName="ui5.walkthrough.view.InvoiceList"/>

  这个是嵌套视图，这样就把 InvoiceList.view.xml 视图给加进来了，还是很方便的哈

SAP学习笔记 - 开发20 - 前端Fiori开发 Nest View（嵌套视图） ，Fragment（片段）-CSDN博客

5），i18n.properties

# App Descriptor
appTitle=Hello World
appDescription=A simple walkthrough app that explains the most important concepts of OpenUI5# Hello Panel
showHelloButtonText=Say Hello
helloMsg=Hello {0}
homePageTitle=Walkthrough
helloPanelTitle=Hello World
openDialogButtonText=Say Hello With Dialog
dialogCloseButtonText=Ok# Invoice List
invoiceListTitle=Invoices

暂时还没有Controller，就是个数据暂时，跑一下看看

6），运行看效果

2，Data Types （数据类型）

数据类型，比较典型的是金额的话，需要对应的Currency，不然也不知道是多少钱是吧。

下面来看具体的例子。

1），InvoiceList.view.xml

<mvc:ViewcontrollerName="ui5.walkthrough.controller.InvoiceList"xmlns="sap.m"xmlns:core="sap.ui.core"xmlns:mvc="sap.ui.core.mvc"><ListheaderText="{i18n>invoiceListTitle}"class="sapUiResponsiveMargin"width="auto"items="{invoice>/Invoices}"><items><ObjectListItemcore:require="{Currency: 'sap/ui/model/type/Currency'}"title="{invoice>Quantity} x {invoice>ProductName}"number="{parts: ['invoice>ExtendedPrice','view>/currency'],type: 'Currency',formatOptions: {showMeasure: false}}"numberUnit="{view>/currency}"/></items></List>
</mvc:View>

- controllerName="ui5.walkthrough.controller.InvoiceList"

  加了个Controller

- ObjectListItem: 列表中的每一项使用ObjectListItem控件显示

- core:require: 动态加载Currency类型用于数据格式化

- title: 显示数量和产品名称的组合

- number: 复杂绑定，包含：

  - parts: 绑定多个数据源(价格和货币类型)

  - type: 使用Currency类型格式化，这里的主要意义就是把小数点都保留成 2位的

  - formatOptions: 格式化选项(不显示货币符号)

- numberUnit: 显示货币单位。这个其实和 number里的Currency是一个东西，只不过这个显示的小

 <ObjectListItem
     core:require="{
         Currency: 'sap/ui/model/type/Currency'
     }"
     title="{invoice>Quantity} x {invoice>ProductName}"
     number="{
         parts: [
             'invoice>ExtendedPrice',
             'view>/currency'
         ],
         type: 'Currency',
         formatOptions: {
             showMeasure: false
         }
     }"
     numberUnit="{view>/currency}"/>

2），InvoiceList.controller.js

sap.ui.define(["sap/ui/core/mvc/Controller","sap/ui/model/json/JSONModel"
], (Controller, JSONModel) => {"use strict";return Controller.extend("ui5.walkthrough.controller.InvoiceList", {onInit() {const oViewModel = new JSONModel({currency: "EUR"});this.getView().setModel(oViewModel, "view");}});
});

- this.getView().setModel(oViewModel, "view"); 

  其实就是把一个JasonModel 给set 到 View上面，名称就叫 “view"。

  有关JasonModel，可以参照下面文章。

SAP学习笔记 - 开发15 - 前端Fiori开发 Boostrap，Controls，MVC(Model，View，Controller），Modules-CSDN博客

可以看到，这个Controller的作用就是弄一个Currency（这里是EUR），因为咱们json里没有嘛

真正开发当中，这个基本都是从DB取。 

3），运行看效果

把 showCurrency: true

显示的就是这样的了，EUR 单位是不是有两个，下面那个小的就是 numberUnit显示的

就是说如果你不想显示小文字的货币单位，那你完全可以去掉 numberUnit

 

去掉 numberUnit，就显示成这样

 

4），总结

本节所说的Data Types的意思是说，Fiori 页面的格式化表示，你不需要自己写多少代码，

这些Data Types（数据类型）本身就自带格式，只要设上了，就会自带格式化。

- currency: "JPY"

  这个Currency 的意义还有一个，这个需要说一下

  就是每个币种，对保留小数位数的要求是不一样的，比如日元，没有小数；欧元，需要两位小数

它这个地方好像还没有太完善哈，如果原始数据有小数的话，JPY还是保留了 2位小数

而如果第二位小数为 0，则会被删掉

不管怎么说吧，好像跟SAP里面不太一样，不知道这个可不可以设置小数位数

那要是硬搞，能让JPY不显示小数吗？网上说也是可以的

通过属性设置：formatOptions > decimals: 0

TODO：惨，不好用

我估摸着，现在只能是 Jason数据过来的时候，就给整好，不要啥啥都靠Fiori 前端

- 属性的查找方法

  下面咱们以 ObjectListItem 为例，来研究一下查找方法。

1），如何查找官方文档
方法1：直接访问SAPUI5 API参考

  1. 访问 SAPUI5 SDK - https://sapui5.hana.ondemand.com/

  2. 在顶部搜索栏输入"ObjectListItem"

  3. 在搜索结果中选择"ObjectListItem (API)"或"ObjectListItem (Samples)"

点 Control Sample 旁边那个链接，还能有例子提供

 

方法2：通过开发环境查找

  1. 在SAP Web IDE或Business Application Studio中

  2. 将光标放在控件名称上按F1

  3. 或右键点击控件选择"API Reference"

方法3：使用SAPUI5文档结构导航

  1. 进入API Reference部分

  2. 导航至 sap.m > List Items > ObjectListItem

2），ObjectListItem常用属性

ObjectListItem是SAPUI5中用于显示复杂列表项的控件，常用属性包括：

a），核心属性

  • title - 主标题文本

  • number - 右侧显示的数字（常用于金额、数量等）

  • numberUnit - 数字的单位（如货币符号）

  • intro - 副标题/简介文本

  • icon - 左侧显示的图标

  • activeIcon - 激活状态下的图标

  • type - 列表项类型（如Active, Inactive, Detail等）

b），状态相关属性

  • highlight - 高亮状态（如Success, Error, Warning等）

  • press - 点击事件处理函数

  • selected - 是否被选中

c），数字格式化

  • numberState - 数字的状态（如Success, Error等）

  • number和numberUnit常结合使用显示格式化的金额

d），其他属性

  • attributes - 附加属性集合（显示在标题下方）

  • firstStatus - 第一个状态指示器

  • secondStatus - 第二个状态指示器

  • markers - 标记集合

 

 

以上就是本篇的全部内容。

更多SAP顾问业务知识请点击下面目录链接或东京老树根的博客主页

https://blog.csdn.net/shi_ly/category_12216766.html

东京老树根-CSDN博客

http://www.lryc.cn/news/2401270.html

相关文章：

  • 网络编程之TCP编程
  • C++进阶--C++11（04）
  • 当AI遇上防火墙：新一代智能安全解决方案全景解析
  • STL 库基础概念与示例
  • Spring MVC参数绑定终极手册：单多参/对象/集合/JSON/文件上传精讲
  • Fluence推出“Pointless计划”：五种方式参与RWA算力资产新时代
  • innovus: ecoAddRepeater改变hier层级解决办法
  • 华为OD机试真题——硬件产品销售方案（2025A卷：100分）Java/python/JavaScript/C++/C语言/GO六种最佳实现
  • 突破数据孤岛：StarRocks联邦查询实战指南
  • 传统业务对接AI-AI编程框架-Rasa的业务应用实战（1）--项目背景即学习初衷
  • 低功耗架构突破：STM32H750 与 SD NAND （存储芯片）如何延长手环续航至 14 天
  • CSS选择子元素
  • git cherry-pick (28)
  • android与Qt类比
  • AX513CE 是一款针对模组渠道市场前端IPC应用而设计的数字SOC芯片 支持高清CMOS Sensor输入 国产品牌
  • Linux（11)——基础IO（上）
  • ABP-Book Store Application中文讲解 - Part 9: Authors: User Interface
  • 鸿蒙开发修改版本几个步骤
  • Hive自定义函数案例（UDF、UDAF、UDTF）
  • 【学习笔记】Circuit Tracing: Revealing Computational Graphs in Language Models
  • 3D视觉重构工业智造：解码迁移科技如何用“硬核之眼“重塑生产节拍
  • Elasticsearch中的刷新（Refresh）和刷新间隔介绍
  • STM32标准库-TIM定时器
  • 【算法训练营Day05】哈希表part1
  • CMap应用场景和例子
  • Kafka 如何保证顺序消费
  • 【算法题】算法一本通
  • Modbus转Ethernet IP赋能挤出吹塑机智能监控
  • C++中如何遍历map？
  • 什么是终端安全管理系统（终端安全管理软件2024科普）