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:
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:
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:
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:
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”.
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:
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:
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.