This is the sixty-second article of Jerry in 2021, and the 339th official account of the Wang Zixi public number.
Although the tortoise lives Cao Cao 神Although the tortoise lives，犹有竟时； The flying snake rides the fog and turns into dust. An old horse has a great ambition; In his twilight years, the martyr is full of ambition. The period of surplus and contraction is not only in the sky; The blessing of nourishing and enjoying can lead to eternal life. Fortunately, singing praises ambition.
Recently, I received a consultation from a friend. In the project implementation, I need to implement the line item deletion requirement in SAP ui5 table control. The friend searched some sample codes on the Internet, copied them to his SAP ui5 application, and reported errors after execution.
First of all, we need to make it clear that SAP ui5 table control supports both OData model and JSON model. Therefore, when programming for stackoverflow or Google (which is also one of Jerry’s favorite development methods), be sure to find out whether the code fragments copied and pasted from the Internet and the model types used are consistent with those used in your own project.
First, understand the difference between the two models.
Definition of JSON model on SAP ui5 official website:
The JSON model is a client-side model and, therefore, intended for small data sets, which are completely available on the client. The JSON model does not support mechanisms for server-based paging or loading of deltas. It supports, however, two-way binding. Also, client-side models like the JSON model have no built-in support for sending data back to the server. The apps have to use, for example, model.getData() and jQuery.ajax() to send updated data to the server.
The JSON model is a client-side model, so it is suitable for small-scale data sets that are fully available on the client. JSON model does not support paging or incremental loading mechanism based on server implementation. Unlike the OData model, the JSON model does not natively support the ability to send data back to the server. The application developer must manually call model. GetData () and jQuery. Ajax () to send the updated data from the client back to the server.
Definition of OData model on SAP ui5 official website:
The OData model is a server-side model, meaning that the data set is only available on the server and the client only knows the currently visible (requested) data. Operations, such as sorting and filtering, are done on the server. The client sends a request to the server and shows the returned data.
OData model is a server-side model, which means that the complete data set is only saved on the server, and the client can only perceive the currently requested data. Sorting and filtering are done on the server. The client sends a request to the server and displays the returned data.
For more information on the server-side working mode of OData model, please refer to Jerry’s previous articles:SAP ui5 OData rumor shredder: send two OData requests in a very short time. Will the first one be cancelled automatically?
OData model supports incremental loading mechanism (or lazy loading). For the working principle of this mechanism, please refer to Jerry’s previous article:SAP UI search paging technology。
Jerry compares the client-side features of JSON model and the server-side features of OData model to the client-side rendering and server-side rendering of web pages. For more details, please check this article:SAP UI rendering mode: client-side rendering vs server-side rendering。
For an introduction to the data binding implementation principles of JSON model and OData model, please refer to Jerry’s previous articles:
- In depth study of SAP ui5 framework code series 6: implementation principle of SAP ui5 control data binding
- In depth study of SAP ui5 framework code series 7: comparison of implementation principles of three modes of control data binding – one way, two way and onetime
First, learn how to add and delete line items in SAP ui5 table control based on OData model.
All the source code of this example is on my GitHub:
Clone the entire code warehouse locally, execute the command line NPM install, and then execute node local.js:
Then visit the browserhttp://localhost:3002/tablede…You can:
The table control in the figure above is bound to the two fields contained in the OData service products entityset: name and size
In the OnInit method of the table controller, I use the odatamodel constructor to create an OData model instance and assign it to the table instance otable through the setmodel method. The model constructor needs to pass in a path of OData service. Here, the path I pass in / here / goes / your / serviceurl points to the virtual OData service provided by my local mockserver. Jerry’s subsequent articles will introduce how to use SAP ui5 mockserver.
For the addition and deletion of table control line items, you can directly call the create and remove methods corresponding to OData service, as shown in the highlighted code line in the following figure.
After the create and remove methods of OData model are called, the corresponding HTTP request will be sent to the corresponding server. Note that in the event processing code for adding and deleting line items, we did not manually write the refresh operation of the table control, because the OData model is a server-side model. When we call the create and remove methods of the OData model, the OData model will automatically initiate another read request to obtain the latest data from the server, And automatically refresh the table control.
For the OData request sent by SAP ui5 table control based on OData model when the display and data change, please refer to this video produced by Jerry:
Next, you can add and delete row items of table controls based on JSON model.
Source code of this example:
Create a new JSON model instance and bind the code to the table control instance, as shown in the following figure. This.data.products array variable maintains all hard coded local data of the JSON model:
The user clicks the button to try to add and delete row items. The action we need to do is to modify the Products array of the JSON model binding, then call the refresh method of the JSON model, and manually trigger the refresh of UI. After refreshing the model data, the synchronous refresh of UI interface can be automatically realized through the two-way binding mechanism of JSON model.
As can be seen from the implementation of the above JSON model, all the data displayed in the table are located in the this.data.products array maintained by the client. As stated on SAP ui5 official website, JSON model is only suitable for table content display with small amount of data. If the data source of the table comes from the background of SAP system, the table application implemented by JSON model will encounter scalability problems. In this case, OData model is a better choice.
Thanks for reading.
Jerry’s SAP ui5 topic
- 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?
- How to deploy locally developed SAP Fiori elements application to ABAP server
- Prerequisite for in-depth understanding of SAP Fiori elements: understanding smart field
- In depth understanding of how SAP Fiori elements works series 2: how to add custom buttons to sap Fiori elements applications
- Introduction to the working principle of smart table control in SAP Fiori elements framework
- The mystery of SAP Fiori elements list report smart table column item width calculation
- As a senior abap consultant, which SAP technology can be selected as the main direction in the next step?
- SAP ui5 application developers understand the meaning of ui5 framework code
- Lazy loading mechanism of SAP ui5 module
- SAP ui5 control rendering mechanism
- HTML native events vs SAP ui5 semantic events
- Metadata implementation of SAP ui5 control metadata
- Instance data modification and reading logic of SAP ui5 control
- Implementation principle of SAP ui5 control data binding
- Comparison of three modes of data binding for SAP ui5 controls: one way, two way and onetime
- Talk about the view control ID of SAP ui5 and its similarities and differences with angular view
- For novices who know nothing about SAP ui5, what materials are better to start with?
- SAP ui5 OData rumor shredder: send two OData requests in a very short time. Will the first one be cancelled automatically?
- SAP UI search paging technology
- How to integrate third-party libraries in SAP ui5 applications: a tip for viewing web application printing debugging information on mobile devices
More Jerry’s original articles are: “Wang Zixi”: