Navigate between single full view and split view
Hi,
After you’ve generated your custom fiori application by using the SAPWebIDE you’ll have a split view which contains a master and detail view. If you haven’t generated your application, follow previous tutorial:
Generate your custom Fiori application with SAPWebIDE On-Premise using Gateway On-Premise
The SAPWebIDE will have generated something like this. A container “App.js” which will contain your master en detail views and master view and detail view:
Great that you can generate a splitview! But what if you want another view before the split view? What if you want a login view? Or a tile container?
In this tutorial I’ll explain you how to achieve this. First start by creating a new view which we’ll use as a tile container. So you’ll have something like this:
We have a single full view and a split view with the master and detail view. Now we’ll need something to connect the single fulle view and the splitview. Therefore we add a new view which will act as a container for single views. We’ll place it on top of the single full view and the splitview. It will contain the “sap.m.App” component. This will enable us to connect the single full view with the splitview.
We’ll use the “masterApp” to embed the single full view and the splitview. The splitview will embed the master and detail view. For the real connection we’ll need to configure the router component in the “component.js”.
To see how, just follow this tutorial:
In the next tutorial we’ll see how to organize your project before it is getting too big!
Kind regards,
Wouter
Interesting tutorial! There's indeed a gap in UI5 when you want to have fullscreen and splitscreen pages within one application (well, no gap as in "can't do this" - your tutorial proves one can do - , but as in "not supported very easily"). And in fact this gap is supposedly being addressed soon. Not sure yet what the result will be, but think of something like a "SuperApp" that can have master pages, detail pages and fullscreen pages and you can navigate freely between them. Internally it might work just like you described it: an App as master and a SplitApp for the splitscreen pages. 🙂
Thanks for the feedback! Already looking forward to test the "SuperApp" 🙂
Really great Video. Thanks. Nice to have in the SuperApp would be also an integrated expand/collapse button for the master view in landscape mode. Actually I'm resizing the width of the Master Sidebar on-demand 😉 .
Hi,
thanks for the tutorial.
I extended the example application from the Developer Guidelines with your code and I have one final question. When using the back button after switching to the split view, I'm not getting back to the overview.
I wonder how your App.view.xml and controller look like. Is there a function to manage the navigation back to the overview?
Or is it conflicting with MyRouter.js of that example?
Kind regards,
Michael
Hi Michael,
You could use the name of your route to navigate back:
sap.ui.core.UIComponent.getRouterFor(this).navTo("route name",{});
or just go back like this:
window.history.go(-1);
--> this has the disadvantage that when the master/detail page is your first page. This command wil trigger a go back on browser level
To overcome this disadvantage you could use the myNavBack in the MyRouter.js
Tha app.view.xml is generated in the previous tutorial:
Generate your custom Fiori application with SAPWebIDE On-Premise using Gateway On-Premise
It's almost empty 🙂
<mvc:View
xmlns:mvc="sap.ui.core.mvc"
displayBlock="true"
xmlns="sap.m">
<SplitApp id="idAppControl" />
</mvc:View>
Kind regards,
Wouter
Hi Wouter,
Thanks for sharing this interesting how-to blog and I want to share one thing with you that it caused me half day to find the solution.
In your demo, "TileContainer" in overview.view.xml didn't specify height, I know its default value is 100% if you don't specify particular value. But, it caused problem in my local WebIDE environment, tile just not shown on the screen if I didn't give value to height property in TileContainer. I use Chrome (version 40.0.2214.111 m) as well, don't know why this problem happen in my laptop. Thanks.
This is an excellent blog.
Does anyone know if the same thing can be accomplished using scaffolding? I understand the master and detail being subroutes, but in scaffolding you define fullScreenPageRoutes, masterPageRoutes, and detailPageRoutes. Navigation from fullscreen to master/detail doesn't seem to work...
Yes we can do. I did from full screen to split screen and then to full screen.
Can you post an example of your Component.js?
Here is an example for routes:
Index.html should launch App(which is a full screen) with id idMainAppControl, then the master and details is added through SplitContainer control with id idSplitContainerControl.
routes: [{
pattern: "",
name: "_launch",
view: "Launch",
targetAggregation: "pages",
targetControl: "idMainAppControl",
}, {
pattern: "splitapp",
name: "_splitapp",
view: "SplitApp",
targetAggregation: "pages",
targetControl: "idMainAppControl",
subroutes: [{
pattern: "splitapp",
name: "_S1",
view: "Master",
targetAggregation: "masterPages",
targetControl: "idSplitContainerControl",
subroutes: [{
pattern: "splitapp/{index}",
name: "_S2",
view: "Detail",
targetAggregation: "detailPages",
},{
pattern: "splitapp/{index}/line/{lineIndex}",
name: "_S3",
view: "LineItem",
targetAggregation: "detailPages",
}
}]
}, {
pattern: "fullscreen",
name: "_S4",
view: "FullScreen",
targetAggregation: "pages",
targetControl: "idMainAppControl",
}, {
pattern: "newline/{index}",
name: "_S5",
view: "NewLineItem",
targetAggregation: "pages",
targetControl: "idMainAppControl",
}]
Here a StackOverflow answer, which could help you http://stackoverflow.com/questions/29348478/sapui5-routing-control-with-id-idappcontrol-could-not-be-found/29363472#29363472
Hi Mike,
Were you able to achieve full-screen - master -detail in scaffolding? If yes, please share.
This is an excellent blog. Thanks.
I m looking for a routing sample from MD to Full Screen.Can you pls help me ?
See the following thread:
How to implement the Multi Flow pattern MD to FullScreen?
Hi,
Thank you for your valuable post. i have implemented the same it is working for me. But now there is a new concept called targets in routing. i want to implement the same application with the help of targets. can you please help me in this. i was able to create full screen to full screen and Master detail page with the help of targets. but when i come to integrate both as you did above with the help of targets, i could not. Still facing problem with that. I need help in that.
Regards,
Saran
Hi,
I am using the master list page as my main page. In the master list page , i put one button to switch to grid view(Full screen view). So what code i need to write in my App.view.js
This is my code
-------------code starts--------
createContent: function (oController) {
// to avoid scroll bars on desktop the root view must be set to block display
this.setDisplayBlock(true);
// create app
this.app = new sap.m.SplitApp();
// load the master page
var master = sap.ui.xmlview("Master", "sap.ui.demo.myFiori.view.Master");
master.getController().nav = this.getController();
this.app.addPage(master, true);
// load the empty page
var empty = sap.ui.xmlview("Empty", "sap.ui.demo.myFiori.view.Empty");
this.app.addPage(empty, false);
return this.app;
}
-------------code ends--------
Thank you,
JK
Hmm as far as I can see you are not using the routing component or am I wrong? This is a total different approach. Maybe you should start a discussion and add some more information.
Kind regards,
Wouter
Hi, i have created the separate thread few days back reg this question. you can refer that.
How to Switch to Full screen view from master detail view
Hi Wouter,
Can you please provide a source code for this example? Or can you explain me how to make application with structure like this: Login page -> Registration page (if user is not registered) -> Tiles menu page -> a number of pages for every tile (master detail or just one view pages). Is this possible and what is the root container that goes in index.html.
Thank you in advance.
added an example project. You have to delete the .txt extension
Thank you Wouter,
It's very useful example and I appreciate it, but can you add the project from this post - Navigation between single full view and master detail view?
I also post a question regarding complex structure applications and maybe you could help me with it:
How to structure complex application
Best regards,
Vladimir
I kinda lost the original project, but this example is comparable. It also contains navigation from single view to splitview.
Kind regards,
Wouter
Hi wouter,
Thanks for the tutorial. I tried the same in web ide, but I am not able to navigate to master detail view. Master view is getting loaded but Detail view is not appearing. Its blank. Could you please help me. My routing Code:
----------------------------------------------------------------------------------------------------------------------------
"routing": {
"config": {
"routerClass": "sap.m.routing.Router",
"viewType": "XML",
"viewPath": "myCompany.myApp.view",
"controlId": "app",
"controlAggregation": "pages",
"clearTarget": false,
"transition": "flip"
},
"routes": [{
"pattern": "",
"name": "worklist",
"target": "worklist",
"controlId": "app"
}, {
"pattern": "Products/{objectId}",
"name": "object",
"target": "object"
}, {
"pattern": "split",
"name": "split",
"view": "SplitContainer",
"controlId": "app",
"subroutes": [{
"pattern": "split",
"name": "master",
"view": "Master",
"controlId": "idSplitAppControl",
"controlAggregation": "masterPages",
"subroutes": [{
"pattern": "Detail/{objectId}",
"name": "detail",
"view": "Detail",
"controlAggregation": "detailPages"
}]
}]
}],
"targets": {
"worklist": {
"viewName": "Worklist",
"viewId": "worklist",
"viewLevel": 1
},
"object": {
"viewName": "Object",
"viewId": "object",
"viewLevel": 2
}
}
---------------------------------------------------------------------------------------------------------------------------
Error:
Hi Betty,
Hope you doing good.
Did you find the solution for that.
Im working on same scenrio like created fiori master detail template with WEBIDE and now have to navigate from full screen to master detail screen.
Thanks,
Prasad Doddi
Hi Prasad,
Did you manage to resolve the issue in navigation?
Regards,
Anand