Create Fiori Elements app using SAP BAS to display OData data

For an introduction to SAP Fiori Elements, please refer to my articles:

• Created the first SAP Fiori Elements application without any front-end development experience
• Answers questions from netizens: How to carry out secondary development of Fiori Elements applications created with SAP Fiori Tools?

This article uses the northwind OData service that can be accessed freely on the public network for teaching purposes as an example, and creates a Fiori Elements application on SAP Business Application Studio to display the data of the OData service.

The url of this OData service:

https://services.odata.org/V2/Northwind/Northwind.svc/

Open SAP Business Application Studio, New Project from Template, select SAP Fiori Application :

Select SAP Fiori elements for application type and 06235d3d839026 for List Report Object Page :

List Report, one of the standard SAP Fiori floorplans, is based on the most commonly used form controls and enables users to view large amounts of project data. Users can search for related items using filters, sorting and grouping as out-of-the-box features of this floorplan. These features are available out of the box, eliminating the need for application developers to manually write JavaScript code.

Select Connect to an OData Service for Data source, and maintain the Northwind OData url in it:

Main entity selects Customers , which means that in the generated application, the Customers data is displayed in the table by default.

Navigation entity select Orders :

Just maintain a module name and click finish:

After a few moments, the app is generated.

Right click on the webapp folder and select Preview Application :

Choose start:

A new browser window will automatically pop up with blank data:

https://workspaces-ws-pdwk4-app1.us10.trial.applicationstudio.cloud.sap/test/flpSandbox.html?sap-ui-xx-viewCache=false#northwindtest-tile

Click the gear icon to open the configuration page, and tick the checkbox in front of the table column you want to view:

Click ok, the customer data in the northwind odata service is displayed in this list:

But this setting will be lost the next time the app is launched locally.

The normal practice is to right-click the webapp folder and select Open Guided development :

Then select Add and edit table columns , which means adding a new column to the List Report table:

The prompt is to use the UI.LineItem annotation:

Select the Entity Type to be annotated as Customer :

Select the column data source to add to the table from the property CustomerID of the OData model:

The required annotation is automatically generated, click Insert Snippet:

The above code is automatically added to webapp/annotations/annotation.xml:

Finally refresh the application and find that CustomerID can be displayed normally by default: