How to implement the Multi Flow template?
The SAPUI5 / OpenUI5 documentation under "Application Notes - Preparation" mentions the Multi Flow Pattern. ( https://openui5.hana.ondemand.com/#docs/guide/f377376842914da7a6716192ecffc9d0.html is almost at the bottom)
I need to implement this pattern, but have no idea how.
- Do I need to replace the "root view" parameter?
- Or do I need to replace the App in App.view.xml? And how would I do it?
- Or do I need to navigate to the view using the splitApp control? So, placing a splitApp inside an App control? Can I then configure routes in the router? And how am I going to continue about this?
I am currently following the implementation as shown in Best Practices, so I am using component and router views and xml for my application.
I would appreciate any help or signposts in the right direction. Thank you in advance! (And, yes, I've Google a lot, alas, complex examples are rare and hard to find. Nonetheless.)
Byebye, Cleo
source to share
to implement it you need an app and a split container inside it.
I made a simple sample with a full screen page and wizard / detail + buttons to navigate
http://jsbin.com/fikocuxiloha/3/
Regards
source to share
So after a few days of wading through and pushing in the right direction from @TobiasOetzel I came up with this solution. It is based on tdg example and uses router in component and xml views.
component:
rootView : "my.ui5.multiflow.view.App",
[...]
routes : [
{
pattern : "",
name : "_index",
view : "Main",
targetAggregation: "pages",
targetControl : "idAppControl",
},
{
pattern : "foo",
name : "_foo",
view : "SplitContainer",
targetAggregation : "pages",
targetControl : "idAppControl",
subroutes : [
{
pattern : "foo",
name : "foo_sub1",
view : "Master",
targetAggregation : "masterPages",
targetControl : "idSplitContainerControl",
subroutes : [
{
pattern : "foo",
name : "foo_sub2",
view : "Detail",
targetAggregation : "detailPages",
},
{
pattern : "foo/foo/:all*:",
name : "foo_sub3",
view : "Detail2",
targetAggregation : "detailPages",
}]
}]
}]
App.view looks like this:
<mvc:View
xmlns:mvc="sap.ui.core.mvc"
displayBlock="true"
xmlns="sap.m">
<App id="idAppControl" />
</mvc:View>
SplitContainer.view looks like this:
I had to give it the height, as otherwise the content would be hidden. The default height is 100%, but doesn't seem to help display / show it. (The same behavior by the way with the tile container in the icon tab bar.) But this is another problem that I will resolve at another time.
<mvc:View
xmlns:mvc="sap.ui.core.mvc"
displayBlock="true"
xmlns="sap.m">
<SplitContainer
id="idSplitContainerControl"
height="500px"
/>
</mvc:View>
So what should I do with these routes: When the application is first called, the App control gets an instance ("idAppControl"). The "Main" view is placed in the "page" aggregation in the application.
When navigating to myApp.html # / foo / three, the following happens:
- the SplitContainer view is loaded into the page aggregation of the App control. We now have something that looks like a relaxed application.
- the "Master" view is loaded into the "masterPages" section aggregation from 1.
- the "Detail" view is loaded into the "detailPages" aggregation of the dividing container from 1.
The view for the route "foo_sub3" can be loaded by navigating with this.getRouter (). navTo ("foo_sub3") or with myApp.html # / foo / foo / or myApp.html # / foo / foo / somethingElse
Http://scn.sap.com/community/developer-center/front-end/blog/2014/02/17/nested-ui-routing-in-openui5 was very helpful , although I haven't used any of his suggested changes ...
And SDK samples in openui5-sdk-1.22.10 \ test-resources \ sap \ ui \ core \ samples \ routing
Any corrections and / or suggestions for improvement are welcome.
source to share
Nice one @TobiasOetzel :-)
I changed the navigation so that it moves back instead of forward, from full screen back to main detail
fullscreen = new sap.m.Page({
title : "fullscreen",
content : new sap.m.Button({
text : "to master detail",
press : function () {
app.back() // modified line
}
})
});
source to share