Skip to Content
1
Aug 19, 2022 at 12:51 AM

Fiori elements building blocks table data not shown

563 Views

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.

building-block.png

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

Attachments

building-block.png (100.6 kB)