Using building block inside fragment fails in Fiori Elements Custom Page

[DanielSchneider]

Hi community,

I'm trying to use a building block inside a fragment, calling it after a button press inside a Fiori Elements application (Floorplan "Custom Page"). When I'm doing the same directly on the custom page (instead of inside a fragment, everything works).

When the fragment should get loaded, I'm getting the following error:
ModuleError: failed to load 'sap/fe/macros/Field.js' from ../resources/sap/fe/macros/Field.js: script load error

I've read that the fragment needs to get loaded with the extensionAPI (function loadFragment). If one tries to load the fragment without the extensionAPI it will fail, like it does for me.

Inside my Custom Page Fiori elements app I don't have direct access to the extensionAPI instance though. But it looks like that I have many functions already on my controller instance inheriting from the PageController (including the loadFragment function). Unfortunately the error is still the same.

Is it currently not possible to use building blocks inside fragments in a FE Custom Page (compared to e.g. a List Report flavor)? Any adivce is very appreciated!

My fragment looks like this:

<core:FragmentDefinition xmlns:core="sap.ui.core"
xmlns="sap.m" xmlns:macros="sap.fe.macros">
 <Dialog id="myDialog" busyIndicatorDelay="10"
title="{i18n>dialogTitle}" contentWidth="80rem" afterClose="closeDialog">
  <content>
    <VBox>
      <macros:Field id="myField" contextPath="/AdditionalFields" metaPath="MyField"/>
    </VBox>
  </content>
 </Dialog>
</core:FragmentDefinition>

I'm calling the fragment inside my Main.controller.js (belonging to the Main view which was automatically generated by the template generator) like this:

onButtonPress: function(oEvent) {
  if (!this._pDialog) {
                    this._pDialog= this.loadFragment({
                        name: "path.to.fragment",
                        controller: this
                    }).then(
                        function (oDialog) {
                            this.getView().addDependent(oDialog);
                            syncStyleClass('sapUiSizeCompact', this.getView(), oDialog);
                            return oDialog;
                        }.bind(this)
                    );
                }

                this._pDialog.then(
					function (oDialog) {
						oDialog.open();
					}.bind(this)
				);
}

Thanks
Daniel

[Harshi]

Hi Daniel,
I am facing the same issue. Please let me know if (and how) you managed to solve this.
Thank you!

[ArcherZhang]

You may check the answer from nicolas_lunet: https://community.sap.com/t5/technology-q-a/flexible-programming-model-table-failed-to-load/qaq-p/12...

[Harshi]

Hi Archer, The above answer did not work for me. I have extended the PageController but I still get an error that the Binding Context is not available.

[Souravmittal]

this.base.getExtensionAPI().loadFragment

[DanielSchneider]

Hi @Harshi ,

the extensionAPI is available through this inside the Custom Page controller:

this.getInterface().getExtensionAPI()

With that you can call the loadFragment function (this.getInterface().getExtensionAPI().loadFragment(...)).

This should solve the issue imho. I didn't try it yet, since I went for another approach (freestyle fragment without building blocks).

Hope that helps
Daniel