Create Fiori elements application using SAP bas to display OData data

Time:2022-6-8

For an introduction to sap Fiori elements, please refer to my articles:

Taking the Northwind OData service for teaching purposes that can be accessed arbitrarily on the public network as an example, this paper creates a Fiori elements application on SAP Business Application studio to display the data of OData service.

URL of this OData service:

https://services.odata.org/V2…

Open SAP Business Application studio, new project from template, and selectSAP Fiori Application

Create Fiori elements application using SAP bas to display OData data

Application type selectionSAP Fiori elements, floorplan selectionList Report Object Page

List report is one of the standard SAP Fiori floorplan. It takes the most commonly used table controls as the carrier and allows users to view a large number of project data. Users can use filters, sorting, and grouping as out of the box capabilities of the floorplan to search for related items. These functions are available out of the box without the need for application developers to manually write JavaScript code.
Create Fiori elements application using SAP bas to display OData data

Data source selectionConnect to an OData Service, maintain the Northwind OData URL:

Create Fiori elements application using SAP bas to display OData data

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

Navigation entitychoiceOrders

Create Fiori elements application using SAP bas to display OData data

Maintain any module name and click Finish:
Create Fiori elements application using SAP bas to display OData data

After a while, the application is generated.

Right click the webapp folder and selectPreview Application

Create Fiori elements application using SAP bas to display OData data

Select Start:
Create Fiori elements application using SAP bas to display OData data

A new browser window will pop up automatically, displaying blank data:

https://workspaces-ws-pdwk4-a…

Create Fiori elements application using SAP bas to display OData data

Click the gear icon to open the configuration page, and check the checkbox in front of the desired table column:
Create Fiori elements application using SAP bas to display OData data

Click OK, and the customer data in Northwind OData service will be displayed in this list:

Create Fiori elements application using SAP bas to display OData data

However, this setting will be lost the next time the application is started locally.

The normal practice is towebappRight click the folder and selectOpen Guided development

Create Fiori elements application using SAP bas to display OData data

Then selectAdd and edit table columns, which means adding a new column to the list report table:

Create Fiori elements application using SAP bas to display OData data

Prompted to useUI.LineItemNotes:

Create Fiori elements application using SAP bas to display OData data

Select the entity type to be annotated asCustomer

Create Fiori elements application using SAP bas to display OData data

Select the column data source to be added to the table from the attributes of the OData modelCustomerID

Create Fiori elements application using SAP bas to display OData data

The required annotation is automatically generated. Click Insert Snippet:

Create Fiori elements application using SAP bas to display OData data

Create Fiori elements application using SAP bas to display OData data

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

Create Fiori elements application using SAP bas to display OData data

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

Create Fiori elements application using SAP bas to display OData data