Implementation of adding and deleting row items of SAP ui5 table control based on OData model and JSON model

Time:2021-10-14

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.

Implementation of adding and deleting row items of SAP ui5 table control based on OData model and JSON model

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.

Implementation of adding and deleting row items of SAP ui5 table control based on OData model and JSON model

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:

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:

https://github.com/wangzixi-d…

Clone the entire code warehouse locally, execute the command line NPM install, and then execute node local.js:

Implementation of adding and deleting row items of SAP ui5 table control based on OData model and JSON model

Then visit the browserhttp://localhost:3002/tablede…You can:

Implementation of adding and deleting row items of SAP ui5 table control based on OData model and JSON model

The table control in the figure above is bound to the two fields contained in the OData service products entityset: name and size

Implementation of adding and deleting row items of SAP ui5 table control based on OData model and JSON model

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.

Implementation of adding and deleting row items of SAP ui5 table control based on OData model and JSON model

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.

Implementation of adding and deleting row items of SAP ui5 table control based on OData model and JSON model

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:

https://www.zhihu.com/zvideo/…

Next, you can add and delete row items of table controls based on JSON model.

Source code of this example:

https://github.com/wangzixi-d…

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:

Implementation of adding and deleting row items of SAP ui5 table control based on OData model and 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.
Implementation of adding and deleting row items of SAP ui5 table control based on OData model and 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

More Jerry’s original articles are: “Wang Zixi”:
Implementation of adding and deleting row items of SAP ui5 table control based on OData model and JSON model