Welcome to the ultimate SAP UI5, BTP, Fiori, CAPM, RAP, ABAP blog! Explore comprehensive tutorials, interview questions, and real-world examples to master SAP development. Elevate your skills in creating stunning UI5 apps, harnessing the power of BTP, and building Fiori applications. Unlock the potential of CAPM, RAP, and ABAP, and learn to integrate seamlessly with the enterprise portal. Whether you're a beginner or an experienced developer, this blog is your go-to resource for SAP expertise!
Routing in Split Application
Here, we will implement routing in a Split screen application. The scenario
is, there would be 3 Pages, one is the master Page and other two are the detail
Pages and we will show navigation to one detail page to another through the
click of a list Item on the first detail page.
Routing in general and within a full screen Application
Routing Within Split Application
Follow these simple steps:
1.Create a SAPUI5 Project, name it accordingly.
Here, I have named it as Splitapp_routing
Create 4 views and controllers.
·App.view.js and App.controller.js
·masterpage.view.js and
masterpage.controller.js.
·detailpage.view.js and detailpage.controller.js
·detailpage1.view.js and
detailpage1.controller.js
I have defined routes in the Component.js
this time unlike my last post, where I have defined the routes in index.html.
var router = this.getRouter(); this.routeHandler = new sap.m.routing.RouteMatchedHandler(router); router.register("appRouter"); // Assign a name to Router, so that we can access it in all controllers by using this name router.initialize(); // Initialise the Router
},
} );
com.Spiltapp_routing.Component.prototype.createContent = function(){ debugger; var oview = sap.ui.view({id:"app",viewName:"com.Spiltapp_routing.spiltapp_routing.App",type:"JS",viewData:{ component:this }}); var oModel = new sap.ui.model.json.JSONModel("model/detail.json"); oview.setModel(oModel); return oview; };
Here, in the Json, I have used many .png
and .jpg images, you can use your own images.
Output
Hope, it helped. Do comment in the comment section
if you liked this tutorial.
This is dummy text. It is not meant to be read. Accordingly, it is difficult to figure out when to end it. But then, this is dummy text. It is not meant to be read. Period.
I change some names in controllers and views, but I can not make it work: /, if you have a little time, you could help me please, I would appreciate it a lot
I have the next error : library-preload.js:522 Uncaught Error: failed to load 'view/App.view.js' from ../../resources/view/App.view.js: 404 - Not Found(…)
Hello, I am trying to use split app. But when I use the mobile view I get detail page first. I want master page to be displayed when I open the application on mobile view. Could you please help me with this asap?
We need your help to support www.sapui5tutors.com. Please consider disabling your ad blocker while visiting this website so that we can continue to provide this content to you free of charge.
For details on turning off your ad blocker, or to add www.sapui5tutors.com to your whitelist, please read these
instructions
10 comments
Click here for commentsHi. Good post
ReplyCould you please include Componenet.js file in this thread
Sorry I missed it. Now I have updated it. Check it now.
ReplyHi, Could you upload the code please, I would appreciate it very much :)
ReplyI change some names in controllers and views, but I can not make it work: /, if you have a little time, you could help me please, I would appreciate it a lot
ReplyI have the next error :
library-preload.js:522 Uncaught Error: failed to load 'view/App.view.js' from ../../resources/view/App.view.js: 404 - Not Found(…)
My app view exists.
Hi, send me your demo project to sapui5tutors@gmail.com
ReplyI will check what is the error that you are facing.
Thank you. I send the project to your email from franciscobarra.sep@gmail.com
ReplyHi, Sorry for the inconvenience, but have you been able to see my code by accident?
ReplyRegards
Their is a Spelling error in Component.js because of which "404 Not found" or "failed to load" is coming.
Reply(between split and split.)
Given one :-
metadata : {
rootView : "com.Spiltapp_routing.splitapp_routing.App",
routing : {
correctone:-
metadata : {
rootView : "com.Spiltapp_routing.spiltapp_routing.App",
routing : {
Hello, I am trying to use split app. But when I use the mobile view I get detail page first. I want master page to be displayed when I open the application on mobile view. Could you please help me with this asap?
ReplyHow to add search functionality in master page if we use js view
ReplyConversionConversion EmoticonEmoticon