cancel
Showing results for 
Search instead for 
Did you mean: 

Not able to add pages in a split app using SAPUI5 framework on Eclipse Kepler

Former Member
0 Kudos

Dear All,

I am doing some basic development on SAPUI5 framework using Eclipse Kepler.

Problem Statement:

In the below code, I am trying to create a Split App wherein I have Master pages and Detail pages.

But somehow after running the application on Apache server or Web App Preview in Eclipse,

the statement  " alert(oSplitApp.addMasterPage(oMasterPage1).addMasterPage(oMasterPage2)); " did not execute and consequently I did not get the output !

Note:

I have added few alerts to track/debug the issue where i found that alert("3"); did not come as its is after the addMasterPage statement.

* Please review my code and share your views or experiences on the same.

Code:-

index.html

......

<!DOCTYPE HTML>

<html>

  <head>

  <meta http-equiv="X-UA-Compatible" content="IE=edge">

  <meta http-equiv='Content-Type' content='text/html;charset=UTF-8'/>

   

  <script src="resources/sap-ui-core.js"

  id="sap-ui-bootstrap"

  data-sap-ui-libs="sap.m"

  data-sap-ui-theme="sap_bluecrystal">

  </script>

  <!-- only load the mobile lib "sap.m" and the "sap_mvi" theme -->

<script>

  alert("0");  //  This alert comes.. so we can move ahead ..

  var oSplitApp = new sap.m.SplitApp("mySplitApp", {});

  var oDetailPage1 = new sap.m.Page("detail1", {

   title : "Detail 1",

   content : [ new sap.m.Label({

     text : "this is Detail 1"

   }) ]

  });

  var oDetailPage2 = new sap.m.Page("detail2", {

   title : "Detail 2",

   content : [ new sap.m.Label({

     text : "this is Detail 2"

   })

  ]

  });

  var oMasterPage1 = new sap.m.Page("master1",{

    title : "Master",

    content : [ new sap.m.List({

  items : [ new sap.m.StandardListItem({

  title : "To Master 2",

  type : "Navigation",

  tap : function() {

  oSplitApp.toMaster("master2");

  }

  })]

  }) ]

  });

  var oMasterPage2 = new sap.m.Page("master2",{

   title : "Master2",

   navButtonTap : function() {oSplitApp.backMaster();},

   content : [ new sap.m.List({

     mode:"SingleSelectMaster",

  select: function(oEv) {

  if(oEv.getParameter("listItem").getId() == "listDetail2") {

       oSplitApp.toDetail("detail2");

     }

     else {

   oSplitApp.toDetail("detail1");

     }

   },

   items : [ new sap.m.StandardListItem("listDetail2",{

  title : "To Detail 2"

  }),

   new sap.m.StandardListItem("listDetail",{

     title : "To Detail 1"

   }) ]

  }) ]

  });

  alert("2");      //  alert 2 did appears , so great..

  //add the master pages to the splitapp control

  oSplitApp.addMasterPage(oMasterPage1).addMasterPage(oMasterPage2) ;  /// This does not execute...

alert("3");       // alert 3 did not come  . !!

  //add the detail pages to the splitapp control

  oSplitApp.addDetailPage(oDetailPage1).addDetailPage(oDetailPage2);

  oSplitApp.setInitialDetail("detail1");

  oSplitApp.setInitialMaster("master1");

  oSplitApp.setDefaultTransitionNameDetail("fade");

  oSplitApp.placeAt("content");

  oSplitApp.setMode("PopoverMode");

  </script>

</head>

  <body class="sapUiBody" role="application">

  <div id="content"></div>

  </body>

</html>

.......

Thanks and Regards,

Anshul Arora

Accepted Solutions (1)

Accepted Solutions (1)

ChandraMahajan
Active Contributor
0 Kudos

Hi Anshul,

I do not see any error in above code. I just recreated this example on JS Bin and did not find any error.

I am getting all alerts as well. you can check at JS Bin - Collaborative JavaScript Debugging

Regards,

Chandra

Former Member
0 Kudos

Hi Chandrashekhar,

You are right. Actually the Eclipse run does not show me master/detail pages and does not allow the alerts. Is there any issue with Eclipse ?

Because when I tried in Google Chrome it worked.

And the JS Bin link also helped.

Thanks a lot.

Cheers,

Anshul Arora

ChandraMahajan
Active Contributor
0 Kudos

Hi Anshul,

Yes I recreated this example and tried to run in eclipse but was not able to see any output. yes seems to be issue with eclipse but not sure on exact reason. but it is always better to run the application on chrome browser as it has great tool Developer console(F12) which helps us to troubleshoot problems.

Regards,

Chandra

Former Member
0 Kudos

Hi Chandrashekhar,

I have another query.

Given Information description :

I can create a SAPUI mobile app project using SAPUI5 framework in eclipse.

As all the development in SAPUI5 is web based such as HTML, JS, CSS .

We can package it and import in an Android native app project in Android SDK/ADT that is deployed as standalone app in the device.

SAPUI5 mobile application can be deployed on variety of servers such as SAP Netweaver ABAP server / SAP NW Java Server / 3rd party Java Application Server.

Queries :

We create solutions on SAP MII product that runs on SAP Netweaver.

We can developed many pages(.irpt ) , charts and dashboards as a part of manufacturing integration and intelligent solutions on SAP MII.

Query1:

If I want to bring those developed pages that work on desktop browser on Mobile Device, Will SAPUI5 be of any help ?

Query2:

Secondly,

SAPUI5 mobile application can be deployed on variety of servers such as SAP Netweaver ABAP server.

* Is SAP ABAP NW server is same as SAP Netweaver that we normally use as a platform for many SAP product like SAP ME / SAP MII ?

Query 3:

If it is same then Can we integrate SAP MII with SAPUI5 mobile application ? If yes then what is the way ?

Aim:

The ultimate aim is to bring our developed application on SAP MII  to mobile devices or we want to use SAP MII as an app on Mobile device.

I have researched that SAP APP builder, Phonegap, SAP Fiori, SMP are ways by which we can build mobile apps but I did not get integration of those app with SAP Product like SAP MII.

Thanks and Regards,

Anshul Arora

ChandraMahajan
Active Contributor
0 Kudos

Hi Anshul,

As I do not have much experience on SAP MII, i will share few links which might help you in getting your answers.

Regards,

Chandra

Answers (1)

Answers (1)

Former Member
0 Kudos

This is my component.js file

when i using subrouters for detailPage it give me error like that "Control with ID splitApp could not be found - EventProvider sap.ui.core.routing.Target "


how can i resolve this

jQuery.sap.declare("sap.demo.timeCart.Component");

sap.ui.core.UIComponent.extend("sap.demo.timeCart.Component",{

   

    metadata: {

        routing: {

            config: {

                viewType: "XML",

                viewPath: "timecart",

                targetControl: "splitApp",

                clearTarget: false,

                transition: "slide"

            },

           

            routes: [

                {    pattern: "",

                    name: "default",

                    view: "Category",

                    targetAggregation: "masterPages",

                    subroutes: [

                       {

                           pattern: "",

                           name: "welcome",

                           view: "Welcome",

                           targetAggregation : "detailPages"

                       }

                    ]

                }

            ]

           

        }

    },

   

    init: function() {

       

        jQuery.sap.require("sap.m.routing.RouteMatchedHandler");

        jQuery.sap.require("sap.ui.core.routing.HashChanger");

       

       

        //call createContent

        sap.ui.core.UIComponent.prototype.init.apply(this, arguments);

       

        this._router = this.getRouter();

       

        //initlialize the router

        this._routeHandler = new sap.m.routing.RouteMatchedHandler(this._router);

        this._router.initialize();

       

       

    },

   

    createContent: function() {

       

        var oView = sap.ui.view({

            id: "app",

            viewName: "timecart.App",

            type: "XML",

            viewData: {component: this}

        });

       

        var oModel = new sap.ui.model.json.JSONModel('mockdata/products.json');

        oView.setModel(oModel,'products');

       

        var data = {

               

                items: []

               

        }

       

        var oCartModel = new sap.ui.model.json.JSONModel(data);

        oView.setModel(oCartModel,'cart');

       

        return oView;

       

    }

   

})