SAP ui5 application development tutorial No. 57 – learning how to use smart field based on OData annotation


A set of step-by-step learning tutorials for SAP ui5 beginners

Tutorial directory


Jerry began to contact SAP ui5 after joining the CRM Fiori development team of SAP Chengdu Research Institute in 2014. He has published many articles on the working principle and source code analysis of SAP ui5 on the sap community and “WangZiXi” wechat official account.

In Jerry’s articleFor novices who know nothing about SAP ui5, what materials are better to start with?It was mentioned that Jerry came all the way from SAP ui5 rookie and knew that it was not easy for developers with only ABAP development background to transform into SAP ui5 development field. Therefore, I designed this learning tutorial suitable for SAP ui5 beginners in my spare time to divide the process of developing a complete SAP ui5 application into several steps and strive to cover the knowledge points involved in each step. These knowledge points may not be as deep as my ui5 source code analysis series, but they should be easy to understand and easy for SAP ui5 beginners to understand.

The source code of each step of this tutorial is stored in myGithubOn, they are identified by folders 01, 02, 03, etc.

SAP ui5 application development tutorial No. 57 - learning how to use smart field based on OData annotation

Each step is based on the previous step, and several new features are added. It is recommended that beginners with zero foundation or little knowledge of SAP ui5 learn step by step from the first step in order, download these codes locally, cooperate with the text explanation of the tutorial, and do it yourself to deepen their understanding.

If you have any questions about each step of the tutorial, please comment and leave a message in the corresponding step article of the tutorial.

Understanding SAP ui5 smart field is an important prerequisite for learning and mastering SAP Fiori elements development framework.

For the introduction of SAP Fiori elements, please refer to the open class on open sap. Jerry translated the video into Chinese. Here islink

The so-called SAP ui5 smart field, as the name suggests, is a kind of comparisonintelligenceDifferent from the traditional control of SAP ui5, this kind of control will be based on the annotation provided in the metadata in the OData service connected by SAP ui5 application(annotations), dynamically generate the underlying SAP ui5 control at runtime.

In other words, compared with traditional SAP ui5 controls, using smart field can reduce the development workload of SAP ui5 applications, because with this strategy, many properties of controls are no longer manually maintained in the XML view by application developers, but maintained in the metadata of OData services by OData service developers through annotation.

This step is to learn how to use smart field in SAP ui5 through a practical example.

Open URL:

You can see one label and two input controls. Do you think it’s ordinary? Nextintroduce, I will let you know the magic of SAP ui5 smart field:

SAP ui5 application development tutorial No. 57 - learning how to use smart field based on OData annotation