SAP Spartacus B2B页面的List Component

简介: SAP Spartacus B2B页面的List Component

需求如下:


不管选择左边的view里列表行项目的哪一条,右边页面第一个可以被focus的元素,即Edit按钮,需要自动被focus:


image.png


如果像上图这样,将cxFocus直接施加到a标签页上,一个side effect就是,a标签的tabindex将会被设置成默认的-1,这样没办法接收接下来的tab事件了:


image.png


如下图Budgets列表页面所示:



image.png

其Spartacus里的Component实现:ListComponent:


image.png

image.png


显示不同数据的cx-org-list通过class值的不同来区分:


image.png


cx-org-list即ListComponent,内部包含了cx-split-view, 两个子view,左边的cx-view, class为list,右边的子view,class为card.


image.png


右边最外层为cx-org-budget-details:


image.png


每个detail页面岂不是都要做同样的修改:


image.png


相关文章
|
5月前
|
JavaScript 前端开发 数据库
如何在 SAP CRM 里通过 navigation framework 跳转到 ABAP Webdynpro 页面
如何在 SAP CRM 里通过 navigation framework 跳转到 ABAP Webdynpro 页面
|
5月前
|
XML 存储 JavaScript
关于 SAP Fiori Elements List Report 里的 TableCell.fragment.xml 头部声明
关于 SAP Fiori Elements List Report 里的 TableCell.fragment.xml 头部声明
|
5月前
|
前端开发
SAP UI5 应用如何使用 iframe 嵌入其他 HTML 页面试读版
SAP UI5 应用如何使用 iframe 嵌入其他 HTML 页面试读版
|
5月前
|
存储 缓存 前端开发
关于 SAP Spartacus Optimization Engine 里的 cache 参数使用注意事项
关于 SAP Spartacus Optimization Engine 里的 cache 参数使用注意事项
|
5月前
|
JSON 开发者 数据格式
关于 SAP Spartacus LandingPage2Template 区域的 layout 设计实现
关于 SAP Spartacus LandingPage2Template 区域的 layout 设计实现
|
5月前
|
设计模式 前端开发 JavaScript
关于 SAP Fiori Elements List Report Go 按钮的实现
关于 SAP Fiori Elements List Report Go 按钮的实现
|
5月前
|
搜索推荐 开发者 UED
关于 SAP Spartacus 层的 UI 设计
关于 SAP Spartacus 层的 UI 设计
|
5月前
|
开发者 UED
SAP Spartacus BREAKPOINT 枚举类型在 Spartacus layout 实现中的作用
SAP Spartacus BREAKPOINT 枚举类型在 Spartacus layout 实现中的作用
|
11月前
|
前端开发 开发者 容器
SAP Fiori Elements List Report 应用里 Header 字段的绑定路径
SAP Fiori Elements List Report 应用里 Header 字段的绑定路径
|
11月前
|
JSON 数据格式
通过 SAP UI5 IconTabBar 控件结合 FlexibleColumnLayout 实现多页面 Master-Detail 布局试读版
通过 SAP UI5 IconTabBar 控件结合 FlexibleColumnLayout 实现多页面 Master-Detail 布局试读版
下一篇
无影云桌面