Object page layout - routing from block (UI5)

[Former Member]

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

[Former Member]

Hello llya,

Could you solve the issue.

I am also facing the same issue.

Thanks,

Amrita

[Former Member]

Hi there,

Nope, I didn't find the answer - I had to manually get the parent object (ObjectPage) and take a router from there.

Best regards,

Ilya

[Former Member]

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

[srilaxmi_dange1]

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

[Former Member]

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

[Former Member]

Hi Viplove,

Yes, I'm using the getRouterFor(this) method in the block controller. The thing is - I don't navigate to the particular block view, but to the parent, which is a object page layout control... Should I somehow get the parent's router? But how?

Regards,

Ilya

[Former Member]

Hi IIya,

Can you tell what is the exact structure of your views and navigation. its little bit confusing if you can attach a screen shot it will be great

thanks

Viplove

[Former Member]

Hi Viplove,

Here's the first view:

The second one which I navigate to:

Then, I wanted to navigate further into subitems, but in controller I can't get the router instance.

Here's my project tree:

Here's the routing configuration:

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
	},					
	objectdetails: {
		viewName: "objectdetails",
		viewLevel: 2
	}					
}<br>

Block controller returns me undefined:

sap.ui.define([	
		"sap/ui/core/mvc/Controller",
		"sap/ui/model/json/JSONModel",
		"sap/ui/core/routing/History",
		],
		function (Controller, JSONModel, History) {
		"use strict";
		
		return Controller.extend("testroute.blocks.ObjectDetailsBlockController", {
			onInit: function() {
			},	
			onListItemPress: function(oEvt) {
			   console.log(sap.ui.core.UIComponent.getRouterFor(this));
			}
	});
});


<br>

Console:

[Former Member]

Hi IIya,

Actually you have not define the block view or controller in the routing config . check the definition of the sap.ui.core.UIComponent.getRouterFor ... it will tell when only you can get the router instance ..

thanks

Viplove

[Former Member]

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