Fiori Element - Fragment - Uncaught TypeError

[UweI]

Hi,
I have an oData V4 Service and I'm working with Fiori Elements. Into the App I want to insert an "Custom Section" (Fragment).

I have written the following coding. If the method _pf is called the program gets an Uncaught type error.

Does anybody have an idea what the problem is?

[Marian_Zeis]

Can you please show your code? Did you set a break point in the method? How do you define that extension in your manifest?

[UweI]

With oData V4 and Fiori Elements it is possible to create the Fragment in the page editor:

The manifest JSON has been changed automatically:

{
    "_version": "1.59.0",
    "sap.app": {
        "applicationVersion": {
            "version": "0.0.1"
        },
        "dataSources": {
            "annotation": {
                "settings": {
                    "localUri": "annotations/annotation.xml"
                },
                "type": "ODataAnnotation",
                "uri": "annotations/annotation.xml"
            },
            "mainService": {
                "settings": {
                    "annotations": [
                        "annotation"
                    ],
                    "localUri": "localService/metadata.xml",
                    "odataVersion": "4.0"
                },
                "type": "OData",
                "uri": "...."
            }
        },
        "description": "{{appDescription}}",
        "i18n": "i18n/i18n.properties",
        "id": "test.odata.test.odata.v4",
        "resources": "resources.json",
        "sourceTemplate": {
            "id": "@sap/generator-fiori:lrop",
            "toolsId": "8177a683-1f67-49d6-a126-1fef80889d7f",
            "version": "1.14.3"
        },
        "title": "{{appTitle}}",
        "type": "application"
    },
    "sap.fiori": {
        "archeType": "transactional",
        "registrationIds": [
        ]
    },
    "sap.ui": {
        "deviceTypes": {
            "desktop": true,
            "phone": true,
            "tablet": true
        },
        "icons": {
            "favIcon": "",
            "icon": "",
            "phone": "",
            "phone@2": "",
            "tablet": "",
            "tablet@2": ""
        },
        "technology": "UI5"
    },
    "sap.ui5": {
        "contentDensities": {
            "compact": true,
            "cozy": true
        },
        "dependencies": {
            "libs": {
                "sap.f": {
                },
                "sap.fe.templates": {
                },
                "sap.m": {
                },
                "sap.ui.core": {
                },
                "sap.ushell": {
                }
            },
            "minUI5Version": "1.132.1"
        },
        "flexEnabled": true,
        "models": {
            "": {
                "dataSource": "mainService",
                "preload": true,
                "settings": {
                    "autoExpandSelect": true,
                    "earlyRequests": true,
                    "operationMode": "Server"
                }
            },
            "@i18n": {
                "type": "sap.ui.model.resource.ResourceModel",
                "uri": "i18n/i18n.properties"
            },
            "i18n": {
                "settings": {
                    "bundleName": "test.odata.test.odata.v4.i18n.i18n"
                },
                "type": "sap.ui.model.resource.ResourceModel"
            }
        },
        "resources": {
            "css": [
            ]
        },
        "rootView": {
            "async": true,
            "id": "appRootView",
            "type": "XML",
            "viewName": "sap.fe.templates.RootContainer.view.Fcl"
        },
        "routing": {
            "config": {
                "flexibleColumnLayout": {
                    "defaultThreeColumnLayoutType": "ThreeColumnsMidExpanded",
                    "defaultTwoColumnLayoutType": "TwoColumnsBeginExpanded"
                },
                "routerClass": "sap.f.routing.Router"
            },
            "routes": [
                {
                    "name": "MonitorSetList",
                    "pattern": ":?query:",
                    "target": [
                        "MonitorSetList"
                    ]
                },
                {
                    "name": "MonitorSetObjectPage",
                    "pattern": "MonitorSet({key}):?query:",
                    "target": [
                        "MonitorSetList",
                        "MonitorSetObjectPage"
                    ]
                }
            ],
            "targets": {
                "MonitorSetList": {
                    "contextPattern": "",
                    "controlAggregation": "beginColumnPages",
                    "id": "MonitorSetList",
                    "name": "sap.fe.templates.ListReport",
                    "options": {
                        "settings": {
                            "contextPath": "/MonitorSet",
                            "controlConfiguration": {
                                "@com.sap.vocabularies.UI.v1.LineItem": {
                                    "tableSettings": {
                                        "type": "ResponsiveTable"
                                    }
                                }
                            },
                            "navigation": {
                                "MonitorSet": {
                                    "detail": {
                                        "route": "MonitorSetObjectPage"
                                    }
                                }
                            },
                            "variantManagement": "Page"
                        }
                    },
                    "type": "Component"
                },
                "MonitorSetObjectPage": {
                    "contextPattern": "/MonitorSet({key})",
                    "controlAggregation": "midColumnPages",
                    "id": "MonitorSetObjectPage",
                    "name": "sap.fe.templates.ObjectPage",
                    "options": {
                        "settings": {
                            "content": {
                                "body": {
                                    "sections": {
                                        "Fragment": {
                                            "template": "test.odata.test.odata.v4.ext.fragment.Fragment",
                                            "title": "{i18n>customSection}"
                                        },
                                        "Fragment2": {
                                            "position": {
                                                "anchor": "Fragment",
                                                "placement": "After"
                                            },
                                            "template": "test.odata.test.odata.v4.ext.fragment.Fragment2",
                                            "title": "{i18n>customSection2}"
                                        },
                                        "Fragment3": {
                                            "position": {
                                                "anchor": "Fragment2",
                                                "placement": "After"
                                            },
                                            "template": "test.odata.test.odata.v4.ext.fragment.Fragment3",
                                            "title": "{i18n>customsection3}"
                                        }
                                    }
                                }
                            },
                            "contextPath": "/MonitorSet",
                            "editableHeaderContent": false
                        }
                    },
                    "type": "Component"
                }
            }
        }
    }
}

[Marian_Zeis]

please show the complete code, fragment.xml and javascript code

[UweI]

Fragment3.fragment.xml:

<core:FragmentDefinition xmlns:core="sap.ui.core" xmlns="sap.m" xmlns:macros="sap.fe.macros">
	<VBox core:require="{ handler: 'test/odata/test/odata/v4/ext/fragment/Fragment3'}">
		<Button text="Fragment3" press="handler.onPress" />
	</VBox>
</core:FragmentDefinition>

Frgment3.js:

sap.ui.define([
    "sap/m/MessageToast"
], function(MessageToast) {
    'use strict';

    return {
        onPress: function(oEvent) {
            MessageToast.show("Custom handler invoked.");
            _working( );
            this._not_working();
            
            
            function _working() {
                MessageToast.show("Message2");    
            }
        },
        _not_working: function( ){
            MessageToast.show("Message3");    
        }
    };
});

[Marian_Zeis]

This extension is just calling the one method, as this is not a controller extension, it does not know the other methods.
and the method "working" is working because it is inside the press method, so it is not outside of the context

If you want to use methods like this you need to create a controller extension

[UweI · Accepted solution]

Hello Marian,

You are right, many thanks! (I could not mark you answer as right answer because it was (only) a comment).

I had some further investigation.

There is a difference between a "Custom Control" and a "Controller extension".

https://sapui5.hana.ondemand.com/test-resources/sap/fe/core/fpmExplorer/index.html#/controllerExtens...

Fiori Elements (in oData V4) only creates "Custom Control". But in a second step it is also possible to create "Controller extensions".