This is 4^th blog post in the series “Mobilizing Your SAP Data with Kendo UI”. So far we have seen how to set up the environment, create a mobile application and list business partners from the SAP Sales Order System and show a particular partners details. If you want to go through the first 3 part of this series, find the links below:

Mobilizing your SAP Data with Kendo UI Mobile – Get the Environment Ready – Part 1

Mobilizing your SAP Data with Kendo UI Mobile – Building the Mobile App – Part 2

Mobilizing your SAP Data with Kendo UI Mobile – Implementing Partner Details Screen – Part 3

In this blog post we will be creating a screen to add a new partner to the business partner’s collection. So without much further ado, let’s get on with the business.

Home View Recap:

If you have been following the series, you will know by now that our home view is a listing of the Business Partners in the Sales Order system. In the footer of this view, we had created a tab in the tab strip with an add button. By clicking this add button we will navigate to “newPartnerview.html”. Here is the code snippet of home view:

The way we navigate to new partner view is just by pointing the href attribute of the anchor to “view/newPartnerView.html”. Kendo will do the navigation to the new screen by adding the default transition that is slide.

New Partner View:

Create a new HTML file in views folder and name it “newPartnerView.html”. We will create the form as below:

Notice that we use the Partner view model as the data model for new partner view. We have placed a save button in the header on the right hand side of the navbar. It is data bound to “add” method on the partner view model. The rest of the form is self-explanatory. Here is the code snippet of add method that we have added on the partner view model:

In add method, we build a JSON object and make use of Partners view model >  partners datasource and call add on data source and tell the data source to sync the changes with the server. That’s all it is there to save a record if you use Kendo UI Data Source.

Update to Partners Data Source:

In part 2 of this series, we had created Partners view model and it had a partner’s data source. At that point we just had Read URL set up. But since we want to create a new record now, we set up Create URL on the data source. Here are the changes to the partners data source:

Notice the addition of create property to transport of Kendo UI data source. We also had to change the read property a little bit. If we have to send a create request to OData service, it is expecting a CSRF token. So, before we issue read instruction, we ask for CSRF token to be sent back to the client, and after read operation is completed, we fetch the token from the header and store it for further use. During create operation, we add the token to the header using the before send method of Kendo UI data source.

Running the App:

Now, our Create New Partner screen is complete.  Time to run the app and see the output. Here is the screenshot of the new partner creation screen:

New Partner View

Summary:

In this blog post we saw an entity creation scenario. We created a data entry screen for adding a new business partner to the system. And we hardly wrote any code. With Kendo UI Data Source, handling CRUD scenarios is very easy as the data source does all the heavy lifting.