专栏首页Jerry的SAP技术分享SAP UI5应用里搜索功能的实现
原创

SAP UI5应用里搜索功能的实现

在一个包含了list的XML视图里,使用SearchField标签页定义一个搜索按钮。点击之后,执行的事件处理函数为handleSearch:

<mvc:View controllerName="sapcp.cf.tutorial.app.controller.View1" xmlns:mvc="sap.ui.core.mvc" displayBlock="true" xmlns="sap.m">
	<Shell id="shell">
		<App id="app">
			<pages>
				<Page id="page" title="{i18n>title}">
					<subHeader>
						<Bar>
							<contentLeft>
								<SearchField search="handleSearch"/>
							</contentLeft>
						</Bar>
					</subHeader>
					<content>
						<List id="List" items="{/Products}">
							<ObjectListItem type="Navigation" press="handleListItemPress" title="{ProductName}" number="{= ((${UnitPrice} * 100) / 100).toFixed(2) }"
								numberUnit="{i18n>currency}">
								<attributes>
									<ObjectAttribute text="{QuantityPerUnit}"/>
								</attributes>
								<firstStatus>
									<ObjectStatus text="{= ${Discontinued}? 'Discontinued' : 'Available' }" state="{= ${Discontinued}? 'Error' : 'Success' }"/>
								</firstStatus>
							</ObjectListItem>
						</List>
					</content>
				</Page>
			</pages>
		</App>
	</Shell>
</mvc:View>

在视图的控制器里实现这个搜索函数:

sap.ui.define([
	"sap/ui/core/mvc/Controller",
	"sap/m/MessageBox"
], function (Controller, MessageBox) {
	"use strict";

	return Controller.extend("sapcp.cf.tutorial.app.controller.View1", {
		onInit: function () {

		},

		// show in a pop-up which list element was pressed
		handleListItemPress: function (oEvent) {
			var oRouter = sap.ui.core.UIComponent.getRouterFor(this);
			var selectedProductId = oEvent.getSource().getBindingContext().getProperty("ProductID");
			oRouter.navTo("Detail", {
				productId: selectedProductId
			});
		}
	});
});

测试:

搜索能够按照期望的工作:

原创声明,本文系作者授权云+社区发表,未经许可,不得转载。

如有侵权,请联系 yunjia_community@tencent.com 删除。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • SAP UI5应用里搜索功能的实现

    在一个包含了list的XML视图里,使用SearchField标签页定义一个搜索按钮。点击之后,执行的事件处理函数为handleSearch:

    Jerry Wang
  • SAP UI5应用里的列表处理

    上面代码里注册的列表元素点击处理函数handleListItemPress,实现在控制器文件里:

    Jerry Wang
  • SAP UI5应用里的列表处理

    上面代码里注册的列表元素点击处理函数handleListItemPress,实现在控制器文件里:

    Jerry Wang
  • 机器学习在客户管理场景中的应用

    本文以SAP Cloud for Customer的客户管理应用为例,介绍机器学习是如何同传统的客户管理应用进行集成的。

    Jerry Wang
  • 敏捷实践经验分享,企业如何在敏捷开发中实施DoD

    当你有两个或更多的人参与同一个事情的时候,我们的“团队”就产生了,这时我们最重要的事情,就是要设定和统一团队的期望值,在本文中,这就是“完成标准”。

    CORNERSTONE
  • 交互式网页应用的网页开发技术Ajax简单介绍

    Ajax(Asynchronous JavaScript and XML的缩写):一种创建交互式网页应用的网页开发技术。包含下列技术: 基于XHTML+CSS的...

    SmileNicky
  • JS-时间处理函数封装汇总 (更新中...)

    最近听说thymeleaf好像也挺流行的,还说是spring官方推荐使用,那thymeleaf究竟是什么呢?spring为什么推荐用它呢?怎么用呢?本文将为你揭...

    xing.org1^
  • springData Jpa 快速入门前言:一、简介:二、JPA核心概念:三、springboot集成jpa案例:总结:

    数据持久化的操作,一般都要由我们自己一步步的去编程实现,mybatis通过我们编写xml实现,hibernate也要配置对应的xml然后通过创建session执...

    贪挽懒月
  • 微信小程序里如何使用npm?小程序集成友盟举例

    点击构建之后,项目会自动帮我们进行构建,然后会多出一个miniprogram_npm文件夹:

    niceyoo

扫码关注云+社区

领取腾讯云代金券