For an introduction to sap Fiori elements, please refer to my articles:
- Create the first SAP Fiori elements application without any front-end development experience
- Answer netizens’ questions: how to conduct secondary development of Fiori elements application created by SAP Fiori tools?
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：
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.
Data source selectionConnect to an OData Service, maintain the Northwind OData URL:
Main entity selectionCustomers, which means that in the generated application, the customers data is displayed in the table by default.
Navigation entitychoiceOrders：
Maintain any module name and click Finish:
After a while, the application is generated.
Right click the webapp folder and selectPreview Application：
Select Start:
A new browser window will pop up automatically, displaying blank data:
https://workspaces-ws-pdwk4-a…
Click the gear icon to open the configuration page, and check the checkbox in front of the desired table column:
Click OK, and the customer data in Northwind OData service will be displayed in this list:
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：
Then selectAdd and edit table columns, which means adding a new column to the list report table:
Prompted to useUI.LineItemNotes:
Select the entity type to be annotated asCustomer：
Select the column data source to be added to the table from the attributes of the OData modelCustomerID：
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:
