部署Fiori应用至ABAP系统后出现Cannot Add Direct Child错误

基于SAP官方ToolPage水平导航示例开发的Fiori应用，本地VS Code运行正常，但部署到ABAP系统并从Fiori Launchpad启动时，触发Cannot Add Direct Child错误（截图：）。尝试调整标签结构后功能异常，寻求解决方法。

现有代码 #

<mvc:View controllerName="grcruletest.controller.Master"
    xmlns="sap.m"
    xmlns:mvc="sap.ui.core.mvc"
    xmlns:tnt="sap.tnt"
    xmlns:f="sap.f" 
    xmlns:variants="sap.ui.comp.variants" 
    xmlns:filterbar="sap.ui.comp.filterbar" 
    xmlns:custom="http://schemas.sap.com/sapui5/extension/sap.ui.core.CustomData/1">
    <tnt:ToolPage id="toolPage">
        <tnt:subHeader>
            <tnt:ToolHeader>
                <IconTabHeader
                        selectedKey="page1"
                        select=".onItemSelect"
                        mode="Inline">
                    <layoutData>
                        <OverflowToolbarLayoutData priority="NeverOverflow" shrinkable="true" />
                    </layoutData>
                    <items>
                        <IconTabFilter text="Compliance Engine" key="page1"/>
                        <IconTabFilter text="Rulebook Editor" key="page2"/>
                        <IconTabFilter text="Protokolle" key="page3"/>
                    </items>
                </IconTabHeader>
            </tnt:ToolHeader>
        </tnt:subHeader>
        <tnt:mainContents>
            <NavContainer id="pageContainer" initialPage="page1">
                <pages>
                    <ScrollContainer
                        id="page1"
                        horizontal="false"
                        vertical="true"
                        height="100%">
                        <mvc:XMLView id="compliance" viewName="grcruletest.view.compliance" />
                    </ScrollContainer>
                    <ScrollContainer
                        id="page2"
                        horizontal="false"
                        vertical="true"
                        height="100%">
                        <mvc:XMLView id="rulebook" viewName="grcruletest.view.rulebook" />
                    </ScrollContainer>
                    <ScrollContainer
                        id="page3"
                        horizontal="false"
                        vertical="true"
                        height="100%">
                        <mvc:XMLView id="protocols" viewName="grcruletest.view.protocols" />
                    </ScrollContainer>
                </pages>
            </NavContainer>
        </tnt:mainContents>
    </tnt:ToolPage>
</mvc:View>

问题原因与修复方案 #

原因 #

Fiori Launchpad的Shell容器对应用根视图的结构有特定要求：根视图的直接子控件必须是允许动态添加导航元素的容器（如sap.m.App），而直接将tnt:ToolPage作为根控件时，Launchpad尝试向其添加子元素会违反ToolPage的子元素规则（仅允许header/subHeader/sideContent/mainContents这些指定子节点），从而触发错误。

修复步骤 #

将tnt:ToolPage包裹在sap.m.App容器中，作为App的直接子元素，修改后的代码如下：

<mvc:View controllerName="grcruletest.controller.Master"
    xmlns="sap.m"
    xmlns:mvc="sap.ui.core.mvc"
    xmlns:tnt="sap.tnt"
    xmlns:f="sap.f" 
    xmlns:variants="sap.ui.comp.variants" 
    xmlns:filterbar="sap.ui.comp.filterbar" 
    xmlns:custom="http://schemas.sap.com/sapui5/extension/sap.ui.core.CustomData/1">
    <!-- 添加sap.m.App作为根容器 -->
    <sap.m.App id="app">
        <tnt:ToolPage id="toolPage">
            <tnt:subHeader>
                <tnt:ToolHeader>
                    <IconTabHeader
                            selectedKey="page1"
                            select=".onItemSelect"
                            mode="Inline">
                        <layoutData>
                            <OverflowToolbarLayoutData priority="NeverOverflow" shrinkable="true" />
                        </layoutData>
                        <items>
                            <IconTabFilter text="Compliance Engine" key="page1"/>
                            <IconTabFilter text="Rulebook Editor" key="page2"/>
                            <IconTabFilter text="Protokolle" key="page3"/>
                        </items>
                    </IconTabHeader>
                </tnt:ToolHeader>
            </tnt:subHeader>
            <tnt:mainContents>
                <NavContainer id="pageContainer" initialPage="page1">
                    <pages>
                        <ScrollContainer
                            id="page1"
                            horizontal="false"
                            vertical="true"
                            height="100%">
                            <mvc:XMLView id="compliance" viewName="grcruletest.view.compliance" />
                        </ScrollContainer>
                        <ScrollContainer
                            id="page2"
                            horizontal="false"
                            vertical="true"
                            height="100%">
                            <mvc:XMLView id="rulebook" viewName="grcruletest.view.rulebook" />
                        </ScrollContainer>
                        <ScrollContainer
                            id="page3"
                            horizontal="false"
                            vertical="true"
                            height="100%">
                            <mvc:XMLView id="protocols" viewName="grcruletest.view.protocols" />
                        </ScrollContainer>
                    </pages>
                </NavContainer>
            </tnt:mainContents>
        </tnt:ToolPage>
    </sap.m.App>
</mvc:View>

验证说明 #

• 本地运行：修改后仍可在VS Code中正常运行，不影响原有功能
• Launchpad运行：App容器作为根控件，可兼容Launchpad的Shell导航逻辑，避免“Cannot Add Direct Child”错误

内容的提问来源于stack exchange，提问作者doostaay