我正在创建一个具有 Fiori Launchpad 样式(使用 Shell 组件)但仅使用 openui5 组件的应用程序。 这是启动板的预览。
我的问题是当我尝试使用路由器导航时,内容被附加到主 Shell 内容聚合中,而不是清理启动板图标。 这是此行为的预览
我的索引:
<!DOCTYPE html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta http-equiv='Content-Type' content='text/html;charset=UTF-8'/>
<title>Intranet 4success</title>
<link rel="shortcut icon" href="https://www.4success.com.br/wp-content/uploads/2014/06/favicon.ico" type="image/x-icon" />
<meta name="description" content="">
<meta name="viewport" content="width=device-width, initial-scale=1">
<script
src="http://openui5.localhost/resources/sap-ui-core.js"
id="sap-ui-bootstrap"
data-sap-ui-libs="sap.m"
data-sap-ui-theme="sap_bluecrystal"
data-sap-ui-compatVersion="edge"
data-sap-ui-preload="async"
data-sap-ui-resourceroots='{"4success.sfsf-analytics": ""}'>
</script>
<script>
sap.ui.getCore().attachInit(function () {
new sap.m.App({
pages: [
new sap.m.Page({
showHeader: false,
enableScrolling: true,
content: [new sap.ui.core.ComponentContainer({
name: "4success.sfsf-analytics"
})]
})
]
}).placeAt("content", "first");
});
</script>
</head>
<body class="sapUiBody sapUShellFullHeight" role="application">
<div id="content"></div>
</body>
</html>
我的清单.json:
{
"_version": "1.1.0",
"sap.app": {
"_version": "1.1.0",
"id": "4success.sfsf-analytics",
"type": "application",
"i18n": "i18n/i18n.properties",
"applicationVersion": {
"version": "1.0.0"
},
"title": "{{appTitle}}",
"description": "{{appDescription}}",
"sourceTemplate": {
"id": "ui5template.basicSAPUI5ApplicationProject",
"version": "1.32.0"
}
},
"sap.ui": {
"_version": "1.3.0",
"technology": "UI5",
"icons": {
"icon": "",
"favIcon": "",
"phone": "",
"phone@2": "",
"tablet": "",
"tablet@2": ""
},
"deviceTypes": {
"desktop": true,
"tablet": true,
"phone": true
},
"supportedThemes": [
"sap_hcb",
"sap_bluecrystal"
]
},
"sap.ui5": {
"_version": "1.2.0",
"rootView": {
"viewName": "4success.sfsf-analytics.view.App",
"type": "XML"
},
"dependencies": {
"minUI5Version": "1.34.0",
"libs": {
"sap.ui.core": {
"minVersion": "1.34.0"
},
"sap.m": {
"minVersion": "1.34.0"
},
"sap.ui.layout": {
"minVersion": "1.34.0"
}
}
},
"contentDensities": {
"compact": true,
"cozy": true
},
"models": {
"i18n": {
"type": "sap.ui.model.resource.ResourceModel",
"settings": {
"bundleName": "4success.sfsf-analytics.i18n.i18n"
}
}
},
"resources": {
"css": [
{
"uri": "css/style.css"
}
]
},
"routing": {
"config": {
"routerClass": "sap.m.routing.Router",
"viewType": "XML",
"viewPath": "4success.sfsf-analytics.view",
"controlId": "myShell",
"controlAggregation": "content",
"clearTarget": true,
"transition": "slide",
"bypassed": {
"target": "notFound"
}
},
"routes": [
{
"pattern": "",
"name": "appHome",
"target": "launchpad"
},
{
"pattern": "instances",
"name": "instances",
"target": "instances"
}
],
"targets": {
"launchpad": {
"viewName": "Launchpad",
"viewLevel": 1
},
"instances": {
"viewName": "Instances",
"viewLevel": 2
}
}
}
}
}
我的 App.view.xml:
<mvc:View
controllerName="4success.sfsf-analytics.controller.App"
xmlns:u="sap.ui.unified"
xmlns:mvc="sap.ui.core.mvc"
xmlns="sap.m"
class="viewPadding">
<u:Shell
id="myShell"
icon="{/logo}">
<u:headItems>
<u:ShellHeadItem
tooltip="{i18n>menuConfiguration}"
icon="sap-icon://menu2"
press="handlePressConfiguration"/>
<u:ShellHeadItem
tooltip="{i18n>menuHome}"
icon="sap-icon://home"
visible="true"
press="onHomePress"/>
</u:headItems>
<u:headEndItems>
<u:ShellHeadItem
icon="sap-icon://log"
tooltip="{i18n>menuLogoff}"
press="onLogout"/>
</u:headEndItems>
<u:user>
<u:ShellHeadUserItem
image="sap-icon://account"
id="btnUserName"/>
</u:user>
<u:search>
<SearchField
search="handleSearchPressed"/>
</u:search>
<u:paneContent>
<Text text="Lorem ipsum"/>
</u:paneContent>
<u:content />
</u:Shell>
</mvc:View>
我的 Launchpad.view.xml:
<mvc:View
controllerName="4success.sfsf-analytics.controller.Launchpad"
height="100%"
xmlns:mvc="sap.ui.core.mvc"
xmlns="sap.m">
<Page showHeader="false"
enableScrolling="false"
id="idPageHome">
<content>
<TileContainer height="100%"
width="100%"
allowAdd="true"
id="idTileContainer"
tileDelete="handleTileDelete">
<tiles>
<StandardTile title="{i18n>launchpadInstances}"
icon="sap-icon://cloud"
id="idInstances"
press="handleTileNavigation"/>
</tiles>
</TileContainer>
</content>
<footer>
<Toolbar>
<ToolbarSpacer/>
<Button text="{i18n>menuOrganizeIcons}" press="handleEditPress"/>
<ToolbarSpacer/>
</Toolbar>
</footer>
</Page>
</mvc:View>
最后是我的 Instances.view.xml:
<mvc:View
controllerName="4success.sfsf-analytics.controller.Instances"
xmlns:mvc="sap.ui.core.mvc"
xmlns="sap.m"
height="100%">
<Page showNavButton="true"
title="Instâncias SuccessFactors"
navButtonPress="onNavBack">
<content>
<Table id="idProductsTable"
inset="false"
class="sapUiSmallMarginBottom sapUiResponsiveContentPadding"
items="{
path: '/InstancesCollection',
sorter: {
path: 'description'
}
}">
<headerToolbar>
<Toolbar>
<Title text="Instâncias" level="H2"/>
</Toolbar>
</headerToolbar>
<columns>
<Column width="12em">
<Text text="Cliente"/>
</Column>
<Column minScreenWidth="Tablet"
demandPopin="true">
<Text text="ID da Empresa"/>
</Column>
<Column minScreenWidth="Tablet"
demandPopin="true"
hAlign="Right">
<Text text="Usuário"/>
</Column>
<Column minScreenWidth="Tablet"
demandPopin="true"
hAlign="Center">
<Text text="Servidor"/>
</Column>
<Column hAlign="Right">
<Text text="Status"/>
</Column>
</columns>
<items>
<ColumnListItem>
<cells>
<ObjectIdentifier title="{description}"/>
<Text text="{company_id}"/>
<Text text="{username}"/>
<Text text="{server_url}"/>
<Text text="{status}"/>
</cells>
</ColumnListItem>
</items>
</Table>
</content>
</Page>
</mvc:View>
对于导航,我使用以下命令:
this.getRouter().navTo("instances");
对这种行为有什么想法吗?