<!DOCTYPE HTML>
<html>
<head>
<meta charset="UTF-8">
<title>Nested components w/ FCL</title> <!--
This sample is outdated! For a newer approach, see:
- "Enabling Routing in Nested Components": https://sdk.openui5.org/topic/fb19f501b16e4e4991eb6a017770945b
- "Navigate with Nested Components": https://sdk.openui5.org/topic/8e9d6e4df5464eb5a6e40696c4d2ccd6
- Sample: https://sdk.openui5.org/entity/sap.ui.core.routing.Router/sample/sap.ui.core.sample.RoutingNestedComponent
-->
<!-- Nightly UI5 URL only testing and demo purposes -->
<script id="sap-ui-bootstrap"
src="https://sdk.openui5.org/nightly/resources/sap-ui-core.js"
data-sap-ui-onInit="module:sap/ui/core/ComponentSupport"
data-sap-ui-async="true"
data-sap-ui-compatVersion="edge"
data-sap-ui-excludeJQueryCompat="true"
data-sap-ui-resourceRoots='{
"demo": "./",
"anotherComponent": "./component_B"
}'
data-sap-ui-xx-componentPreload="off"
data-sap-ui-xx-waitForTheme="init"
></script>
</head>
<body id="content" class="sapUiBody">
<div data-sap-ui-component
data-id="rootComponentContainer"
data-name="demo"
data-height="100%"
data-settings='{"id": "rootComponent"}'
></div>
</body>
</html>
sap.ui.define([
"sap/ui/core/UIComponent",
"sap/ui/core/ComponentSupport",//https://github.com/SAP/ui5-tooling/issues/381
], (UIComponent) => {
"use strict";
return UIComponent.extend("demo.Component", {
metadata: {
manifest: "json",
interfaces: [
"sap.ui.core.IAsyncContentCreation", // https://openui5.hana.ondemand.com/api/sap.ui.core.IAsyncContentCreation
],
},
init() {
UIComponent.prototype.init.apply(this, arguments);
this.getRouter().initialize();
},
});
});
{
"_version": "1.33.0",
"start_url": "index.html",
"sap.app": {
"id": "demo",
"type": "application",
"i18n": "",
"title": "Demo",
"description": "Sample Code",
"applicationVersion": {
"version": "1.0.0"
},
"embeds": [
"component_B"
]
},
"sap.ui": {
"technology": "UI5",
"deviceTypes": {
"desktop": true,
"tablet": true,
"phone": true
}
},
"sap.ui5": {
"componentUsages": {
"reuseAnotherComponent": {
"name": "anotherComponent",
"lazy": false
}
},
"autoPrefixId": true,
"dependencies": {
"minUI5Version": "1.48.3",
"libs": {
"sap.ui.core": {},
"sap.m": {},
"sap.ui.unified": {},
"sap.ui.layout": {},
"sap.f": {
"lazy": true
},
"sap.uxap": {
"lazy": true
}
}
},
"contentDensities": {
"compact": true,
"cozy": true
},
"models": {
},
"rootView": {
"viewName": "demo.view.App",
"id": "rootView",
"type": "XML",
"async": true,
"height": "100%"
},
"routing": {
"routes": [{
"pattern": "",
"name": "home",
"target": "home"
}],
"targets": {
"home": {
"id": "homeView",
"name": "Home",
"level": 1
},
"notFound": {
"name": "Home",
"transition": "slide",
"level": 98
}
},
"config": {
"async": true,
"routerClass": "sap.m.routing.Router",
"type": "View",
"viewType": "XML",
"path": "demo.view",
"controlId": "rootApp",
"controlAggregation": "pages",
"transition": "slide",
"bypassed": {
"target": "notFound"
},
"homeRoute": "home"
}
}
}
}
<mvc:View xmlns:mvc="sap.ui.core.mvc" xmlns="sap.m" displayBlock="true">
<App id="rootApp" autoFocus="false">
<pages>
<!-- will be added by router -->
</pages>
</App>
</mvc:View>
<mvc:View
xmlns:mvc="sap.ui.core.mvc"
xmlns="sap.m"
xmlns:core="sap.ui.core"
height="100%"
>
<Page id="homePage" title="Component-A">
<core:ComponentContainer id="containerForChildComponent"
autoPrefixId="true"
usage="reuseAnotherComponent"
settings="{id: 'childComponent'}"
height="100%"
manifest="true"
async="true"
/>
</Page>
</mvc:View>
sap.ui.define([
"sap/ui/core/UIComponent",
"sap/ui/core/ComponentSupport",//https://github.com/SAP/ui5-tooling/issues/381
], (UIComponent) => {
"use strict";
return UIComponent.extend("anotherComponent.Component", {
metadata: {
manifest: "json",
interfaces: [
"sap.ui.core.IAsyncContentCreation", // https://openui5.hana.ondemand.com/api/sap.ui.core.IAsyncContentCreation
],
},
init() {
UIComponent.prototype.init.apply(this, arguments);
this.getRouter().initialize();
},
});
});
{
"_version": "1.33.0",
"sap.app": {
"id": "anotherComponent",
"type": "component",
"i18n": "",
"title": "Demo",
"description": "Sample Code",
"applicationVersion": {
"version": "1.0.0"
},
"dataSources": {
"odataDemo": {
"uri": "https://services.odata.org/TripPinRESTierService/(S(1tcx5zrnfqce0auwoxw4cotw))/",
"type": "OData",
"settings": {
"odataVersion": "4.0"
}
}
},
"embeddedBy": "../"
},
"sap.ui": {
"technology": "UI5",
"deviceTypes": {
"desktop": true,
"tablet": true,
"phone": true
}
},
"sap.ui5": {
"resourceRoots": {
"anotherComponent": "./"
},
"autoPrefixId": true,
"dependencies": {
"minUI5Version": "1.48.3",
"libs": {
"sap.ui.core": {},
"sap.m": {},
"sap.f": {},
"sap.uxap": {},
"sap.ui.unified": {},
"sap.ui.layout": {}
}
},
"models": {
"": {
"dataSource": "odataDemo",
"settings": {
"autoExpandSelect": true,
"operationMode": "Server"
},
"preload": true
}
},
"contentDensities": {
"compact": true,
"cozy": true
},
"rootView": {
"viewName": "anotherComponent.view.FCL",
"id": "rootViewOfAnotherComponent",
"type": "XML",
"async": true,
"height": "100%"
},
"routing": {
"routes": [
{
"pattern": "",
"name": "master",
"target": "master",
"layout": "OneColumn",
"parent": "demo.Component:home"
}
],
"targets": {
"master": {
"viewId": "masterView",
"viewName": "Master",
"controlAggregation": "beginColumnPages"
}
},
"config": {
"routerClass": "sap.f.routing.Router",
"async": true,
"type": "View",
"viewType": "XML",
"path": "anotherComponent.view",
"controlId": "fcl"
}
}
}
}
<mvc:View
xmlns:mvc="sap.ui.core.mvc"
xmlns="sap.m"
xmlns:f="sap.f"
height="100%"
>
<f:DynamicPage id="masterDynamicPage" class="sapUiNoContentPadding"
fitContent="true"
backgroundDesign="List"
toggleHeaderOnTitleClick="false"
>
<f:title>
<f:DynamicPageTitle>
<f:heading>
<Title id="dynamicPageTitle" text="Component-B"/>
</f:heading>
</f:DynamicPageTitle>
</f:title>
<f:content>
<List items="{
path: '/People',
parameters: {
$count: true
}
}">
<StandardListItem title="{FirstName}" />
</List>
</f:content>
</f:DynamicPage>
</mvc:View>
<mvc:View xmlns:mvc="sap.ui.core.mvc" displayBlock="true" height="100%">
<f:FlexibleColumnLayout xmlns:f="sap.f" id="fcl">
<f:beginColumnPages>
<!-- will be added by router -->
</f:beginColumnPages>
<f:midColumnPages>
<!-- will be added by router -->
</f:midColumnPages>
<f:endColumnPages>
<!-- will be added by router -->
</f:endColumnPages>
</f:FlexibleColumnLayout>
</mvc:View>