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!
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.
try model refresh
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
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);
yes, You can.
You need to use router for this
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
Hi Deep,
This method is called everytime the object page is loaded
this.extensionAPI.attachPageDataLoaded(this.onPageDataLoadedExtension, this);
Nice blog! I’ve added it to the Fiori elements wiki
Can we show object page with entity without navigation .
Hi poonam,
we can try without adding list report in pages. try and let me know of issues