Question Re: Flexible Programming Model table failed to load in Technology Q&A

Flexible Programming Model table failed to load

MattDion — Sat, 08 Apr 2023 15:32:11 GMT

I'm trying to use the Fiori Elements table building block in a freestyle app. The table is part of an XML fragment that gets dynamically loaded. Here's the gist of the fragment:

<core:FragmentDefinition xmlns="sap.m" xmlns:core="sap.ui.core" xmlns:macros="sap.fe.macros">...<macros:Table id="idTable" metaPath="association/@com.sap.vocabularies.UI.v1.LineItem" selectionMode="Multi" readOnly="true"/>...</core:FragmentDefinition>

When I load this fragment, I end up receiving this error message in the console, and the page stops loading:

Uncaught (in promise) ModuleError: failed to load 'sap/fe/macros/Table.js' from ../resources/sap/fe/macros/Table.js: script load error
    at se (https://port8080-workspaces-ws-45mg4.eu10.applicationstudio.cloud.sap/resources/sap-ui-core.js:10:7148)
    at ne.failWith (https://port8080-workspaces-ws-45mg4.eu10.applicationstudio.cloud.sap/resources/sap-ui-core.js:10:4989)
    at HTMLScriptElement.i (https://port8080-workspaces-ws-45mg4.eu10.applicationstudio.cloud.sap/resources/sap-ui-core.js:10:10946)
Caused by: Error: script load error
    at HTMLScriptElement.i (https://port8080-workspaces-ws-45mg4.eu10.applicationstudio.cloud.sap/resources/sap-ui-core.js:10:10988)

At the time of the fragment load, it does appear that the resource is already loaded:

Any ideas what I might be missing?

Re: Flexible Programming Model table failed to load

nicolas_lunet — Wed, 12 Apr 2023 08:50:16 GMT

Hello Matt,

When loading FE building blocks within fragment you need to do that using the loadFragment method available in the extension API https://sapui5.hana.ondemand.com/#/api/sap.fe.core.ExtensionAPI%23methods/loadFragment

Hope that helps

Nicolas

Re: Flexible Programming Model table failed to load

MattDion — Wed, 12 Apr 2023 15:22:20 GMT

Thank you Nicolas! That did the trick. I was trying to use sap.ui.core.Fragment to load the XML fragment.

The correct coding is more or less (from the FPM context in a page controller extension class):

this.getExtensionAPI().loadFragment({
                id: "idFragment",
                name: "<name of fragment>",
                controller: this,
                initialBindingContext: this.getBindingContext()
            }).then(function (oFragment) { });