Odata

Partners Listing

Mobilizing your SAP Data with Kendo UI Mobile – Wrap Up – Part 5

Posted by

0

This is a wrap up blog post for my series on mobilizing your SAP data with Kendo UI Mobile. So far I have written 4 parts on this series. Here are the links to the 4 parts of this series:

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

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

Things achieved so far:

Here is a quick summary of what we have achieved so far with each part of the blog posts:

Part 1 – We took a look at the SAP demo system, got the credentials for the system and set up our environment to start work on Mobilizing SAP data.

Part 2 – We started out with building a mobile app using Telerik AppBuilder which is part of the Telerik Platform. We understood the project structure and created our first screen – Business Partners Listing.

Part 3 – In Part 2 we had built the listing of Business Partners. In Part 3 we went a step forward and built the Partner Details screen. When a Partner is clicked in the listing, we navigated to details screen.

Part 4 – we built a new screen to add new Business Partner to the system.

Things ahead:

I have provided you the basic structure of the mobile application so far. What you can do is to build upon the same techniques and add additional screens. For e.g. From a Partner details screen, we can navigate to his Orders. From Orders listing screen, we can then navigate to Order details. From Order details we can navigate to Order Item details screen. And in Item details screen we can list all the items in the order as a grid. I leave it up to you to try all this out.

Screen Shots:

Partners Listing

Partners Listing

Partner Details

Partner Details

Orders Listing

Orders Listing

Order Details

Order Details

Order Items Listing

Order Items Listing

Summary:

The primary goal of the 5 part blog series on “Mobilizing SAP Data with Kendo UI Mobile” was to showcase the power of Kendo UI Mobile and the ease with which you can mobilize your SAP data. One of the highlight of Kendo UI is its ability to consume and interact with OData Service endpoint out of the box. It does all the heavy lifting in terms of read, create, update and delete.

Hope this series helps you if you are trying to mobilize your SAP data. If you need further information or want to get in touch with us to help you out – feel free to reach out to me @ lohith.nagaraj@telerik.com.

Advertisement
New Partner View

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

Posted by

1

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
</div>
</header>
<ul id="partners-listview" data-role="listview"
data-template="partnerTemplate"
data-bind="source: partners"></ul>
<div data-role="footer">
<div data-role="tabstrip">
<a href="views/newPartnerView.html" data-icon="add">New</a>
</div>
</div>
</div>

view raw

homeview.html

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>
</div>
</header>
<form id="new-partner-form">
<ul data-role="listview" data-style="inset" data-type="group">
<li>
Partner Info
<ul>
<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>
</ul>
</li>
<li>
Contact Info
<ul>
<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>
</ul>
</li>
<li>Address:
<ul>
<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>
<li><label>Country:
<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>
</select>
</label></li>
</ul>
</li>
</ul>
</form>
</div>

view raw

newPartnerView.html

hosted with ❤ by GitHub

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 = app.Partners.partners.getByUid(partnerUid);
appSettings.sessionSettings.selectedPartner = partner;
kendo.bind(e.view.element, partner, kendo.mobile.ui)
}
var addPartner = function()
{
var partner = {};
$("#new-partner-form").serializeArray().forEach(function(record) {
partner[record.name] = record.value;
});
partner.BpRole = "01";
partner.AddressType = "02";
var startDate = new Date();
var endDate = new Date();
endDate.setFullYear(9999);
partner.AddressValStartDate=kendo.toString(startDate,"yyyy-M-ddTHH:mm:ss");
partner.AddressValEndDate=kendo.toString(endDate,"yyyy-M-ddTHH:mm:ss");
app.Partners.partners.add(partner);
app.Partners.partners.sync();
}
return {
show:show,
add:addPartner
};
}());
return partnerViewModel;
}())

view raw

partnerupdated.js

hosted with ❤ by GitHub

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 kendo.data.DataSource({
type:'odata',
transport:{
read:{
url:function(){
return appSettings.dataSettings.partnersReadUrl;
},
dataType:"json",
beforeSend: function(xhr) {
xhr.setRequestHeader("X-CSRF-Token", "fetch");
},
complete: function(xhr) {
appSettings.authSettings.token = xhr.getResponseHeader("X-CSRF-Token");
}
},
create:{
url : function()
{
return appSettings.dataSettings.partnersReadUrl;
},
dataType:"json",
beforeSend: function(xhr) {
xhr.setRequestHeader("X-CSRF-Token", appSettings.authSettings.token);
},
}
},
sort: {
field: "CompanyName",
dir: "asc"
},
schema: {
model: partnerModel
},
pageSize:50,
serverPaging:true,
serverSorting: true,
});

view raw

partnersdatasourceupdates.js

hosted with ❤ by GitHub

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

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.

Partner Details Screen

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

Posted by

2

This blog post is a 3rd one in the series of “Mobilizing your SAP Data with Telerik Platform”. If you have not read my first 2 parts I suggest you take a look at those first. Here is the link to first 2 parts of this series:

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

In Part 1 I wrote about how to get started with SAP. In Part 2 I talked about building a mobile app using Kendo UI Mobile. We connected with the SAP data through the OData service that SAP Netweaver Gateway system provides. We were also able to build the first screen of the app namely the Partners listing screen. In this blog post we will look at how to build a screen that shows the details of the selected Partner. Let’s get started

Recap – Partner Item Template:

In the part 1 when we built the Partners listing screen, we used Kendo UI Mobile ListView to list the partners from the system. Each item in the ListView will be rendered by making use of an item template we provided. Just to recap that code, here is the code snippet of the item template:


<script type="text/x-kendo-template" id="partnerTemplate">
<div data-role="touch" data-bind="events: { tap: partnerSelected }">
<div style="font-size:20px;font-weight:bold">
<span>${Company}</span>
</div>
<div>${City} ${PostalCode}, ${Country}</div>
</div>
</script>

view raw

partnertemplate.html

hosted with ❤ by GitHub

Notice the usage of data-role=touch on the div and the data bind syntax where we trap the tap event and provide an event handler named “partnerSelected”. Here is the code snippet of the partnersViewModel where we have defined the partnerSelected event handler:


var partnersViewModel = (function(){
// Navigate to partner view When some partner is selected
var partnerSelected = function (e) {
app.application.navigate(appSettings.viewSettings.partnerView + '?uid=' + e.data.uid);
};
return {
partners: partnersModel.partners,
partnerSelected: partnerSelected,
};
}());

view raw

partnersviewmodel.js

hosted with ❤ by GitHub

Handling Navigation to Partner View:

We saw that we have an event handler which handles the tap event of the partners listing listview. The code just navigates to a new view called partnerView. But the view name is not hard coded. It is coming from appsettings object which contains viewsettings and the value for partnerView. Also notice that we are passing the currently selected partner UID in the querystring. UID is the unique identifier that the Kendo UI Data Source maintains for each item in its data collection. We will use this information to get a single partner object from the collection using datasource method getbyid().

First let’s update the appsettings.js with viewsettings data. Here is the code snippet:


var appSettings = {
dataSettings:
{
partnersReadUrl : "http://<your server>/sap/opu/odata/sap/ZGWSAMPLE_SRV/BusinessPartnerCollection",
},
viewSettings:
{
partnerView: "views/partnerView.html",
}
};

view raw

appsettingsupdate1.js

hosted with ❤ by GitHub

Notice that we have the URI of the new view set to “views/partnerView.html”. Let’s create a new folder under the root of the project by name “views” and create a new html file called “partnerView.html”.

PartnerView Screen

Partner View Screen

When you add a new HTML file, the file content will have bare bone HTML code. Remove that basic HTML code as we don’t need that. Next we will create the partnerView UI.

Partner View UI:

As part of the partner view screen, we will just list out all the details of a partner like name, email, phone, address, etc. Here is the code snippet of the partner view:


<div data-role="view" id="partner-view" data-show="app.Partner.show">
<header data-role="header">
<div data-role="navbar">
Partner Details
<a data-align="left" data-icon="bck" data-role="backbutton"></a>
</div>
</header>
<ul id="partner-view-container" data-role="listview" data-style="inset">
<li>
<div align=center>
<span style="font-weight:bold;font-size:20px" data-bind="text: Company">
</span>
</div>
</li>
<li>
<div>
<span><b>Legal Form</b>:</span><br><span style="margin-left:5px;" data-bind="text:LegalForm"></span>
</div>
<div>
&nbsp;
</div>
<div>
<span><b>Email</b>:</span><span style="margin-left:5px;" data-bind="text:Email"></span>
</div>
<div>
&nbsp;
</div>
<div>
<span><b>Phone</b>:</span><span style="margin-left:5px;" data-bind="text:Phone"></span>
</div>
<div>
&nbsp;
</div>
<div>
<span><b>Fax</b>:</span><span style="margin-left:5px;" data-bind="text:Fax"></span>
</div>
<div>
&nbsp;
</div>
<div>
<span><b>Web</b>:</span><span style="margin-left:5px;" data-bind="text:Web"></span>
</div>
<div>
&nbsp;
</div>
<div>
<span><b>Address</b>:</span>
<br />
<span data-bind="text:Building"></span>, <span data-bind="text:Street"></span>, <span data-bind="text:City"></span> – <span data-bind="text:PostalCode"></span>, <span data-bind="text:Country"></span>
</div>
</li>
</ul>
<div data-role="footer">
<div data-role="tabstrip">
<a href="views/ordersView.html" data-icon="orders">Orders</a>
</div>
</div>
</div>
<style>
.km-orders:after,
.km-orders:before
{
content: "\e07a";
}
</style>

view raw

partnerview.html

hosted with ❤ by GitHub

Let’s go over the code once. It’s a simple div with its data role set to view. This is how Kendo UI knows that this is a page or screen in the app. We are trapping the show method of the view through data-show attribute and is bound to Partner object’s show() method. We will see the partner object in next section. Then we have spans to output different property of the partner and we have data bound different properties to the text property of the span. Next let’s take a look at the Partner JavaScript file.

Partner JavaScript Object:

In previous section we saw that the partner view screen is data bound to partner JavaScript object. Create a new JavaScript file named “partner.js” in scripts folder. And paste the following code in the script file:


var app = app || {};
app.Partner = (function()
{
'use strict'
var partnerViewModel = (function()
{
var partnerUid;
var show = function(e){
partnerUid = e.view.params.uid;
var partner = app.Partners.partners.getByUid(partnerUid);
appSettings.sessionSettings.selectedPartner = partner;
kendo.bind(e.view.element, partner, kendo.mobile.ui)
}
return {
show:show,
};
}());
return partnerViewModel;
}())

view raw

partner.js

hosted with ❤ by GitHub

Pay close attention to show() method. Remember that when we navigate from the partners listing screen, we had passed a querystring value which was the UID of the partner object. Here in partner view show method, we retrieve the UID and piggyback on app.Partners.partners data source and use the data source method getByUid() to retrieve the partner object. Once we get the object we use kendo.bind() method to data bind it to the view. With this the view at runtime get data bound with the partner object and the spans will show the appropriate data as they have the data-bind syntax.

Running the App:

One last thing to do is adding a reference to partner.js. Add a script reference to partner.js in the script block of index.html. After adding the reference, select Run > In Simulator from the toolbar. Here is the screen shot of the partner view:

Partner Details Screen

Partner Details Screen

Don’t question me on the UI – I am a design handicap when it comes to UX. But we now have 2 screens as part of the application itself. We now have the Partners Listing screen and Partner Details screen. And we are making progress.

Summary:

In this blog post we looked at how to create Partner details screen. We created a HTML page and a corresponding JavaScript file. With the concept of DataBinding we were able to bind different properties of a Partner object to different span on the view. In the next part of this blog series, we will take a look at how to create a new partner right from the mobile app itself. So stay tuned.

Business Partners Listing Screen

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

Posted by

3

This is the second post in the series of “Mobilizing Your SAP Data with Kendo UI Mobile”. If you haven’t read my first post, it’s a good idea to read it now and can be found here. In the first post I talked about getting the environment ready. In this second post I will be writing about how to create a mobile application with Kendo UI Mobile for the SAP data. So if that’s sounds interesting to you, stay along with me for the rest of the blog post.

Get the tools of the trade:

As part of Telerik Platform, we offer a service called AppBuilder. AppBuilder is a complete IDE for building a Hybrid Mobile Application using Kendo UI Mobile. Using AppBuilder you can build iOS, Android and Windows Phone 8 hybrid mobile apps using a single pure HTML5, CSS & JavaScript codebase. Kendo UI Mobile is an adaptive rendering Mobile control set that will be used for the UI elements of the mobile app. You can know more about Kendo UI Mobile here. Visit the AppBuilder product overview page and sign up for a trial. You will have 30 days to try out AppBuilder and post that we will downgrade you to a starter tier. In starter tier you are allowed to build only 2 Mobile apps.

Telerik AppBuilder

Telerik AppBuilder

 

IDE Choices:

AppBuilder provide 5 IDE choices and you can choose the one that suits you best. Here are the choices:

  1. In-Browser Client – develop hybrid mobile apps on the go with a web client that runs on all browsers
  2. Windows Client – Native windows application
  3. Visual Studio Extension – Extension for Visual Studio which provides all AppBuilder capabilities within VS
  4. Sublime Text Package – Package for Sublime Text Editor
  5. Command-Line Interface – access AppBuilder capabilities from command line on Windows or OS X

For the sake of this blog post I will be using the Windows Client of AppBuilder.  I already have signed up for Telerik Platform and I have created a workspace in the Platform and will create a new hybrid mobile app in that workspace. To know more about the Telerik platform, check our documentation here.

Create a Mobile App:

Now that we have the required tool for creating an app, lets get going. I am assuming at this point of time you have the AppBuilder Windows Client installer. Launch the AppBuilder windows client application. Since this is the first time, it will ask you for your Telerik Platform credentials.

Telerik Platform Credentials

Telerik Platform Credentials

Once you log in with your credentials, you will be presented with a “New” project creation dialog. From here you can select “Hybrid” > “Kendo UI Mobile App”. Provide a name for your mobile app and click create.

AppBuilder New Project Dialog

AppBuilder New Project Dialog

Here is the project structure that the IDE creates. Notice that Kendo UI Mobile control is added by default as we had selected Kendo UI Mobile App.

AppBuilder Project Structure

AppBuilder Project Structure

When you create a new project, IDE adds a dummy application out of the box. The app contains Home, Login, Location and Weather screen. In the scripts folder, you will find four scripts namely app.js, location.js, login.js and weather.js. The app.js contains the Kendo Mobile app creation code and other script files for the respective screens. At this moment if you just run the app by selecting Run > In Simulator or by pressing F5 in the IDE, you will see the following output:

Kendo UI Default Mobile App

Kendo UI Default Mobile App

We will clean up whatever default code has been created and start building our UI for Sales Order application.

Creating Mobile Application Layout:

Open the index.html and clear off everything that was added by default. Keep the reference to Kendo UI stylesheet, Cordova JavaScript file, jquery and app.js and remove rest of the things. The index.html, after the changes should look like below:

Cleaned Up Index Page

Cleaned Up Index Page

Now that we have a clean slate, let’s get started with our UI building process. First we will create a mobile layout that is required for our app.


<!–Layout–>
<div data-role="layout" data-id="applayout">
<!–Header–>
<div data-role="header">
<div data-role="navbar">
<span data-role="view-title"></span>
</div>
</div>
</div>

view raw

mobile-layout.html

hosted with ❤ by GitHub

Let’s go over the code. We have a div whose data role is set to layout and we have given it an identifier. Then we create a header div and place a navbar inside it. Navbar will contain a place holder for the title that will be shown for the current active screen. The keywords “layout”,”navbar” and “view-title” are Kendo UI specific and the Kendo UI Mobile app engine understand what needs to be done. Now that we are done with the markup for layout, we need to let Kendo UI mobile app engine know that it has to use this layout as a default layout for the app. Open app.js and replace the following code:

app.application = new kendo.mobile.Application(document.body, { layout: “tabstrip-layout” });

with

app.application = new kendo.mobile.Application(document.body, { layout: “applayout” });

Next  we will create our first screen in the app which will list all the partners in the Sales Order system

Create Partners Listing Screen:

The Sales Order System that we are using for this demo app has a Business Partners endpoint and lists all the partners in the system. So our first screen would be to list all partners alphabetically as a mobile list view. So let’s start coding. First let’s create a view and within the view we will keep mobile list view. I will used MVVM pattern and create a view model for this screen. The Kendo UI Mobile Views provides a way to bind the view model to the view itself. Here is the markup for the view:


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

view raw

homeview.html

hosted with ❤ by GitHub

It’s a simple div with a data role set to “View” and data model set to “app.Partners”. We will create the Partners view model next. Then I have a header where I have the navbar with a title. Then I create a mobile list view with an unordered list. By setting the data role of <ul> as listview, Kendo UI engine will work its magic at runtime and convert the <ul> to a mobile list view. The mobile list view requires item template which we will have to create next. The data source to listview is set to “partners” property on the view model.

Partner Item Template:

For the list view to display each item, it needs a template to be provided. Here is a simple template I have created:


<script type="text/x-kendo-template" id="partnerTemplate">
<div data-role="touch" data-bind="events: { tap: partnerSelected }">
<div style="font-size:20px;font-weight:bold">
<span>${Company}</span>
</div>
<div>${City} ${PostalCode}, ${Country}</div>
</div>
</script>

view raw

partnertemplate.html

hosted with ❤ by GitHub

You will notice the usage of ${} syntax. It is Kendo UI template syntax where you are telling the rendering engine that at run time it has to get the value of the property of the currently bound data object and emit that into the template.

Partners View Model JavaScript File:

We will create a view model which exposes the business partner’s related functionality like listing and details of a business partner. Add a new JS file in the Scripts folder and name it Partners.js. Here is the code snippet for the  view model:


var app = app || {};
app.Partners=(function(){
'use strict'
//functionality here
}());

view raw

partnervm-initial.js

hosted with ❤ by GitHub

As of now it’s a place holder and we will build the functionality as we proceed further.

Partner Data Model Object:

I will model the Business Partner entity that is exposed by the SalesOrder system as a JavaScript object in the partners.js file. Here is how my JavaScript object looks like:


var partnersModel=(function(){
//Data Model
var partnerModel ={
id:"BusinessPartnerID",
fields:{
Company:{field:'CompanyName'},
Email:{field:'EmailAddress'},
Phone:{field:'PhoneNumber'},
Fax:{field:'FaxNumber'},
Web:{field:'WebAddress'},
LegalForm:{field:'LegalForm'},
Currency:{field:'CurrencyCode'},
City:{field:'City'},
PostalCode:{field:'PostalCode'},
Street:{field:'Street'},
Building:{field:'Building'},
Country:{field:'Country'},
}
};
//Data Source
}());

view raw

partnermodel.js

hosted with ❤ by GitHub

Next we need to create a data source to connect to the OData service exposed by the Sales Order system. I am using Kendo UI Data source as my data source in the application. In order to read data from a service end point we need just set the URI on transport > read property of the data source. I will add this to partner data model itself. Here is the code snippet with the data source added:


var partnersModel=(function(){
var partnerModel ={
id:"BusinessPartnerID",
fields:{
Company:{field:'CompanyName'},
Email:{field:'EmailAddress'},
Phone:{field:'PhoneNumber'},
Fax:{field:'FaxNumber'},
Web:{field:'WebAddress'},
LegalForm:{field:'LegalForm'},
Currency:{field:'CurrencyCode'},
City:{field:'City'},
PostalCode:{field:'PostalCode'},
Street:{field:'Street'},
Building:{field:'Building'},
Country:{field:'Country'},
}
};
var partnersDataSource = new kendo.data.DataSource({
type:'odata',
transport:{
read:{
url:function(){
return appSettings.dataSettings.partnersReadUrl;
},
dataType:"json",
},
},
sort: {
field: "CompanyName",
dir: "asc"
},
schema: {
model: partnerModel
},
pageSize:50,
serverPaging:true,
serverSorting: true,
});
return {
partners: partnersDataSource
}
}());

view raw

partnermodel-complete.js

hosted with ❤ by GitHub

Believe it or not, that data source is all you need to connect to any service which returns data in JSON format. Notice that for reading a service I am making use of a appSettings object. That is nothing but a simple JavaScript file with a bunch of settings. We will shortly take a look at that.

Partners View Model Object:

Now that we have the Partner Data Model and Data Source ready, we now create the partners view model which will expose a property called partners and partners is nothing but the instance of the kendo UI data source in the partner data model object. Here is the code snippet:


var partnersViewModel = (function(){
// Navigate to partner view When some partner is selected
var partnerSelected = function (e) {
app.application.navigate(appSettings.viewSettings.partnerView + '?uid=' + e.data.uid);
};
return {
partners: partnersModel.partners,
partnerSelected: partnerSelected,
};
}());

view raw

partnersviewmodel.js

hosted with ❤ by GitHub

Here is the complete code listing of Partners.js we have implemented so far:


var app = app || {};
app.Partners=(function(){
'use strict'
var partnersModel=(function(){
var partnerModel ={
id:"BusinessPartnerID",
fields:{
Company:{field:'CompanyName'},
Email:{field:'EmailAddress'},
Phone:{field:'PhoneNumber'},
Fax:{field:'FaxNumber'},
Web:{field:'WebAddress'},
LegalForm:{field:'LegalForm'},
Currency:{field:'CurrencyCode'},
City:{field:'City'},
PostalCode:{field:'PostalCode'},
Street:{field:'Street'},
Building:{field:'Building'},
Country:{field:'Country'},
}
};
var partnersDataSource = new kendo.data.DataSource({
type:'odata',
transport:{
read:{
url:function(){
return appSettings.dataSettings.partnersReadUrl;
},
dataType:"json",
},
},
sort: {
field: "CompanyName",
dir: "asc"
},
schema: {
model: partnerModel
},
pageSize:50,
serverPaging:true,
serverSorting: true,
});
return {
partners: partnersDataSource
}
}());
var partnersViewModel = (function(){
// Navigate to partner view When some partner is selected
var partnerSelected = function (e) {
//TODO: implementation for screen navigation
};
return {
partners: partnersModel.partners,
partnerSelected: partnerSelected,
};
}());
return partnersViewModel;
}());

view raw

partners-complete.js

hosted with ❤ by GitHub

App Settings:

In the code snippet for data source, the URL to read data was got from data settings of appsettings object. I have created a new JavaScript file “settings.js” in the scripts folder. Here is the code snippet for the same:


var appSettings = {
dataSettings:
{
partnersReadUrl : "http://<your server>/sap/opu/odata/sap/ZGWSAMPLE_SRV/BusinessPartnerCollection",
}
};

view raw

appsettings.js

hosted with ❤ by GitHub

Running the app:

Now that we have finished creating the pieces of the application there is one last thing to do. We need to add reference to partner.js & settings.js in index.html. Once we add that, just press F5 on the IDE and the simulator will simulate the app we just built. Here is the screen shot of the app being simulated in iOS platform:

Business Partners Listing Screen

Business Partners Listing Screen

 Wrap Up:

We have successfully created a mobile app which connects to a SAP backend and in particular a Sales Order system using Netweaver Gateway OData service and built a listing screen in the app. The listing screen is listing the business partners that are available in the system. One thing to note is how easy it was to create the app. The main point of this whole exercise is that of the Kendo UI Data Source which makes it super easy to connect to a service end point, invoke, retrieve data and bind it to the control. I didn’t sweat a lot to achieve this. So this is a good starting point. Next up we will create the Business Partner Details page. Stay tuned till my next blog post.

Inserting Record in Database from Kendo UI DataSource using OData

Posted by

3

While creating hybrid mobile application or a web application, we always come across requirement when we need to insert a record or create a record in the database. In this post we will take a look on creating a record from Kendo UI DataSource. Kendo DataSource will make a call to OData Service to insert a record. Essentially structure we are assuming in the post is as given in below diagram,

image

Let us follow step by step approach to perform insertion. Very first let us make variables to holding URLS to create and read data from OData service. In your case these URL values will be as per your service

image

Now we need to create Kendo DataSource. While creating Kendo data source we can configure it for reading and creating records.

To read values in the transport of data source set the value of read property with READ_URL. In below image you will notice that we are setting type of data source as odata because we are interacting with database via OData service. To read data you need to set following attribute of Kendo datasource.

image

We want to configure Kendo datasource for creating record also. For that we need to configure create property of Kendo datasource. In create property is a JSON object and essentially it takes following parameters

  1. url: OData url to created record.
  2. type : to create a record type should be POST
  3. datatype : this should be set to json or xml.
  4. contentType : This attribute is set for the content type

image

For OData version 2.0 contentType should be set to application/json .However in case of OData version 3.0 it should be set to application/json;odata=verbose.

image

After configuring Kendo datasource to create record, we need to set the schema of the kendo datasource. We must set schema of data source to successfully perform create record operation. In the schema, we need to create model defining different fields or columns. We need to provide type of the columns. Other types can be number, date, and string. Make sure you are setting total property of schema with count.

image

After setting all the required properties code to create Kendo data source is as following,


var READ_URL = "http://localhost:62272/SudentModelService.svc/Peoples";
var CREATE_URL = "http://localhost:62272/SudentModelService.svc/Peoples";
var dataSource = new kendo.data.DataSource({
type: "odata",
transport: {
read: {
url: READ_URL
},
create: {
url: CREATE_URL,
type: "POST",
dataType: "json",
contentType: "application/json;odata=verbose"

}
},
schema: {
total: "count",
model: {
id: "PersonID",
fields: {
PersonID: {

type: "number"
},
LastName: {
type: "string"
},
FirstName: {
type: "string"
}

}
}
}

});

As of now we have created data source to perform read and create operation. Now to create a record we need to create an item. Item can be created from reading values from the view. After creating item call add function on data source. Last step is to sync data with the server. This can be done by callinf sync function on the datasource.


var item = {
FirstName: $("#txtFirstName").val(),
LastName: $("#txtLastName").val()
}

dataSource.add(item);
dataSource.sync();
console.log("done");

In this way we can create or insert a record in database from Kendo UI data source using OData service. I hope you find this post useful. Thanks for reading.

How to apply filter in creating Kendo UI Data Source from OData

Posted by

1

I was working on an application and there was a requirement in which I had to apply filter while fetching data from the server using ODATA. I had two choice to achieve this

  1. Construct ODATA URL with filter applied
  2. Apply filter in Kendo UI Data Source

In this post we will discuss how we could apply filter while creating Kendo UI DataSource reading OData feed.

We can create data source reading ODATA feed as following. Below we are creating data source reading ODATA feed of Netflix


var movieTitleData;
movieTitleData = new kendo.data.DataSource(
{
type: "odata",
endlessScroll: true,
batch: false,
transport: {
read: {
url: "http://odata.netflix.com/Catalog/Titles?$select=Id,ShortName,BoxArt&$top=10",
dataType: "jsonp",

data: {
Accept: "application/json"
}
}
}

});

On inspecting request URL you will find that URL to fetch data is getting constructed as following. We are fetching top 10 movies title from Netflix

image

Now assume there is a requirement to fetch information of a particular movie with given Id. We can do that by applying filter while creating the KendoUI DataSource. We can apply filter to fetch movie of particular id as given below.

image

While applying filter we need to make sure that serverFiltering is set to true.

image

In Filter,

  1. Id is the column on which filter is being applied
  2. eq is operator to apply filter
  3. value is filter value

Kendo UI data source with filter applied can be created as following.


var moviedetailData = new kendo.data.DataSource(
{
type: "odata",
endlessScroll: true,
serverFiltering: true,
transport: {
read: {
url: "http://odata.netflix.com/Catalog/Titles?$select=Id,ShortName,BoxArt,AverageRating,ReleaseYear,Synopsis",
dataType: "jsonp",

data: {
Accept: "application/json"
}

}
},
filter: { filters: [{ field: "Id", operator: "eq", value: query }] }

});

While creating above KendoUI data source

  1. Data is fetched from Odata feed of Netflix
  2. Filter is applied on Id column of Netflix data source
  3. To apply filter at server side serverFiltering attribute is set to true

On inspecting request URL you will find that URL to fetch selected movie is getting constructed as following. We are fetching a particular movie on given id of the movie.

image

You will find that URL being constructed to fetch Odata feed is containing the filter query. In this way we can apply filter while creating Kendo UI DataSource reading an OData feed. I hope you find this post useful. Thanks for reading.

How to format DateTime type column from OData in Kendo UI Template

Posted by

0

In this post we will look into, the way to format DateTime type columns of OData feed as string in Kendo UI Template.

For DateTime type of columns, OData returns number of seconds from January 1, 1970. Most likely you will be getting returned value as below,

image

Obviously you need to format returned date before displaying. You can format that using

kendo.toString ()

See demo of kendo.toString() on jsfiddle


StartTime: #= kendo.toString(
 new Date(
 new Date(
 parseInt(returnedTimeValue.ToTime.replace("/Date(", "").replace(")/",
 ""),
 10))),"g")#

You will get date formatted as following.

clip_image001

Explanation of code

Now let us examine that what exactly we are doing in above snippet. There are five steps being performed

  1. First replacing /Date( from returned value with empty string
  2. Next replacing )/ from returned value with empty string
  3. Parsing remaining returned value as integer
  4. Creating date using returned parsed integer
  5. Passing created date to kendo.string to format as desired.

In this way you can format a ODATA DateTime column using kendo.string. I hope you find this post useful.

Creating Netflix Movie Explorer Application using KendoUI and OData

Posted by

1


Objective

In this post series we are going to make Netflix Movie Explorer App. We will use Kendo UI OData feed of Netflix to create application. Final application (after this post) will look like as following,

And on tapping of a movie, we will be navigated to

In order to create this application we will explore following in this post

  • Working with KendoUI Mobile ListView
  • Working with KendoUI Mobile View
  • Working with kendoUI Mobile View Layout
  • Working with Navigation between views
  • Working with creating datasource and OData.

To start with we need to add following reference on HTML page

After adding all the required references let us try to create a Mobile View. A Mobile view contains single HTML page with multiple mobile views on that. For example you can have LoginView, ShowDataView ,AboutView . All mobile views are a div element with data-role property set to view. A View can be created as following,

You can set default view of the application in Application Startup. Let us set default view of the application as LoginView. That can be set as following,

Additionally we can set layout of the mobile application as well. There are two ways we can set the layout. Either we can set on the application level or we can set on particular view level. Let us set layout on application level. This can be set as following,

We have set the layout of the application. Now we need to create application layout we set. A Layout can be created as following,

  • Create a <div> element.
  • Set data-role property as “layout”

Hence layout can be created as following,

A Layout can have a Header and Footer. We can define Header and Footer in layout as following,

Let us put a back button in the header. A back button can be put as following

image_thumb26

We have put nav bar and inside that a back button as header. A nav bar can be created as following

  • Create a <div> element.
  • Set data-role property to “navbar”

Inside the navigation bar we are putting a back button. That can be put as <a> link with setting data-role as “backbutton”

As of now we are done with navigation bar in header. Now let us create TabStrip in the footer.

image_thumb29

A TabStrip can be created as following,

  • Create a <div> element
  • Set data-role property to “tabstrip”

Inside “tabstrip” we can have buttons to navigate between the pages. We are putting three buttons to navigate. We can specify view to navigate in href property of <a>.

  • View to be navigated can be set by providing view id with hash tag as href property.
  • Data-icon can be set to provide a specific look to button.

Putting all the codes together,

<html>
 <head>
 <title>
 Test Application
 </title>
 <link href="http://cdn.kendostatic.com/2012.1.515/styles/kendo.common.min.css" rel="stylesheet" />
 <link href="http://cdn.kendostatic.com/2012.1.515/styles/kendo.default.min.css" rel="stylesheet" />
 <link href="http://cdn.kendostatic.com/2012.1.515/styles/kendo.mobile.all.min.css" rel="stylesheet" />
 <script src="js/jquery.min.js" type="text/javascript"></script>
 <!-- Kendo UI Scripts -->
 <script src="http://cdn.kendostatic.com/2012.1.515/js/kendo.all.min.js" type="text/javascript"></script>
 <script src="http://cdn.kendostatic.com/2012.1.515/js/kendo.mobile.min.js" type="text/javascript"></script>
 </head>
 <body>
 <div data-role="view">
 <div data-role="header">Header</div>
 Hello world!
 <div data-role="footer">Footer</div>
 </div>

<div data-role="view" id="LoginView" >
 <h1>This is a Login View </h1>
 </div>
 <div data-role="view" id="DataView" >
 <h1>This is a Data View </h1>
 </div>
 <div data-role="view" id="AboutView" >
 <h1>This is a About View </h1>
 </div>
 <div data-role="layout" data-id="TestAppLayout">
 <div data-role="header">
 <div data-role="navbar">
 <a data-role="backbutton" data-align="left">
 Back
 </a>
 Test Application
 </div>
 </div>
 <div data-role="footer">
 <div data-role="tabstrip">
 <a href="#LoginView" data-icon="settings">Login</a>
 <a href="#DataView" data-icon="download">Data</a>
 <a href="#AboutView" data-icon="home">About</a>
 </div>
 </div>
 </div>

<script type="text/javascript">
 var app = new kendo.mobile.Application($(document.body), {
 initial: "LoginView",
 layout: "TestAppLayout"
 }
 );
 </script>

 </body>
</html>
</html>

Now go ahead and run the application. In mobile browser you should be getting output as following

image_thumb32

As of now we have set layout at the application level. If we want we can have different layout for different view. Let us try that by giving different layout to DataView.

Create specific layout for DataView as following,

image_thumb35

We can set layout for DataView as following,

image_thumb38

If you notice here we have set layout at application level as well as view level. When layout is set at both levels then view level layout takes precedence over application level layout. After doing above modifications we should be getting following output,

image_thumb41

On clicking of Data, you should be getting below output. If you notice Back button from header is working as expected.

image_thumb44

Now let us try to show some data from service. In this case we will be displaying Movie details from OData feed of Netflix.

You can find Title of all the Movies from Netflix ODATA from below link.

http://odata.netflix.com/Catalog/Titles

Very first we need to create DataSource reading data from ODATA feed. We can create KendoUI Datasource as following

image_thumb47

  • Instance of kendo.data.DataSource being created
  • Since data being fetched from ODATA feed so type is set to odata
  • Pagesize property is set to tell server how many records need to be fetched. In this case it is 5.
  • In Trasnport property we need to provide URL of ODATA feed.

Once we created datasource we need to create Template. In template we say how we want to show data in listview. A template can be created as following

image_thumb50

In template we set property of DOM elements with the property of datasource. For example we want to display name of the movie. We are setting that with datasource property data.Name. Here data is name of the datasource and Name is property. A very important point need to be noticed is href value of <a> DOM element. We are setting that to DataDetailView. On tap user will be navigated to this view.

As of now we have created datasource and temple. Now let us create listview. To create a listview modify data div as following,

image_thumb53

A listview can be created by setting data-role property of <ul> as listview. If you notice we are setting data-init property of view as getMovieDetails. In getMovieDetails function we are fetching data from OData feed and setting the template as following. We are setting template and datasource value in the property.

image_thumb56

Combining all the discussions together and putting all the codes together we should have following code in HTML file.

<html>
 <head>
 <title>
 Test Application
 </title>
 <link href="http://cdn.kendostatic.com/2012.1.515/styles/kendo.common.min.css" rel="stylesheet" />
 <link href="http://cdn.kendostatic.com/2012.1.515/styles/kendo.default.min.css" rel="stylesheet" />
 <link href="http://cdn.kendostatic.com/2012.1.515/styles/kendo.mobile.all.min.css" rel="stylesheet" />
 <script src="js/jquery.min.js" type="text/javascript"></script>
 <!-- Kendo UI Scripts -->
 <script src="http://cdn.kendostatic.com/2012.1.515/js/kendo.all.min.js" type="text/javascript"></script>
 <script src="http://cdn.kendostatic.com/2012.1.515/js/kendo.mobile.min.js" type="text/javascript"></script>

 </head>
 <body>
 <div data-role="view">
 <div data-role="header">Header</div>
 Hello world!
 <div data-role="footer">Footer</div>
 </div>

<div data-role="view" id="LoginView" >
 <h1>This is a Login View </h1>
 </div>

<div data-role="view" id="DataView" data-init="getMovieDetails" >
 <ul id="movieTitleView" data-role="listview"></ul>
 </div>

 <div data-role="view" id="AboutView" >
 <h1>This is a About View </h1>
 </div>
 <div data-role="layout" data-id="TestAppLayout">
 <div data-role="header">
 <div data-role="navbar">
 <a data-role="backbutton" data-align="left">
 Back
 </a>
 Test Application
 </div>
 </div>
 <div data-role="footer">
 <div data-role="tabstrip">
 <a href="#LoginView" data-icon="settings">Login</a>
 <a href="#DataView" data-icon="download">Data</a>
 <a href="#AboutView" data-icon="home">About</a>
 </div>
 </div>
 <script type="text/javascript">
 var app = new kendo.mobile.Application($(document.body), {
 initial: "LoginView",
 layout: "TestAppLayout"

 }
 );
 </script>
<script id="movieTemplate" type="text/x-kendo-template">
 <div>
 <img src=${data.BoxArt.MediumUrl} height="50" width="50" />
 <strong>${data.Name}</strong>
 <a href="\#DataDetailView?Id=#:data.Id#"" data-role="detailbutton" data-style="detaildisclose"></a>
 </div>
 </script>
<script>
 var data;
 data = new kendo.data.DataSource(
 {
 type: "odata",
 pageSize: 5,
 endlessScroll: true,
 scrollTreshold: 30,
 transport:{
 read: {
 url: "http://odata.netflix.com/Catalog/Titles",
 dataType: "jsonp",

data: {
 Accept: "application/json"
 }
 }
 }

 });
 var getMovieDetails = function () {
 $("#movieTitleView").kendoMobileListView(
 {
 template: kendo.template($("#movieTemplate").html()),
 endlessScroll: true,
 scrollTreshold: 30,
 dataSource: data
 });
 };
</script>

 </body>
</html>

On running we should be getting output as following

image_thumb59

On tap of Data button we should get below output

image_thumb62

At this point of time of you tap on the detail button you will be getting an exception because we have not created detail view yet. Let us create detail view

image_thumb65

Here we are setting different layout to DataDetailView. Let us create layout as below,

image_thumb68

This layout structure is same as we discussed previously. Now we need to write function shwDeatilsView function. In this function we will fetch selected data from the server on basis of Movie selected in first view.

image_thumb71

This function is quiet simple. First we are reading query parameter as following,

image_thumb74

After that we are making a call to server to fetch specific detail of the movie. Server call is as following. We are setting filter to fetch specific record.

image_thumb77

Once data is being fetched from the server, we need to initialize downloaded data to Movie Detail template. This template will tell how we are going to show data in movie detail page.

image_thumb80

We need to write MovieDetailtemplate as following,

image_thumb84

Combining all the discussions together and putting all the codes together we should have following code in HTML file.


<html>
 <head>
 <title>
 Test Application
 </title>
 <link href="http://cdn.kendostatic.com/2012.1.515/styles/kendo.common.min.css" rel="stylesheet" />
 <link href="http://cdn.kendostatic.com/2012.1.515/styles/kendo.default.min.css" rel="stylesheet" />
 <link href="http://cdn.kendostatic.com/2012.1.515/styles/kendo.mobile.all.min.css" rel="stylesheet" />
 <script src="js/jquery.min.js" type="text/javascript"></script>
 <!-- Kendo UI Scripts -->
 <script src="http://cdn.kendostatic.com/2012.1.515/js/kendo.all.min.js" type="text/javascript"></script>
 <script src="http://cdn.kendostatic.com/2012.1.515/js/kendo.mobile.min.js" type="text/javascript"></script>

 </head>
 <body>
 <div data-role="view">
 <div data-role="header">Header</div>
 Hello world!
 <div data-role="footer">Footer</div>
 </div>

<div data-role="view" id="LoginView" >
 <h1>This is a Login View </h1>
 </div>

<div data-role="view" id="DataView" data-init="getMovieDetails" >
 <ul id="movieTitleView" data-role="listview"></ul>
 </div>

 <div data-role="view" id="AboutView" >
 <h1>This is a About View </h1>
 </div>
 <div data-role="layout" data-id="TestAppLayout">
 <div data-role="header">
 <div data-role="navbar">
 <a data-role="backbutton" data-align="left">
 Back
 </a>
 Test Application
 </div>
 </div>
 <div data-role="footer">
 <div data-role="tabstrip">
 <a href="#LoginView" data-icon="settings">Login</a>
 <a href="#DataView" data-icon="download">Data</a>
 <a href="#AboutView" data-icon="home">About</a>
 </div>
 </div>
 </div>
 <div data-role="layout" data-id="TestAppDataLayout">
 <div data-role="header">
 <div data-role="navbar">
 <a data-role="backbutton" data-align="left">
 Back
 </a>
 Data
 </div>
 </div>
 <div data-role="footer">
 <div data-role="tabstrip">
 <a href="#DataView" data-icon="download">Save</a>
 </div>
 </div>
 </div>
 <div data-role="view" id="DataDetailView"
 data-layout="TestAppDataLayout"
 data-show="showDetailsView">
 <h1>This is a Data Detail View </h1>
 </div>

<script type="text/javascript">
 var app = new kendo.mobile.Application($(document.body), {
 initial: "LoginView",
 layout: "TestAppLayout"

 }
 );
 </script>

<script id="movieTemplate" type="text/x-kendo-template">
 <div>
 <img src=${data.BoxArt.MediumUrl} height="50" width="50" />
 <strong>${data.Name}</strong>
 <a href="\#DataDetailView?Id=#:data.Id#"" data-role="detailbutton" data-style="detaildisclose"></a>
 </div>
 </script>

<script id="movieDetailTemplate" type="text/x-kendo-template">
 <div>
 <img src=${data.BoxArt.MediumUrl} height="100" width="100"/>
 <br/>
 Movie Name : <strong>${data.Name}</strong>
 <br/>
 ${data.Synopsis}
 </div>
 </script>
 <script>
 var data;
 data = new kendo.data.DataSource(
 {
 type: "odata",
 pageSize: 5,
 endlessScroll: true,
 scrollTreshold: 30,

 transport:{
 read: {
 url: "http://odata.netflix.com/Catalog/Titles",
 dataType: "jsonp",

data: {
 Accept: "application/json"
 }
 }
 }

});

console.log(data);

 var getMovieDetails = function () {

$("#movieTitleView").kendoMobileListView(
 {
 template: kendo.template($("#movieTemplate").html()),
 endlessScroll: true,
 scrollTreshold: 30,
 dataSource: data
 });
 };
 var movieDetailTemplate = kendo.template($("#movieDetailTemplate").text());

function showDetailsView(e) {
 var view = e.view;
 console.log(view.params.Id);
 var query = view.params.Id.toString();
 var data1 = new kendo.data.DataSource(
 {
 type: "odata",
 serverPaging: true,
 serverFiltering: true,
 pageSize: 50,
 transport: {

 read: "http://odata.netflix.com/Catalog/Titles"
 },

filter: { filters: [{ field: "Id", operator: "eq", value: query}] }
 });
 data1.read();
 data1.fetch(function () {
 var item = data1.at(0);
 console.log(item);
 view.scrollerContent.html(movieDetailTemplate(item));
 kendo.mobile.init(view.content);
 });
 }

</script>

 </body>
</html>

Now let us go ahead and run application

image_thumb87

Now when we select a movie, we will go into detail of that movie

image_thumb90

Conclusion

Yes detail view is not that immersive. In second part of this post, we will make it more immersive and implement much more features. I hope you like this post. Thanks for reading.