Routing in Web IDE to switch between XML views

[marcin_czarny_nype]

Hi Experts,

I created Full Screen application in SAP Web IDE. By default, this is the application which has table with some data (from my own service) on the first screen (Master.view.xml). What's important this is navigation table, so if you click on the item, will be shown next screen (Full Screen) with details of this item (Details.view.xml).

Now, I want to add the button on first screen (Master.view.xml), which will go to the next screen - in my example new view called DayView.view.xml.

When I'm trying modify my routing in Component.js like below:

  routing : {
            // The default values for routes
            config : {
                "viewType" : "XML",
                "viewPath" : "Rbs1.view",
                "targetControl" : "fioriContent", // This is the control in which new views are placed
                "targetAggregation" : "pages", // This is the aggregation in which the new views will be placed
                "clearTarget" : false
            },
  routes : [
  {
  pattern : "",
  name : "main",
  view : "Master" 
  },
  {
  name : "details",
  view : "Details",
  pattern : "{entity}"
  },

    {
        name : "DayView",
        view : "DayView",
        pattern : "InDayView"
    }
    ]
        }
    },

After pressing the "Go to DayView" navigate me to a page that looks like Details.view.xml

In turn when I'm trying modify my routing in Component.js like below:

      routing : {
            // The default values for routes
            config : {
                "viewType" : "XML",
                "viewPath" : "Rbs1.view",
                "targetControl" : "fioriContent", // This is the control in which new views are placed
                "targetAggregation" : "pages", // This is the aggregation in which the new views will be placed
                "clearTarget" : false
            },
  routes : [
  {
  pattern : "",
  name : "main",
  view : "Master"
  ,
  subroutes : [
    {

    pattern: "DayView",
    view: "DayView",
    name: "DayView"
    }
    ]
  },
  {
  name : "details",
  view : "Details",
  pattern : "{entity}"
  }

    ]
        }
    },

the screen does not change and in console I have error like this:

Control with ID fioriContent could not be found - EventProvider sap.ui.core.routing.Target

I read many blogs and articles like:

1) Use case: Navigating to the custom view from

2) https://sapui5.netweaver.ondemand.com/sdk/#docs/guide/688f36bd758e4ce2b4e682eef4dc794e.html

3) http://scn.sap.com/community/developer-center/front-end/blog/2015/02/16/navigation-between-views-usi...

4) http://scn.sap.com/community/developer-center/front-end/blog/2014/05/04/get-started-with-sapui5-and-...

but they relate to navigate by selecting LineItem from Navigation Table.

I attached my project files.

https://dl.dropboxusercontent.com/u/54036986/%21NYPE/Rbs1.zip

Can You help me with my problem?

[Former Member]

Hi

Component.js

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;

    }

})

when i defind subrouters it not working and give me error like "Control with ID splitApp could not be found - EventProvider sap.ui.core.routing.Target "

Category.controller.js

	categoryListItemPress: function(evt) {
	var router = sap.ui.core.UIComponent.getRouterFor(this);
	var context = evt.getSource().getBindingContext('products');
	console.log(context)
	}
context value got undefinded

[b_deterd2]

Same problem in my app. Anyone found a solution?

[michal_keidar]

can you see if you can help please?

[b_deterd2]

Hello All,

For me it is solved.

I removed the  "targetControl" : "fioriContent" from the config area of the routing and placed it in the main route. The subroute was now able to find the targetcontrol.

Regards,

Bert

[former_member215143]

Hello Bert,

I am also facing the similar issue,

Can you please let me know exactly what changes you made to the regarding the "targetControl" : "fioriContent" ,means where actually you have put your code changes.

Secondly, did you create a Subroute or continued with normal route?

Also i just want to confirm if the below code written by me in  my master view is correct:

// --- Create button press

  onCreateButtonPressed: function(oEvent) {

  this._oRouter.navTo("createamc", {

  from: "master",

  entity: oEvent.getSource().getBindingContext().getPath().substr(),

  tab: null

  });

  },

I have a create button in my master page which should take me to my CreateAMC page. below is the route pattern.

Can you help on this ?

	routes: [{
						pattern: "",
						name: "main",
						view: "Master"
					},
				{
					name: "details",
					view: "Details",
					pattern: "{entity}"
				},
				{
					name: "createamc",
					view: "CreateAMC",
					pattern: "{entity}"
				}

]

[marcin_czarny_nype]

I would like to attach the most important fragments of code:

Component.js:

jQuery.sap.declare("Rbs1.Component");
jQuery.sap.require("sap.ui.core.UIComponent");
jQuery.sap.require("sap.ui.core.routing.History");
jQuery.sap.require("sap.m.routing.RouteMatchedHandler");


sap.ui.core.UIComponent.extend("Rbs1.Component", {
    metadata : {
        "name" : "Rbs1",
        "version" : "1.1.0-SNAPSHOT",
        "library" : "Rbs1",
        "includes" : [ "css/fullScreenStyles.css" ],
        "dependencies" : {
            "libs" : [ "sap.m", "sap.ui.layout" ],
            "components" : []
        },
  "config" : {
  resourceBundle : "i18n/messageBundle.properties",
  serviceConfig : {
  name: "",
  serviceUrl: ""
  }
  },
        routing : {
            // The default values for routes
            config : {
                "viewType" : "XML",
                "viewPath" : "Rbs1.view",
                "targetControl" : "fioriContent", // This is the control in which new views are placed
                "targetAggregation" : "pages", // This is the aggregation in which the new views will be placed
                "clearTarget" : false
            },
  routes : [
  {
  pattern : "",
  name : "main",
  view : "Master"
  ,
  subroutes : [
     {

     pattern: "DayView",
     view: "DayView",
     name: "DayView"
     }
     ]
  },
  {
  name : "details",
  view : "Details",
  pattern : "{entity}"
  }
/* ,

     {
         name : "DayView",
         view : "DayView",
         pattern : "InDayView"
     }*/
     ]
        }
    },


    /**
     * Initialize the application
     * 
     * @returns {sap.ui.core.Control} the content
     */
    createContent : function() {
        var oViewData = {
            component : this
        };


        return sap.ui.view({
            viewName : "Rbs1.view.Main",
            type : sap.ui.core.mvc.ViewType.XML,
            viewData : oViewData
        });
    },


    init : function() {
        // call super init (will call function "create content")
        sap.ui.core.UIComponent.prototype.init.apply(this, arguments);


        // always use absolute paths relative to our own component
        // (relative paths will fail if running in the Fiori Launchpad)
        var sRootPath = jQuery.sap.getModulePath("Rbs1");


        // The service URL for the oData model 
        var oServiceConfig = this.getMetadata().getConfig().serviceConfig;
        var sServiceUrl = oServiceConfig.serviceUrl;


        // the metadata is read to get the location of the i18n language files later
        var mConfig = this.getMetadata().getConfig();
        this._routeMatchedHandler = new sap.m.routing.RouteMatchedHandler(this.getRouter(), this._bRouterCloseDialogs);


        // create oData model
        this._initODataModel(sServiceUrl);


        // set i18n model
        var i18nModel = new sap.ui.model.resource.ResourceModel({
            bundleUrl : [ sRootPath, mConfig.resourceBundle ].join("/")
        });
        this.setModel(i18nModel, "i18n");


        // initialize router and navigate to the first page
        this.getRouter().initialize();


    },


    exit : function() {
        this._routeMatchedHandler.destroy();
    },


    // This method lets the app can decide if a navigation closes all open dialogs
    setRouterSetCloseDialogs : function(bCloseDialogs) {
        this._bRouterCloseDialogs = bCloseDialogs;
        if (this._routeMatchedHandler) {
            this._routeMatchedHandler.setCloseDialogs(bCloseDialogs);
        }
    },


    // creation and setup of the oData model
    _initODataModel : function(sServiceUrl) {
        jQuery.sap.require("Rbs1.util.messages");
        var oConfig = {
            metadataUrlParams : {},
            json : true,
            // loadMetadataAsync : true,
            defaultBindingMode :"TwoWay",
            defaultCountMode: "Inline",
            useBatch : true
        };
        var oModel = new sap.ui.model.odata.v2.ODataModel(sServiceUrl, oConfig);
        oModel.attachRequestFailed(null, Rbs1.util.messages.showErrorMessage);
        this.setModel(oModel);
    }
});

Master.controller.js

jQuery.sap.require("sap.ui.core.mvc.Controller");
jQuery.sap.require("sap.ca.ui.model.format.AmountFormat");
jQuery.sap.require("sap.m.TablePersoController");


sap.ui.core.mvc.Controller.extend("Rbs1.view.Master", {
  _oCatalog: null,
  _oResourceBundle: null,


  onInit: function() {
  this._oView = this.getView();
  var oItemTemplate = this.byId("columnListItem").clone();
  this._oComponent = sap.ui.component(sap.ui.core.Component.getOwnerIdFor(this._oView));
  this._oResourceBundle = this._oComponent.getModel("i18n").getResourceBundle();
  this._oRouter = this._oComponent.getRouter();
  this._oCatalog = this.byId("catalogTable");
  this._initViewPropertiesModel();
  },


  _initViewPropertiesModel: function() {
  var oViewElemProperties = {};
  oViewElemProperties.catalogTitleText = "Resources";
  if (sap.ui.Device.system.phone) {
  oViewElemProperties.availabilityColumnWidth = "80%";
  oViewElemProperties.pictureColumnWidth = "5rem";
  oViewElemProperties.btnColHeaderVisible = true;
  oViewElemProperties.searchFieldWidth = "100%";
  oViewElemProperties.catalogTitleVisible = false;

  this.byId("tableToolbar").removeContent(this.byId("toolbarSpacer"));
  } else {
  oViewElemProperties.availabilityColumnWidth = "18%";
  oViewElemProperties.pictureColumnWidth = "9%";
  oViewElemProperties.btnColHeaderVisible = false;
  oViewElemProperties.searchFieldWidth = "30%";
  oViewElemProperties.catalogTitleVisible = true;
  }
  this._oViewProperties = new sap.ui.model.json.JSONModel(oViewElemProperties);
  this._oView.setModel(this._oViewProperties, "viewProperties");
  },

  onNavBack: function() {
  window.history.go(-1);
  },


    onPressButton: function() {
        jQuery.sap.require("sap.m.MessageToast");
        sap.m.MessageToast.show("Pressed Test");

        this._oRouter.navTo("DayView");


        },

/*     onPressButton: function(oEvent) {
     var cPath = oEvent.getSource().getBindingContextPath().substr(1);
     this._oRouter.navTo("DayView", {from: "main", contextPath: cPath});
    }, */

// --- List Handling


  // Handler method for the table search.
  onSearchPressed: function() {
    var sValue = this.byId("searchField").getValue();
        var oFilter = new sap.ui.model.Filter("Name", 
  sap.ui.model.FilterOperator.Contains, sValue);
        var oBinding = this.byId("catalogTable").getBinding("items");
        oBinding.filter([oFilter]);
  },


  // --- Navigation
    onLineItemPressed: function(oEvent) {
    this._oRouter.navTo("details", {
    from: "main",
    entity: oEvent.getSource().getBindingContext().getPath().substr(1),
    tab: null
    });
    }


});

DayView.controller.js

Query.sap.require("sap.ca.ui.model.type.Date");
jQuery.sap.require("sap.ui.core.mvc.Controller");
jQuery.sap.require("sap.ca.ui.model.format.AmountFormat");


sap.ui.core.mvc.Controller.extend("Rbs1.view.DayView", {
  _oItemTemplate: null,
  _oNavigationTable: null,
  _sItemPath: "",
  _sNavigationPath: "",


  onInit: function() {
  this._oView = this.getView();
  this._oComponent = sap.ui.component(sap.ui.core.Component.getOwnerIdFor(this._oView));
  this._oRouter = this._oComponent.getRouter();
  this._oNavigationTable = this.byId("navigationTable");
  this._oItemTemplate = this.byId("navigationListItem").clone();




  // Get Context Path for Page 2 Screen
  this._oRouter.attachRoutePatternMatched(this._onRoutePatternMatched, this);
  },


  // Bind Review Table using oData Reviews Entity
  _bindNavigationTable: function(sURL) {
  this._oNavigationTable.bindItems({
  path: sURL,
  template: this._oItemTemplate
  });
  },


/* _onRoutePatternMatched: function(oEvent) {
  if (oEvent.getParameter("name") !== "DayView") {
     var context = new sap.ui.model.Context(this._oView.getModel(), '/' + oEvent.getParameter("arguments").contextPath);
     this._oView.setBindingContext(context);
  return;
  } */

  this._sItemPath = "/"+oEvent.getParameters().arguments.entity;
  this._sNavigationPath = this._sItemPath +"/"+"ResBook";


  // Bind Object Header and Form using oData
  this.byId("DayViewPage").bindElement({
  path: this._sItemPath
  });


  // Bind Review Table using oData Reviews Entity
  this._bindNavigationTable(this._sNavigationPath);
  },


  onNavBack: function() {
  window.history.go(-1);
  }
});

Please, help

[Former Member]

Hello,

try replacing the below code in ur dayview.controller,

onInit:function(){
this._oRouter.attachRoutePatternMatched(this._onRoutePatternMatched,this);
}

_onRoutePatternMatched:function(event){
if(event.getParameter("name")!=="DayView"){
return;
}

var context = oEvent.getParameter("arguments").contextPath;
this._oView.bindElement("root element and the context");
}

for more info look into the below link

hope your problem get solved,

regards,

Nagarjun

[marcin_czarny_nype]

I'm still trying resolve my problem. Can You explain me, what I'm doing wrong?

I'm not sure what I should put in parentheses, now there is "context" in the code. It's properly?

DayView.controller:

    onInit:function(){
    this._oRouter.attachRoutePatternMatched(this._onRoutePatternMatched,this);
    },

    _onRoutePatternMatched:function(oEvent){
    if(oEvent.getParameter("name")!=="DayView"){
    return;
    }
    var context = oEvent.getParameter("arguments").contextPath;
    this._oView.bindElement(context);
    } ,

Routes in Component.js:

routes : [
                                                               {
                                                                              pattern : "",
                                                                              name : "main",
                                                                              view : "Master"
                                                               },                                                                         
                                                               {
                                                                              name : "details",
                                                                              view : "Details",
                                                                              pattern : "{entity}"
                                                               },                                                                                         

                                                   {
                                                       name : "DayView",
                                                       view : "DayView",
                                                       pattern : "DayView/{contextPath}"
                                                   }
                                                   ]

and call function in Master.controller.js:

What should I put in the segment contextPath? I marked this place as "?????" in the code.

    onPressButton: function() {
        jQuery.sap.require("sap.m.MessageToast");
        sap.m.MessageToast.show("Pressed Test");

        this._oRouter.navTo("DayView", {contextPath: "?????"} );


        }

Regards

Marcin

[former_member205692]

Hey Marcin,

Were you able to resolve the issue? I am facing a similar issue in my application.

Thanks,

Suhas

[Former Member]

Hello,

try using the below code inside the dayview controller,

onInit:function(){
this.oRouter.attachRoutePatternMatched(this._handleRouteMatched,this);
}


_handleRouteMatched:funciton(event){
var oparameters = event.getParameter("name");
if(oparameters!=="DayView"){
return;
}
}

and retain ur previous component.js

[marcin_czarny_nype]

Ok, I will try. So, Component.js use with subroutes or without? Something like this?

...

routes : [  
  {  
  pattern : "",  
  name : "main",  
  view : "Master"  
  ,  
  subroutes : [  
    {  
    pattern: "DayView",  
    view: "DayView",  
    name: "DayView"  
    }  
    ]  
  },  

...

[marcin_czarny_nype]

Unfortunately, the same error:

Control with ID fioriContent could not be found - EventProvider sap.ui.core.routing.Target

[Former Member]

Hello,

use Component.js without subroutes