Fiori List Report:Creating multiple Object Pages and Navigation

[akshaya_p]

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!