Skip to Content

Routing in Web IDE to switch between XML views

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 Use Cases for Extending the UI of SAP Fiori Apps

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-using-routing-and-parameter-passing-between-views

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

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?

Add a comment
10|10000 characters needed characters exceeded

Assigned Tags

Related questions

4 Answers

  • author's profile photo Former Member
    Former Member
    Posted on May 08, 2015 at 04:01 PM

    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

    Add a comment
    10|10000 characters needed characters exceeded

  • Posted on May 09, 2015 at 01:17 PM

    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 😉

    Add a comment
    10|10000 characters needed characters exceeded

  • Posted on Sep 02, 2015 at 07:35 PM

    Same problem in my app. Anyone found a solution?

    Add a comment
    10|10000 characters needed characters exceeded

    • 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}" }

      ]
  • author's profile photo Former Member
    Former Member
    Posted on Feb 16, 2016 at 10:25 AM

    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

    Add a comment
    10|10000 characters needed characters exceeded

Before answering

You should only submit an answer when you are proposing a solution to the poster's problem. If you want the poster to clarify the question or provide more information, please leave a comment instead, requesting additional details. When answering, please include specifics, such as step-by-step instructions, context for the solution, and links to useful resources. Also, please make sure that you answer complies with our Rules of Engagement.
You must be Logged in to submit an answer.

Up to 10 attachments (including images) can be used with a maximum of 1.0 MB each and 10.5 MB total.