Skip to Content
1
Dec 12, 2022 at 09:20 PM

Flexible Programming Model: How to use different pages for create and display?

526 Views Last edit Dec 12, 2022 at 09:21 PM 2 rev

Hi community,

I watched the following youtube video and trying to implement the same scenario.

SAP Fiori elements: Using building blocks

In this video, they created a wizard page for data entry. I was able to replace the object page with the wizard page.

Now, the question is how to open the standard object page when a list item is clicked?

I have tried to implement routing.onBeforeNavigation in controller extension as below, but navigation to the object page was not triggered. I'm not even sure if this is the right approach.

sap.ui.define(
	[
		"sap/ui/core/mvc/ControllerExtension",
	],
	function(ControllerExtension, ) {
		"use strict";
		return ControllerExtension.extend("sap.fe.core.fpmExplorer.extendLR", {
			// this section allows to extend lifecycle hooks or override public methods of the base controller
			override: {
				routing: {					
					onBeforeNavigation: function(mNavigationParameters) {
						const oBindingContext = mNavigationParameters.bindingContext;
                        const parameters = {
                            key: oBindingContext.getProperty("TravelID")
                        };
						this.base.getExtensionAPI().routing.navigateToRoute("TravelObjectPage", parameters)
						return true;
					}
				}
			}
		});
	}
);
routing section of manifest.json
        "routing": {
            "routes": [
                {
                    "pattern": ":?query:",
                    "name": "TravelList",
                    "target": "TravelList"
                },
                {
                    "pattern": "Travel({key}):?query:",
                    "name": "TravelWizard",
                    "target": "TravelWizard"
                },
                {
                    "pattern": "Travel({key})/to_Booking({key2}):?query:",
                    "name": "BookingObjectPage",
                    "target": "BookingObjectPage"
                }
            ],
            "targets": {
                "TravelList": {
                    "type": "Component",
                    "id": "TravelList",
                    "name": "sap.fe.templates.ListReport",
                    "options": {
                        "settings": {
                            "entitySet": "Travel",
                            "controlConfiguration": {
                                "@com.sap.vocabularies.UI.v1.SelectionFields": {
                                    "useSemanticDateRange": true
                                }
                            },
                            "variantManagement": "Page",
                            "initialLoad": true,
                            "navigation": {
                                "Travel": {
                                    "detail": {
                                        "route": "TravelWizard"
                                    }
                                }
                            }
                        }
                    }
                },
                "TravelWizard": {
                    "type": "Component",
                    "id": "entryPage",
                    "name": "sap.fe.core.fpm",
                    "options": {
                        "settings": {
                            "viewName": "sap.fe.cap.travel.ext.view.TravelCreate",
                            "entitySet": "Travel"
                        }
                    }
                },
                "TravelObjectPage": {
                    "type": "Component",
                    "id": "TravelObjectPage",
                    "name": "sap.fe.templates.ObjectPage",
                    "options": {
                        "settings": {
                            "entitySet": "Travel",
                            "navigation": {
                                "to_Booking": {
                                    "detail": {
                                        "route": "BookingObjectPage"
                                    }
                                }
                            },
                            "controlConfiguration": {
                                "to_Booking/@com.sap.vocabularies.UI.v1.LineItem": {
                                    "tableSettings": {
                                        "type": "ResponsiveTable",
                                        "personalization": {
                                            "column": true,
                                            "sort": false
                                        },
                                        "creationMode": {
                                            "name": "Inline",
                                            "createAtEnd": true
                                        }
                                    }
                                }
                            },
                            "editableHeaderContent": false
                        }
                    }
                },
                "BookingObjectPage": {
                    "type": "Component",
                    "id": "BookingObjectPage",
                    "name": "sap.fe.templates.ObjectPage",
                    "options": {
                        "settings": {
                            "entitySet": "Booking",
                            "editableHeaderContent": false
                        }
                    }
                }
            }
        },<br>