SAP UI5 Smart Table 和 Smart Filter Bar 的联合使用方法介绍试读版

简介: SAP UI5 Smart Table 和 Smart Filter Bar 的联合使用方法介绍试读版

本教程第 147 个步骤,我们介绍了 SAP UI5 Smart Table 控件的用法:

  • SAP UI5 应用开发教程之一百四十七 - SAP UI5 SmartTable 控件的使用介绍

如下图所示:

03d31d1e236862e689a056b6643a23a7.png

本步骤我们在 Smart Table 本身的基础上再进一步,学习如何将 Smart Table 配合 Smart Filter Bar 共同使用。


先看一下效果。我们进入文件夹 154,运行命令行 ui5 serve,可以看到 Smart Table 控件上方的 Filter Bar 控件,当前默认显示的 filter 为 Category 字段。


7bfaf66acb2ab58ee090f2cb426175dc.png

我们可以为这个 Category 字段维护值,让这个值对 Smart Table 里显示的内容进行过滤。

首先点击 Category 字段如下图图例1所示的图标,在弹出的 Category 所有可选值下拉窗口里,选择 Accessory

a1150bf2081c7f8afac54e5b2237fabb.png

然后点击 OK:

095b5049db3ee1880fb1bfc21c88792d.png

点击 Smart Filter Bar 正上方的 Go 按钮,就可以对 Smart Table 进行过滤,从而让那些只有满足过滤条件即 Category 等于 Accessory 的产品数据显示出来,一共只有 4 条。

231a7e12ece48ff45bfc339c26125f37.png

我们还可以点击 Filters 超链接:

05a66181992ecb4ccb90ab530a649ba7.png


将另一个支持的 Currency filter 也配置出来:

ce7b1796a6e2e8b7ae4874c090542d95.png

现在可以看到 Currency 字段出现在 Smart Filter Bar 区域了:

c12c224a60ba717489c8dd5d62a7a6b8.png

点击 Value Help,选择 EUR 这个货币单位作为 filter:

7ed96e933cfba5b3c8f83fe67b95b115.png

点击 Go 按钮,就可以看到所有货币单位为 EUR 的产品了。

3b465b5e2a2fd99bed4fc0471747551d.png

下面是详细的实现步骤讲解。

相关文章
|
5月前
|
存储 安全 测试技术
使用 Visual Studio Code 创建 SAP UI5 项目遇到 self-signed security certificate 相关问题
使用 Visual Studio Code 创建 SAP UI5 项目遇到 self-signed security certificate 相关问题
|
5月前
|
前端开发 数据库 开发者
如何在 SEGW 事务码里为 SAP ABAP OData 服务实现 Function Import 试读版
如何在 SEGW 事务码里为 SAP ABAP OData 服务实现 Function Import 试读版
|
5月前
|
BI 网络安全
如何使用 ABAPGit 在 SAP ABAP 系统安装 abap2xlsx 工具试读版
如何使用 ABAPGit 在 SAP ABAP 系统安装 abap2xlsx 工具试读版
|
5月前
|
XML 网络安全 开发工具
如何下载并安装 SAP ABAPGit,并完成 ABAP 服务器上 SSL 证书的配置试读版
如何下载并安装 SAP ABAPGit,并完成 ABAP 服务器上 SSL 证书的配置试读版
|
5月前
|
网络安全
实战分析 - 为什么有些 SAP ABAP 程序,启动之后界面有些按钮是灰色的试读版
实战分析 - 为什么有些 SAP ABAP 程序,启动之后界面有些按钮是灰色的试读版
关于 SAP ABAP OData 服务如何实现 Deep Insert 场景 - SAP 应用的标准行为试读版
关于 SAP ABAP OData 服务如何实现 Deep Insert 场景 - SAP 应用的标准行为试读版
SAP ABAP Subscreen 使用介绍试读版
SAP ABAP Subscreen 使用介绍试读版
SAP ABAP Subscreen 使用介绍试读版
|
5月前
|
数据库
如何查询 SAP ABAP 系统里消耗存储空间排名前几位的数据库表试读版
如何查询 SAP ABAP 系统里消耗存储空间排名前几位的数据库表试读版
如何查询 SAP ABAP 系统里消耗存储空间排名前几位的数据库表试读版
|
5月前
|
Web App开发 数据采集 前端开发
纯技术讨论:如何让 SAP UI5 应用无法被别人在浏览器里调试 - 这种做法不推荐试读版
纯技术讨论:如何让 SAP UI5 应用无法被别人在浏览器里调试 - 这种做法不推荐试读版
|
5月前
|
XML 存储 数据格式
SAP UI5 控件 customData 属性的应用介绍
SAP UI5 控件 customData 属性的应用介绍
下一篇
无影云桌面