New Partner View

Mobilizing your SAP Data with Kendo UI Mobile – New Partner Screen – Part 4

This is 4th 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:

<div id="homeView" data-role="view" data-model="app.Partners">
<header data-role="header">
<div data-role="navbar">
Business Partners
<ul id="partners-listview" data-role="listview"
data-bind="source: partners"></ul>
<div data-role="footer">
<div data-role="tabstrip">
<a href="views/newPartnerView.html" data-icon="add">New</a>

view raw


hosted with ❤ by GitHub

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:

<div id="newPartnerView" data-role="view" data-title="New Partner" data-model=app.Partner>
<header data-role="header">
<div data-role="navbar">
<a data-role="backbutton" data-icon="bck" data-align="left"></a>
<span data-role="view-title"></span>
<a data-role="button" data-align="right" data-icon="save" data-bind="events:{click : add}">Save</a>
<form id="new-partner-form">
<ul data-role="listview" data-style="inset" data-type="group">
Partner Info
<li><label>Company Name: <input type="text" name="Company" /></label></li>
<li><label>Legal Form: <input type="text" name="LegalForm" /></label></li>
<li><label>Web Address: <input type="url" name="Web" /></label></li>
<li><label>Currency: <input type="text" name="Currency" /></label></li>
Contact Info
<li><label>Email: <input type="email" name="Email" /></label></li>
<li><label>Phone: <input type="text" name="Phone" /></label></li>
<li><label>Fax: <input type="text" name="Fax" /></label></li>
<li><label>Building: <input type="text" name="Building" /></label></li>
<li><label>Street: <input type="text" name="Street" /></label></li>
<li><label>City: <input type="text" name="City" /></label></li>
<li><label>Postal Code: <input type="number" name="PostalCode" /></label></li>
<select name="Country">
<option value="AR">Argentina</option>
<option value="AR">Austria</option>
<option value="BR">Brazil</option>
<option value="CA">Canada</option>
<option value="CN">China</option>
<option value="DN">Denmark</option>
<option value="FR">France</option>
<option value="DE">Germany</option>
<option value="GB">Great Britain</option>
<option value="IT">Italy</option>
<option value="IN">India</option>
<option value="JP">Japan</option>
<option value="MX">Mexico</option>
<option value="PL">Poland</option>
<option value="RU">Russia</option>
<option value="ES">Spain</option>
<option value="ZA">South Africa</option>
<option value="US">USA</option>

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:

var app = app || {};
app.Partner = (function(){
'use strict'
var partnerViewModel = (function(){
var partnerUid;
var show = function(e){
partnerUid = e.view.params.uid;
var partner =;
appSettings.sessionSettings.selectedPartner = partner;
kendo.bind(e.view.element, partner,
var addPartner = function()
var partner = {};
$("#new-partner-form").serializeArray().forEach(function(record) {
partner[] = record.value;
partner.BpRole = "01";
partner.AddressType = "02";
var startDate = new Date();
var endDate = new Date();
return {
return partnerViewModel;

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:

var partnersDataSource = new{
return appSettings.dataSettings.partnersReadUrl;
beforeSend: function(xhr) {
xhr.setRequestHeader("X-CSRF-Token", "fetch");
complete: function(xhr) {
appSettings.authSettings.token = xhr.getResponseHeader("X-CSRF-Token");
url : function()
return appSettings.dataSettings.partnersReadUrl;
beforeSend: function(xhr) {
xhr.setRequestHeader("X-CSRF-Token", appSettings.authSettings.token);
sort: {
field: "CompanyName",
dir: "asc"
schema: {
model: partnerModel
serverSorting: true,

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

New Partner View


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.


One thought on “Mobilizing your SAP Data with Kendo UI Mobile – New Partner Screen – Part 4

  1. Pingback: Mobilizing your SAP Data with Kendo UI Mobile – Wrap Up – Part 5 | telerik helper

Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s

This site uses Akismet to reduce spam. Learn how your comment data is processed.