I'm facing an issue with SAPUI5 SplitScreen Concept. I have one initial view on which there is a button that leads to a SplitScreen application. Until this point everything works fine.The issue is that there a two additional views (Master.view, Detail.view) that should be routed to the SplitView.
They simply aren't loaded to it and I can't solve the problem.
I have mentioned manifest.json above.
{
"_version": "1.12.0",
"sap.app": {
"id": "curvy.SplitApp",
"type": "application",
"i18n": "i18n/i18n.properties",
"applicationVersion": {
"version": "1.0.0"
},
"title": "{{appTitle}}",
"description": "{{appDescription}}",
"sourceTemplate": {
"id": "ui5template.basicSAPUI5ApplicationProject",
"version": "1.40.12"
}
},
"sap.ui": {
"technology": "UI5",
"icons": {
"icon": "",
"favIcon": "",
"phone": "",
"phone#2": "",
"tablet": "",
"tablet#2": ""
},
"deviceTypes": {
"desktop": true,
"tablet": true,
"phone": true
}
},
"sap.ui5": {
"flexEnabled": false,
"rootView": {
"viewName": "curvy.SplitApp.view.App",
"type": "XML",
"async": true,
"id": "App"
},
"dependencies": {
"minUI5Version": "1.65.6",
"libs": {
"sap.ui.layout": {},
"sap.ui.core": {},
"sap.m": {}
}
},
"contentDensities": {
"compact": true,
"cozy": true
},
"models": {
"i18n": {
"type": "sap.ui.model.resource.ResourceModel",
"settings": {
"bundleName": "curvy.SplitApp.i18n.i18n"
}
}
},
"resources": {
"css": [{
"uri": "css/style.css"
}]
},
"routing": {
"config": {
"routerClass": "sap.m.routing.Router",
"viewType": "XML",
"async": true,
"viewPath": "curvy.SplitApp.view",
"controlAggregation": "pages",
"controlId": "app",
"clearControlAggregation": false
},
"routes": [{
"name": "RouteApp",
"pattern": "RouteApp",
"target": ["TargetApp"]
}, {
"name": "SplitView",
"pattern": "SplitApp",
"view":"SplitView",
"controlId": "App",
"target": ["SplitView"],
"subroutes": [{
"pattern": "Route_Master",
"name": "Master",
"view": "Master",
"targetAggregation": "masterPages",
"targetControl": "splitapp",
"target": ["Master"],
"subroutes": [{
"pattern": "Route_Detail",
"name": "Detail",
"view": "Detail",
"targetAggregation": "detailPages",
"target": ["Detail"]
}]
}]
}],
"targets": {
"TargetApp": {
"viewType": "XML",
"transition": "slide",
"clearControlAggregation": false,
"viewId": "App",
"viewName": "App"
},
"SplitView": {
"viewType": "XML",
"viewName": "SplitView"
},
"Master": {
"viewType": "XML",
"viewName": "Master",
"controlId": "splitapp"
},
"Detail": {
"viewType": "XML",
"viewName": "Detail",
"controlId": "splitapp"
}
}
}
}
}
Related
Randomly, SAPUI5 throws error Control with ID rootControl could not be found - EventProvider sap.m.routing.Target after login (SAP NetWeaver) to SAPUI5 page. I have tried to force an error login and logout. After many attempts (40 sometimes 102...), error occurred.
My root control is <App id="rootControl"> in App.view.xml.
manifest.json
{
"_version": "1.1.0",
"sap.app": {
"_version": "1.1.0",
"id": "HomePage",
"type": "application",
"i18n": "i18n/i18n.properties",
"title": "{{appTitle}}",
"description": "{{appDescription}}",
"applicationVersion": {
"version": "1.0.6"
},
"ach": "CA-UI5-FST"
},
"sap.ui": {
"technology": "UI5",
"deviceTypes": {
"desktop": true,
"tablet": true,
"phone": true
}
},
"sap.ui5": {
"rootView": {
"viewName": "HomePage.view.App",
"type": "XML",
"async": true,
"id": "rootControl"
},
"dependencies": {
"minUI5Version": "1.30",
"libs": {
"sap.m": {},
"sap.ui.core": {}
}
},
"resources": {
"css": [
{
"uri": "css/customStyle.css"
}
]
},
"models": {
"i18n": {
"type": "sap.ui.model.resource.ResourceModel",
"settings": {
"bundleName": "HomePage.i18n.i18n"
}
},
"view": {
"type": "sap.ui.model.json.JSONModel",
"settings": {
"defaultOperationMode": "Server",
"defaultBindingMode": "TwoWay",
"defaultCountMode": "None",
"useBatch": false
}
}
},
"routing": {
"config": {
"routerClass": "sap.m.routing.Router",
"viewType": "XML",
"viewPath": "HomePage.view",
"controlId": "rootControl",
"controlAggregation": "pages",
"transition": "slide",
"bypassed": {
"target": "notFound"
},
"async": true
},
"routes": [{
"pattern": ":Layout:",
"name": "apphome",
"target": "home"
}, {
"name": "id",
"pattern": "Id/{Id}/:Layout:",
"target": "id"
}, {
"name": "details",
"pattern": "Details/{Details}/:Replace:",
"target": "details"
}],
"targets": {
"home": {
"viewId": "home",
"viewName": "Homepage",
"viewLevel": 1
},
"notFound": {
"viewId": "notFound",
"viewName": "NotFound",
"transition": "show"
},
"id": {
"viewId": "id",
"viewName": "Id",
"viewLevel": 2
},
"details": {
"viewId": "details",
"viewName": "Details",
"viewLevel": 3
}
}
}
}
}
Any idea?
Randomly SAPUI5 throws error ...
I remember having the same issue due to the race condition in the past UI5 versions:
When starting the app, Component.js retrieves the root view asynchronously due to sap.ui5/rootView/async: true.
The init within Component.js usually initializes the router which retrieves the target view corresponding to the hash value while the root view is still loading.
Sometimes, the root view fails to be fully loaded prior to the target view which causes the error → target doesn't know where to put its view.
The commit:d054bc1 makes sure that targets wait until the root view is fully loaded.
The fix was released with 1.54 but should be also available in 1.52.5+ according to the change log.
In order to see which UI5 version the app is running with, press Ctrl + Left Alt + Shift + P. Please upgrade the UI5 lib to the latest stable version.
I do not recommend to load the root view synchronously.
i have a question.. for example i dont want to use the sap cloud and want to deploy my app on a sap gatewayserver so what do i have to change? my app works trough the cloud platform with a destination (cloudconnector).. but i dont want this way anymore. So what i need to change in the manifest or the neo.js? maybe you guys have an example? bc. i dont really find anything what gives me the click in my head..
i dont want to change all the calls to ajax calls.. so there used to be a good solution to change something in the manifest or neo.. or something like that right? so you dont have to change your code
as i said the best way is to show me an example and explain me on this example.
my neo-app.js
{
"welcomeFile": "/webapp/index.html",
"routes": [
{
"path": "/resources",
"target": {
"type": "service",
"name": "sapui5",
"entryPath": "/resources"
},
"description": "SAPUI5 Resources"
},
{
"path": "/test-resources",
"target": {
"type": "service",
"name": "sapui5",
"entryPath": "/test-resources"
},
"description": "SAPUI5 Test Resources"
},
{
"path": "/sap/opu/odata",
"target": {
"type": "destination",
"name": "prototyp2",
"entryPath": "/sap/opu/odata"
},
"description": "prototyp2"
}
],
"sendWelcomeFileRedirect": true
}
as you can see the last route thats the destination via cloud connector.
and this is my manifest
{
"_version": "1.12.0",
"sap.app": {
"id": "test",
"type": "application",
"i18n": "i18n/i18n.properties",
"applicationVersion": {
"version": "1.0.0"
},
"title": "{{appTitle}}",
"description": "{{appDescription}}",
"resources": "resources.json",
"ach": "ach",
"sourceTemplate": {
"id": "servicecatalog.connectivityComponentForManifest",
"version": "0.0.0"
},
"dataSources": {
"ZEITERFASSUNG_2_SRV": {
"uri": "/sap/opu/odata/sap/test_SRV/",
"type": "OData",
"settings": {
"localUri": "localService/metadata.xml"
}
}
}
},
"sap.ui": {
"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": {
"rootView": {
"viewName": "Zeiterfassung.view.timeOverview",
"type": "XML"
},
"dependencies": {
"minUI5Version": "1.66.0",
"libs": {
"sap.m": {},
"sap.ui.core": {},
"sap.ui.layout": {},
"sap.ui.table": {
"minVersion": ""
},
"sap.ui.unified": {
"minVersion": ""
}
}
},
"contentDensities": {
"compact": true,
"cozy": true
},
"models": {
"": {
"type": "sap.ui.model.odata.v2.ODataModel",
"settings": {
"defaultOperationMode": "Server",
"defaultBindingMode": "TwoWay",
"defaultCountMode": "Request"
},
"dataSource": "test_SRV",
"preload": true
}
},
"resources": {
"css": [
{
"uri": "css/style.css"
}
]
},
"routing": {
"config": {
"routerClass": "sap.m.routing.Router",
"viewType": "XML",
"async": true,
"viewPath": "Zeiterfassung.view",
"controlAggregation": "pages",
"controlId": "idAppControl"
},
"targets": {
"TargettimeOverview": {
"viewType": "XML",
"transition": "slide",
"clearAggregation": true,
"viewName": "TimeOverview"
}
}
}
},
"sap.platform.hcp": {
"uri": "webapp",
"_version": "1.3.0"
}
}
Thanks guys
:)
your neo-app.js is only for the webide.
Rename your "webapp" folder to "WebContent".
export your app
unpack
use the ui5 uploader in your backend
"/UI5/UI5_REPOSITORY_LOAD" for uploading
If you run the index.html directly ( instead of using a launchpad), be sure your script-tag in your index.html is set to src="resources/sap-ui-core.js"
Related:
What is the meaning of 'controlAggregation' in the SAPUI5 routing configuration?
Routing Configuration Documentation
ResponsiveSplitter sample
My configuration:
// App.view.xml
<l:ResponsiveSplitter>
<l:PaneContainer id="idAppControl">
</l:PaneContainer>
</l:ResponsiveSplitter>
// Master/Detail.view.xml
<l:SplitPane>
<Panel headerText="some text"></Panel>
</l:SplitPane>
// manifest.json
"routing": {
"config": {
"routerClass": "sap.m.routing.Router",
"viewType": "XML",
"viewPath": "mynamespace.view",
"controlId": "idAppControl",
"bypassed": {
"target": [
"master",
"notFound"
]
},
"async": true
},
"routes": [
{
"pattern": "/:?query:",
"name": "master",
"target": [
"master"
]
},
{
"pattern": "ControlSet/{objectId}",
"name": "entity",
"target": [
"master",
"object"
]
}
],
"targets": {
"master": {
"viewName": "Master",
"viewId": "master",
"controlAggregation": "panes"
},
"object": {
"viewName": "Detail",
"viewId": "detail",
"controlAggregation": "panes"
},
"notFound": {
"viewName": "NotFound",
"viewId": "notFound",
"controlAggregation": "panes"
}
}
}
The aggregation relationship of ResponsiveSplitter is:
ResponsiveSplitter -> rootPaneContainer(Aggregations) -> PaneContainer -> panes(Aggregations) -> SplitPane
ResponsiveSplitter -> PaneContainer (one to one relationship)
PaneContainer -> SplitPane (one to many relationship)
But I get an error:
Error: "Element sap.ui.layout.SplitPane#__pane0" is not valid for aggregation "content" of Element sap.ui.core.mvc.XMLView#application-Monitor-display-component---master
Thanks to #Erch's suggestions, I use FlexibleColumnLayout instead, route config:
"routing": {
"config": {
"routerClass": "sap.f.routing.Router",
"viewType": "XML",
"viewPath": "monitor.view",
"controlId": "fcl",
"transition": "slide",
"bypassed": {
},
"async": true
},
"routes": [
{
"pattern": ":layout:",
"name": "master",
"target": [
"master",
"detail"
]
},
{
"pattern": "detail/{objectId}/{layout}",
"name": "detail",
"target": [
"master",
"detail"
]
}
],
"targets": {
"master": {
"viewName": "Master",
"controlAggregation": "beginColumnPages"
},
"detail": {
"viewName": "Detail",
"controlAggregation": "midColumnPages"
}
}
}
I created a project, and a home screen is a masterpages, a first screen is authentication and does not require sidebar
manifest.json:
{
"_version": "1.1.0",
"start_url": "index.html",
"sap.app": {
"_version": "1.2.0",
"id": "generate.app",
"type": "application",
"i18n": "i18n/i18n.properties",
"title": "{{appTitle}}",
"description": "{{appDescription}}",
"applicationVersion": {
"version": "1.0.0"
},
"ach": "ach",
"resources": "resources.json",
"dataSources": {
"main": {
"uri": "/here/goes/your/serviceurl/",
"type": "OData",
"settings": {
"defaultUpdateMethod": "PUT",
"odataVersion": "2.0",
"localUri": "localService/metadata.xml"
}
}
},
"sourceTemplate": {
"id": "sap.ui.ui5-template-plugin.2masterdetail",
"version": "1.32.5"
},
"crossNavigation": {
"inbounds": {}
}
},
"sap.ui": {
"_version": "1.2.0",
"technology": "UI5",
"icons": {
"icon": "sap-icon://detail-view",
"favIcon": "",
"phone": "",
"phone#2": "",
"tablet": "",
"tablet#2": ""
},
"deviceTypes": {
"desktop": true,
"tablet": true,
"phone": true
},
"supportedThemes": []
},
"sap.ui5": {
"_version": "1.1.0",
"rootView": {
"viewName": "generated.app.view.App",
"type": "XML",
"id": "app"
},
"dependencies": {
"minUI5Version": "1.32.0",
"libs": {
"sap.ui.core": {},
"sap.m": {}
}
},
"contentDensities": {
"compact": true,
"cozy": true
},
"models": {
"i18n": {
"type": "sap.ui.model.resource.ResourceModel",
"uri": "i18n/i18n.properties"
},
"": {
"dataSource": "main",
"type": "sap.ui.model.odata.v2.ODataModel",
"settings": {
"loadMetadataAsync": false,
"json": true,
"bJSON": true,
"defaultBindingMode": "TwoWay",
"useBatch": true,
"refreshAfterChange": false,
"disableHeadRequestForToken": true
}
}
},
"routing": {
"config": {
"routerClass": "sap.m.routing.Router",
"viewType": "XML",
"viewPath": "generated.app.view",
"controlId": "idAppControl",
"controlAggregation": "detailPages",
"bypassed": {
"target": ["login"]
}
},
"routes": [{
"pattern": "login",
"name": "login",
"target": ["login"]
}, {
"pattern": "tiles",
"name": "tiles",
"target": ["tiles"]
}, {
"name": "listainvestimento",
"pattern": "listainvestimento",
"titleTarget": "",
"greedy": false,
"target": ["detalheinvestimento", "listainvestimento"]
}, {
"name": "detalheinvestimento",
"pattern": "listainvestimento/detalheinvestimento",
"titleTarget": "",
"greedy": false,
"target": ["listainvestimento", "detalheinvestimento"]
}, {
"pattern": "listacontrato",
"name": "listacontrato",
"target": ["detalhecontrato", "listacontrato"]
}, {
"pattern": "listacontrato/detalhecontrato/:context:",
"name": "detalhecontrato",
"target": ["listacontrato", "detalhecontrato"]
}],
"targets": {
"login": {
"controlAggregation": "detailPages",
"viewName": "login",
"viewId": "login",
"viewLevel": 1
},
"tiles": {
"controlAggregation": "detailPages",
"viewName": "tiles",
"viewId": "tiles",
"viewLevel": 1
},
"listainvestimento": {
"controlAggregation": "masterPages",
"viewName": "listainvestimento",
"viewId": "listainvestimento",
"viewLevel": 1
},
"listacontrato": {
"controlAggregation": "masterPages",
"viewName": "listacontrato",
"viewId": "listacontrato",
"viewLevel": 1
},
"novoinvestimento": {
"controlAggregation": "detailPages",
"viewName": "novoinvestimento",
"viewId": "novoinvestimento",
"viewLevel": 2
},
"detalheinvestimento": {
"controlAggregation": "detailPages",
"viewName": "detalheinvestimento",
"viewId": "detalheinvestimento",
"viewLevel": 2
},
"detalhecontrato": {
"controlAggregation": "detailPages",
"viewName": "detalhecontrato",
"viewId": "detalhecontrato",
"viewLevel": 2
},
"novocontrato": {
"controlAggregation": "detailPages",
"viewName": "novocontrato",
"viewId": "novocontrato",
"viewLevel": 2
}
}
}
},
"sap.fiori": {
"_version": "1.1.0",
"registrationIds": [],
"archeType": "transactional"
}
}
In the control of the login page, I have this code:
try{
sap.ui.getCore().byId("App").setMode(sap.m.SplitAppMode.HideMode);
}
catch(e){
}
but the sap.ui.getCore().byId("App") = undefined
Add: "fullWidth": true
to "sap.ui":
"sap.ui": {
"technology": "UI5",
"icons": {
"icon": "sap-icon://detail-view",
"favIcon": "",
"phone": "",
"phone#2": "",
"tablet": "",
"tablet#2": ""
},
"deviceTypes": {
"desktop": true,
"tablet": true,
"phone": true
},
"supportedThemes": ["sap_belize", "sap_hcb", "sap_bluecrystal"],
"fullWidth": true
},
Please try this code in your login page controller onInit:
this.getOwnerComponent().getAggregation("rootControl").byId("idAppControl")
In the routing configuration i can see the app id as idAppControl , so try sap.ui.getCore().byId("idAppControl");
deploying my application on Fiori launchpad I found the following errors on the console:
Error in application dependency 'sap.ui.core': 'No descriptor was found'
Error in application dependency 'sap.m': 'No descriptor was found'
Error in application dependency 'sap.ui.layout': 'No descriptor was found'
In the manifest.json file , I declared the following dependencies:
"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"
}
}
},
I don't know what's the problem, could someone help me?
Thanks.
The full manifest.json is:
{
"_version": "1.3.0",
"sap.app": {
"_version": "1.3.0",
"id": "com.roberto",
"type": "application",
"i18n": "i18n/i18n.properties",
"applicationVersion": {
"version": "1.0.0"
},
"title": "{{appTitle}}",
"description": "{{appDescription}}",
"sourceTemplate": {
"id": "ui5template.basicSAPUI5ApplicationProject",
"version": "1.38.11"
}
},
"sap.ui": {
"_version": "1.3.0",
"technology": "UI5",
"deviceTypes": {
"desktop": true,
"tablet": true,
"phone": true
},
"supportedThemes": [
"sap_bluecrystal"
]
},
"sap.ui5": {
"_version": "1.2.0",
"rootView": {
"viewName": "com.roberto.view.CollectionBoard",
"type": "XML"
},
"dependencies": {
"minUI5Version": "1.34.0",
"libs": {
"sap.ui.core": {},
"sap.m": {},
"sap.ui.layout": {}
}
},
"contentDensities": {
"compact": false,
"cozy": true
},
"models": {
"i18n": {
"type": "sap.ui.model.resource.ResourceModel",
"settings": {
"bundleName": "com.roberto.i18n.i18n"
}
},
"CollectionTree": {
"type": "sap.ui.model.json.JSONModel",
"uri": "model/prdt_collections_tree.json"
}
},
"resources": {
"css": [
{
"uri": "css/custom.css"
}
]
},
"routing": {
"config": {
"routerClass": "sap.m.routing.Router",
"viewType": "XML",
"viewPath": "com.roberto.view",
"controlId": "collboard",
"controlAggregation": "pages",
"bypassed": {
"target": "notFound"
}
},
"routes": [
{
"pattern": "",
"name": "collections",
"target": "TargetCollections"
},
{
"pattern": "detail/{collectionPath}",
"name": "RouteDetails",
"target": "TargetDetails"
},
{
"pattern": "AddCollection",
"name": "RouteAdd",
"target": "TargetAdd"
}
],
"targets": {
"TargetCollections": {
"viewName": "CollectionBoard",
"viewType": "XML",
"viewLevel": 1
},
"TargetDetails": {
"viewName": "CollectionDetails",
"viewType": "XML",
"viewLevel": 2
},
"TargetAdd": {
"viewName": "AddCollection",
"viewType": "XML",
"viewLevel": 2
},
"notFound": {
"viewName": "NotFound",
"transition": "show"
}
}
}
},
"sap.platform.hcp": {
"uri": "webapp",
"_version": "1.1.0"
}
}
Did you include the following somewhere above what you wrote?
"sap.ui": {
"_version": "1.3.0",
"technology": "UI5",
"deviceTypes": {
"desktop": true,
"tablet": true,
"phone": true
},
"supportedThemes": [
"sap_bluecrystal"
]