关于 SAP UI5 OData V4 模型的 Property Binding 使用介绍

本文涉及的产品
可视分析地图(DataV-Atlas),3 个项目,100M 存储空间
简介: 关于 SAP UI5 OData V4 模型的 Property Binding 使用介绍

Property binding 和一个对象的值关联。

下面的例子:使用控制器方法 formatPhoneNumbersAsCSV 显示业务合作伙伴联系人的电话号码列表,以逗号分隔:

<SimpleForm binding="{/BusinessPartnerList('42')}">
  <Label text="Phone number list" />
  <Text text="{path : 'BP_2_CONTACT', mode : 'OneTime', targetType : 'any', formatter : '.formatPhoneNumbersAsCSV'}" />
</SimpleForm>

上面 XML 视图里,在 Text 控件里,显示 id 为 42 的 Business Partner 模型的属性值 BP_2_CONTACT,并且用自定义格式器 .formatPhoneNumbersAsCSV 在电话号码之间加上逗号分隔符。


OData V4 模型根据控件或应用程序请求的数据范围,自动确定系统查询选项 $top 和 $skip.


在下面的示例中,生成的第一个请求是 GET People(‘angelhuffman’)/Friends?KaTeX parse error: Expected 'EOF', got '&' at position 15: expand=Friends&̲skip=0&$top=107。 $top 的值是根据请求数据的长度 (7) 加上控件提供的预取大小 (100) 计算得出的。

<table:Table id="PeopleTable" width="auto" title="People" visibleRowCount="7"
        rows="{
            path:'/People(\'angelhuffman\')/Friends',
            parameters: {
                $expand:'Friends'
            }
        }">
    <table:columns>
    ...
    </table:columns>
</table:Table>

另一种分页机制是服务器驱动分页,服务器只返回请求数据的一部分以限制响应大小。 自 SAPUI5 1.72 起,OData V4 模型支持此机制。该模型会将检索到的数据与对控件或应用程序的响应一起提供。 后续请求不会再自动触发,只有在控件或应用程序向模型请求附加数据时才会触发。


只有 list 和 context binding 支持 OData 系统查询选项 a p p l y 、 apply、apply、count、e x p a n d 、 expand、expand、filter、o r d e r b y 、 orderby、orderby、search 和 $select,property binding 不支持。


使用 JavaScript 进行数据绑定的例子:

oView.byId("SalesOrderTable").bindItems({
    path : "/SalesOrderList",
    parameters : {
        "$count" : true,
        "$expand" : {
            "SO_2_SOITEM" : {
                "$orderby" : "ItemPosition",
                "$select" : ["ItemPosition", "Quantity", "QuantityUnit", "SalesOrderID"]
            }
        },
        "$filter" : "BuyerName ge 'M'",
        "$orderby" : "GrossAmount desc",
        "$select" : ["BuyerName", "CurrencyCode", "GrossAmount", "Note", "SalesOrderID"]
    }
});

使用 XML 视图进行数据绑定的例子:

<Table growing="true" growingThreshold="5" id="SalesOrders"
    items="{
            path : '/SalesOrderList',
            parameters : {
                $count : true,
                $expand : 'SO_2_BP',
                $filter : 'BuyerName ge \'M\'',
                $orderby : 'GrossAmount desc',
                $select : 'BuyerName,CurrencyCode,GrossAmount,Note,SalesOrderID'
            },
        }">

$expand 不仅仅可以是字符串,也可以是一个 JSON 对象:

<Table growing="true" growingThreshold="5" id="SalesOrders"
    items="{
            path : '/SalesOrderList',
            parameters : {
                $count : true,
                $expand : {
                       'SO_2_SOITEM' : {
                               '$orderby' : 'ItemPosition',
                               '$select' : ['ItemPosition','Quantity','QuantityUnit','SalesOrderID']
                       }
               },
                $filter : 'BuyerName ge \'M\'',
                $orderby : 'GrossAmount desc',
                $select : ['BuyerName','CurrencyCode','GrossAmount','Note','SalesOrderID']
            },
        }">

OData V4 模型允许绑定由参数 $count 设置为 true 的 ODataListBinding 读取的实体集合的内联计数。不活跃的上下文(也就是说,没有显示在当前列表控件里的记录)不影响这个计数;


在下面的示例中,表标题绑定到 $count,因此表示绑定到表的集合中的销售订单实体的数量。

<Table id="SalesOrders"
    items="{
        path : '/SalesOrderList',
        parameters : {
            $count : true,
        }
    }"
>
    <headerToolbar>
        <Toolbar>
            <content>
                <Title id="SalesOrdersTitle" text="{$count} Sales Orders"/>
            </content>
        </Toolbar>
    </headerToolbar>
    ...
</Table>
相关实践学习
基于Hologres轻松玩转一站式实时仓库
本场景介绍如何利用阿里云MaxCompute、实时计算Flink和交互式分析服务Hologres开发离线、实时数据融合分析的数据大屏应用。
阿里云实时数仓实战 - 项目介绍及架构设计
课程简介 1)学习搭建一个数据仓库的过程,理解数据在整个数仓架构的从采集、存储、计算、输出、展示的整个业务流程。 2)整个数仓体系完全搭建在阿里云架构上,理解并学会运用各个服务组件,了解各个组件之间如何配合联动。 3&nbsp;)前置知识要求 &nbsp; 课程大纲 第一章&nbsp;了解数据仓库概念 初步了解数据仓库是干什么的 第二章&nbsp;按照企业开发的标准去搭建一个数据仓库 数据仓库的需求是什么 架构 怎么选型怎么购买服务器 第三章&nbsp;数据生成模块 用户形成数据的一个准备 按照企业的标准,准备了十一张用户行为表 方便使用 第四章&nbsp;采集模块的搭建 购买阿里云服务器 安装 JDK 安装 Flume 第五章&nbsp;用户行为数据仓库 严格按照企业的标准开发 第六章&nbsp;搭建业务数仓理论基础和对表的分类同步 第七章&nbsp;业务数仓的搭建&nbsp; 业务行为数仓效果图&nbsp;&nbsp;
相关文章
|
2月前
|
前端开发 搜索推荐 开发者
SAP UI5 sap.m.Column 控件的 minScreenWidth 属性介绍
SAP UI5 sap.m.Column 控件的 minScreenWidth 属性介绍
|
2月前
|
JavaScript 前端开发 开发者
SAP UI5 控件 sap.m.ListBase 的 inset 属性的作用介绍
SAP UI5 控件 sap.m.ListBase 的 inset 属性的作用介绍
|
2月前
|
Web App开发 数据采集 前端开发
纯技术讨论:如何让 SAP UI5 应用无法被别人在浏览器里调试 - 这种做法不推荐试读版
纯技术讨论:如何让 SAP UI5 应用无法被别人在浏览器里调试 - 这种做法不推荐试读版
|
2月前
|
XML 存储 数据格式
SAP UI5 控件 customData 属性的应用介绍
SAP UI5 控件 customData 属性的应用介绍
|
2月前
|
前端开发 JavaScript API
SAP UI5 sap.ui.require.toUrl 的作用介绍
SAP UI5 sap.ui.require.toUrl 的作用介绍
|
2月前
|
搜索推荐
如何让 SAP UI5 Smart Table 支持多项选择(Multiple-Selection)试读版
如何让 SAP UI5 Smart Table 支持多项选择(Multiple-Selection)试读版
|
2月前
|
存储 安全 测试技术
使用 Visual Studio Code 创建 SAP UI5 项目遇到 self-signed security certificate 相关问题
使用 Visual Studio Code 创建 SAP UI5 项目遇到 self-signed security certificate 相关问题
|
2月前
|
开发者 UED
SAP UI5 SmartFilterBar 中 ControlConfiguration Aggregation 的作用介绍
SAP UI5 SmartFilterBar 中 ControlConfiguration Aggregation 的作用介绍
|
13天前
|
Dart Serverless Android开发
Flutter 单线程模型保证UI运行流畅
Flutter 单线程模型保证UI运行流畅
18 0
|
2月前
|
XML JSON 开发框架
基于 OData 模型和 JSON 模型的 UI5 表格控件行项目的添加和删除实现
基于 OData 模型和 JSON 模型的 UI5 表格控件行项目的添加和删除实现