Skip to Content

Object page layout - routing from block (UI5)

Hello colleagues,

Could you help me to resolve routing from block (sap.uxap.BlockBase) issue?

I have an app, which start page is a list. From this list I navigate (using router) to an Object Page Layout with subsections and blocks - the route looks like: list/{itemId}, everything is fine so far.

One of the blocks is a view with a table. What I'm trying to do - is to navigate to another page from the table rows to have the following route: list/{itemId}/{subItemId}.

The issue is - I cannot get a router instance from my block controller. Even this.getOwnerComponent() returns me undefined.

I tried to fire an event up to parent controller using oParentBlock attribute, but context of this doesn't have the pressed item - only the source view context.

What could be wrong?

Thanks,

Ilya

Add comment
10|10000 characters needed characters exceeded

  • Get RSS Feed

3 Answers

  • avatar image
    Former Member
    Nov 29, 2016 at 12:07 PM

    Hi IIya,

    How you are getting your router for navigation, you can get the router for specific controller or view by using this command : sap.ui.core.UIComponent.getRouterFor(this) , but for this you need to mention the routing configurations in manifest file. You can check examples on SAPUI5 Explorer (Navigation section) .

    thanks

    Viplove

    Add comment
    10|10000 characters needed characters exceeded

    • Hi Viplove,

      I already tried to do that... In my configuration I wrote:

      routes: [
      	{
      		name: "listview",
      		pattern: "",
      		target: "listview"
      	},
      	{
      		name: "objectpage",
      		pattern: "listview/{ItemId}",
      		target: ["objectpage"]
      	},
      	{
      		name: "objectdetails",
      		pattern: "listview/{ItemId}/{SubItemId}",
      		target: "objectdetails"
      	}					
      ],
      targets: {
      	listview: {
      		viewName: "listview",
      		viewLevel: 0
      	},
      	objectpage: {
      		viewName: "objectpage",
      		viewLevel: 1
      	},
      	objectBlock: {
      		viewPath: "testroute.blocks",
      		viewName: "ObjectDetailsBlock",
      		viewLevel: 1
      	},					
      	objectdetails: {
      		viewName: "objectdetails",
      		viewLevel: 2
      	}
      

      Then, in controller I have "undefined" anyway.

      return Controller.extend("testroute.blocks.ObjectDetailsBlockController", {
      	onInit: function() {
      		console.log(this.getOwnerComponent());
      		console.log(sap.ui.core.UIComponent.getRouterFor(this));
      	},

      The thing is - my block view has no owner component... To get the router I somehow have to navigate to this view (?), but I already navigate to the parent (objectpage).

      I thought, that I should try to navigate to multiple targets (https://help.sap.com/saphelp_nw75/helpdata/en/b0/1840ec42ef48e6bfd2bc12612f501f/content.htm), but I cannot find a proper aggregation for my block - there are several of them: sections->subSections->blocks...

      Thanks,

      Ilya

      issue2.png (8.7 kB)
  • avatar image
    Former Member
    Mar 09, 2017 at 05:49 AM

    Hello llya,

    Could you solve the issue.

    I am also facing the same issue.

    Thanks,

    Amrita

    Add comment
    10|10000 characters needed characters exceeded

    • Hi Amrita,

      I know, it's too late, but I hope this could help someone else. As I understood, blocks should execute events via an object layout controller.

      Find sample application here - https://sapui5.hana.ondemand.com/#/sample/sap.uxap.sample.BlockBaseEventing/preview.

      What I did in my code:

      Block.js:

      sap.ui.define(["sap/uxap/BlockBase"], function(BlockBase) {
      	"use strict";
      
      
      	return BlockBase.extend("...", {
      		metadata: {
      			views: {
      				Expanded: {
      					viewName: "...Expanded",
      					type: "XML"
      				},
      				Collapsed: {
      					viewName: "...Collapsed",
      					type: "XML"
      				}
      			},
      			events: {
      				"navToItem": {}
      			}
      		}
      	});
      }, true);
      

      BlockController:

      			onItemPress: function(oEvent) {
      				var oItem = oEvent.getSource();
      				var oCtx = oItem.getBindingContext("modelName");
      				var idProperty = oCtx.getProperty("idProperty");
      				var oPassCtx = {
      					idProperty: idProperty
      				};
      				this.oParentBlock.fireNavToItem(oPassCtx);
      			}

      ObjectPageLayoutController:

      			onNavToItem: function(oEvent) {
      				var oRouter = this.getRouter();
      				oRouter.navTo("itemDetails", {
      					ItemId: oEvent.getParameter("idProperty")
      				});
      			},

      Best regards,

      Ilya

  • avatar image
    Former Member
    Nov 29, 2017 at 09:08 AM

    Hi Ilya,

    You can refer OpenSAP lessons for the same, they have explained your issue there in a better way . To get the required view when you navigate through particular item of the list or Table.

    Thanks,

    Srilaxmi

    Add comment
    10|10000 characters needed characters exceeded