Fiori elements building blocks table data not shown

[MioYasutake]

Hi Fiori experts,

I'm tryinig to embed Fiori elements building blocks into a free style app. The backend is CAP based OData v4 service. I am developing in BAS and UI5 version is 1.102.1.

To get started, I am following below guidance page.

https://ui5.sap.com/test-resources/sap/fe/core/fpmExplorer/index.html#/buildingBlocks/guidance

Currently a table is displayed but recoreds are not shown on the table. I observed that no $batch call has been sent.

In the console, I see the following error.

Uncaught (in promise) TypeError: Cannot read properties of null (reading 'getProperty')
    at Object.updateBinding (TableDelegate-dbg.js:561:57)
    at _.bindRows (Table.js:6:33821)
    at _._rebind (Table.js:6:36469)
    at constructor.<anonymous> (FilterIntegrationMixin.js:6:1793)

As you can see in below code, I have made only bare minimum settings so I have no idea what could cause this error. I would appreciate If someone could provide me with a minimum working example of building blocks in a free style app.

manifest.json

{
    "_version": "1.40.0",
    "sap.app": {
        "id": "uicap",
        "type": "application",
        "i18n": "i18n/i18n.properties",
        "applicationVersion": {
            "version": "0.0.1"
        },
        "title": "{{appTitle}}",
        "description": "{{appDescription}}",
        "resources": "resources.json",
        "sourceTemplate": {
            "id": "@sap/generator-fiori:basic",
            "version": "1.6.7",
            "toolsId": "da75bd6b-990d-46f0-9565-fd0a686fea87"
        },
        "dataSources": {
            "mainService": {
                "uri": "/planned-order/",
                "type": "OData",
                "settings": {
                    "annotations": [],
                    "localUri": "localService/metadata.xml",
                    "odataVersion": "4.0"
                }
            }
        }
    },
    "sap.ui": {
        "technology": "UI5",
        "icons": {
            "icon": "",
            "favIcon": "",
            "phone": "",
            "phone@2": "",
            "tablet": "",
            "tablet@2": ""
        },
        "deviceTypes": {
            "desktop": true,
            "tablet": true,
            "phone": true
        }
    },
    "sap.ui5": {
        "flexEnabled": true,
        "dependencies": {
            "minUI5Version": "1.102.1",
            "libs": {
                "sap.m": {},
                "sap.ui.core": {},
                "sap.f": {},
                "sap.suite.ui.generic.template": {},
                "sap.ui.comp": {},
                "sap.ui.generic.app": {},
                "sap.ui.table": {},
                "sap.ushell": {},
                "sap.fe.macros": {}
            }
        },
        "contentDensities": {
            "compact": true,
            "cozy": true
        },
        "models": {
            "i18n": {
                "type": "sap.ui.model.resource.ResourceModel",
                "settings": {
                    "bundleName": "uicap.i18n.i18n"
                }
            },
            "": {
                "dataSource": "mainService",
                "preload": true,
                "settings": {
                    "synchronizationMode": "None",
                    "operationMode": "Server",
                    "autoExpandSelect": true,
                    "earlyRequests": true
                }
            }
        },
        "resources": {
            "css": [
                {
                    "uri": "css/style.css"
                }
            ]
        },
        "routing": {
            "routes": [
                {
                    "name": "List",
                    "pattern": "",
                    "target": "List"
                }
            ],
            "targets": {
                "List": {
                    "type": "Component",
                    "id": "list",
                    "name": "sap.fe.core.fpm",
                    "options": {
                        "settings": {
                            "viewName": "uicap.view.List",
                            "entitySet": "PlannedOrderHeader"
                        }
                    }
                }
            }
        }
    }
}

View

<mvc:View controllerName="uicap.controller.List"
    xmlns:mvc="sap.ui.core.mvc" displayBlock="true"
	xmlns:fe="sap.fe.macros"
    xmlns="sap.m">

	<Page>
		<content>
			<fe:Table contextPath="/PlannedOrderHeader" metaPath="@com.sap.vocabularies.UI.v1.LineItem" id="myTable" />
		</content>
	</Page>
</mvc:View>

Controller

sap.ui.define([
    "sap/fe/core/PageController"
],
    /**
     * @param {typeof sap.ui.core.mvc.Controller} Controller
     */
    function (PageController) {
        "use strict";

        return PageController.extend("uicap.controller.List", {
            onInit: function () {

            }
        });
    });

Best regards,Mio

[MioYasutake]

I have created the following git repository. The code here is a bit different from above, but you can reproduce the issue.

https://github.com/miyasuta/building-block-sample

[gregorw]

Have you tried also with the latest SAPUI5 Version?

[MioYasutake]

Hi gregorw,

Thank you for your suggestion.

I have tried running it with the latest version (1.104.2), but still got the same error.

[cd123 · Accepted solution]

Hi Mio,

I had the exact same issue and now it's fixed. Make sure you call PageController.prototype.onInit.apply(this); in onInit if you're overwriting it in the controller.

sap.ui.define([
    "sap/fe/core/PageController",
    "sap/ui/core/UIComponent"
], function (PageController, UIComponent) {
    "use strict";

    return PageController.extend("project1.controller.Overview", {
        onInit: function () {
            //make sure to call prototype onInit before adding custom code here
            PageController.prototype.onInit.apply(this);
        }

    });
});

Best,
Dong

[MioYasutake · Accepted solution]

Hello cd123,

Thank you very much for providing the answer. It worked.

[MattDion · Accepted solution]

Wow, yes thank you cd123! I would have never figured this out.

I guess it would be nice if this was part of the comments in the default Main.controller.js template that is provided when creating a new FPM Fiori app.