Skip to Content
Author's profile photo Akshaya Parthasarathy

Fiori List Report:Creating multiple Object Pages and Navigation

Dear All,

As fiori elements and UI annotations are bringing in new features everyday, I would like to share my code sample on how to create multiple object pages in a list report application and how to navigate between them.

In this blog we would see how to add additional object page to a list report application and how to navigate between object page1 and object page 2.

Pre-requisites: A list report application should be created in smart template in SAPWebIDE

Terms used: I will be using the following names for understanding

List Report EntitySet: ListReportSet

Object Page 1 EntitySet: ObjectPage1Set

Object Page 2 EntitySet: ObjectPage2Set

Navigation Property from List Report to Object Page 1:To_Ob1

After the List report application is created with Object Page1, the code in the below 2nd block  will be auto-generated in manifest.json.

This is code Fragment that needs to be added below the first Object Page declaration
	"pages": [
							{
								"navigationProperty": "To_Ob1",
								"entitySet": "ObjectPage1Set",
								"component": {
									"name": "sap.suite.ui.generic.template.ObjectPage"
								}
							}
						]
Please note the last section where the Navigation for New Object Page is added	

"sap.ui.generic.app": {
		"_version": "1.1.0",
		"pages": [
			{
				"entitySet": "ListReportSet",
				"component": {
					"name": "sap.suite.ui.generic.template.ListReport",
					"list": true,
					"settings": {
						"hideTableVariantManagement": true
					}
				},
				"pages": [
					{
						"entitySet": "ObjectPage1Set",
						"component": {
							
							"name": "sap.suite.ui.generic.template.ObjectPage",
							"settings": {
								"showRelatedApps": false
							}
						},
						"pages": [
							{
								"navigationProperty": "To_Ob1",
								"entitySet": "ObjectPage1Set",
								"component": {
									"name": "sap.suite.ui.generic.template.ObjectPage"
								}
							}
						]
					}
				]
			}
		]
	},

 

Note: For this Navigation to work from ObjectPage1Set ->ObjectPage2Set, in oData we must create a Navigation Property from ObjectPage1Set to ObjectPage2Set say To_Ob2.

 

 

 

 

Thus we have achieved a List report Application from List Report 1->Object Page 1->Object Page 2.

Thanks for reading!

 

 

Assigned Tags

      10 Comments
      You must be Logged on to comment or reply to a post.
      Author's profile photo Vikash Rakshit
      Vikash Rakshit

      Hi Akshaya ,

      I have implemented the same thing in my app. However i am getting one issue.

      From my object page i have list from which i can navigate to second object page. While coming back to my previous screen from 2nd object page , the list with one of the field having amount gets changed to 1 (i checked in network no odata call is going for that list while navigating from 2nd object page to first .

       

      Can you please help on this.

      Author's profile photo Akshaya Parthasarathy
      Akshaya Parthasarathy
      Blog Post Author

      try model refresh

      Author's profile photo Tanveer Shaikh
      Tanveer Shaikh

      Thanks for the great Blog !

      Can we achieve two different Navigation to object page based on any condition ?

      Like--

      List Report 1 ->Object Page 1 for one condition

      List Report 1 ->Object Page 2 for second condition.

      Thanks,

      Tanveer

      Author's profile photo Akshaya Parthasarathy
      Akshaya Parthasarathy
      Blog Post Author

      Hi,

      I don't think Navigation can be customized. But you anyway try in this method   of extension API   (attachpagedataloaded) in object page extension controller

      this.extensionAPI.attachPageDataLoaded(this.onPageDataLoadedExtension, this);

      Author's profile photo subrat gogoi
      subrat gogoi

      yes, You can.

      You need to use router for this

      Author's profile photo Deep Agrawal
      Deep Agrawal

      Hey subrat gogoi, akshaya parthasarathy ,

      Thanks for this discussion!

      Could you pls tell me how to use router/extension API to invoke similar event as routePatternMatched/ routeMatched here in Fiori Elements Object Page extensions.

      Basically, I need to run logic everytime I navigate to Object Page extension view.

       

      Regards,

      Deep Agrawal

       

       

      Author's profile photo akshaya parthasarathy
      akshaya parthasarathy

      Hi Deep,

      This method is called everytime the object page is loaded

       

      this.extensionAPI.attachPageDataLoaded(this.onPageDataLoadedExtension, this);

      Author's profile photo Jocelyn Dart
      Jocelyn Dart

      Nice blog! I’ve added it to the Fiori elements wiki

      Author's profile photo Poonam Kshirsagar
      Poonam Kshirsagar

      Can we show  object page with entity without navigation .

      Author's profile photo Akshaya Parthasarathy
      Akshaya Parthasarathy
      Blog Post Author

      Hi poonam,

      we can try without adding list report in pages. try and let me know of issues