SAP Fiori Elements List Report Smart Table Toolbar 的 XML 视图实现

携手创作，共同成长！这是我参与「掘金日新计划 · 8 月更文挑战」的第6天，点击查看活动详情

http://localhost:8080/resources/sap/suite/ui/generic/template/ListReport/view/fragments/SmartTableToolbar.fragment.xml

SmartTableToolbar.fragment.xml 里，包含了 BreakoutActions.fragment：

http://localhost:8080/resources/sap/suite/ui/generic/template/ListReport/view/fragments/BreakoutActions.fragment.xml

源代码：

<core:FragmentDefinition xmlns:template="http://schemas.sap.com/sapui5/extension/sap.ui.core.template/1"
						 xmlns="sap.m" xmlns:core="sap.ui.core" xmlns:build="sap.build">

	<template:if test="{= ${tmpEntitySet>EntitySet} === ${parameter>/entitySet} }">
		<template:repeat list="{tmpEntitySet>Actions}" var="customaction">
			<!--all break out actions which are neither determining nor global-->
			<template:if test="{= !${customaction>determining} &amp;&amp; !${customaction>global}}">
				<Button id="{parts: [{path: 'customaction>'}, {path: 'tabItem>'}], formatter: 'sap.suite.ui.generic.template.js.AnnotationHelper.getBreakoutActionButtonId'}"
						enabled="{parts: [{path: 'customaction>'}, {path: 'tabItem>'}], formatter: 'sap.suite.ui.generic.template.js.AnnotationHelper.getBreakoutActionEnabledKey'}"
						text="{customaction>text}"
						press="{customaction>press}" type="Transparent">
					<layoutData>
						<OverflowToolbarLayoutData priority = "{customaction>importance}"/>
					</layoutData>
				</Button>
            </template:if>
		</template:repeat>
	</template:if>
</core:FragmentDefinition>

运行时，该 XML 视图源代码被 XMLPreprocessor.js 解析：

SmartTableToolbar.fragment.xml 里包含了 BreakoutActions.fragment.xml:

getBreakoutActionButtonId:

我在 manifest.json 的 extends 区域里定义了一个普通的自定义按钮，global 属性为 false：

"extends": {
            "extensions": {
                "sap.ui.controllerExtensions": {
                    "sap.suite.ui.generic.template.ListReport.view.ListReport": {
                      "controllerName": "com.sap.jerry.jerryfioriapp.ext.controller.ListReportExtension",
                        "sap.ui.generic.app": {
                          "SEPMRA_C_PD_Product": {
                            "EntitySet": "SEPMRA_C_PD_Product",
                            "Actions": {
                              "ActionName1": {
                                "id" : "ActionName1",
                                "text" : "Action Name One",
                                "press" : "onCustomAction1",
                                "requiresSelection": false,
                                "global":false
                              }
                            }
                        }
                    }
                }        
            }
            }
        },

外观如下：

global 属性改成 true 后：

button 的按钮位置发生了改变，跑到页面右上角了：

从 breakoutActions.fragment.xml 的实现源代码里发现，custom action 还有一个 determining 属性：

设成 true 之后，跑到屏幕下方 footer 区域了。虽然位置发生了变化，不影响点击按钮后的事件响应。