My Little Kony

stephen_kringas · ‎02-04-2014

* Disclosure - I'm not affiliated with Kony Inc. At my current client I've built Mobile Apps using Sky Technologies (who Kony purchased in 2012). After attending a training course for Kony Dev and I wanted to share that knowledge and show one of the many ways that you can "Mobilize" your SAP data via Gateway.

Introduction

The number of options available for accessing your SAP data/systems via mobile devices has increased dramatically in recent years.

One of those options is to use the KonyOne platform. Previously it has been difficult to get access to Kony's development tools/platform unless you happened to work at one of their customers or partners. Recently though Kony has started to offer free trials to its new Development Cloud platform

One of benefits of the Kony development allows you to target a large number of channels all using the same code base that is written using JavaScript. The KonyOne Studio is an Eclipse based IDE.

KonyOne has 3 general approaches for building mobile applications that integrate with SAP -

Sky Mobile Add-In (Kony acquired Sky Technologies in August 2012)
SAP NetWeaver Gateway
SAP JCo

Similar to an earlier blog I wrote which used Appcelerator, I'm going to build a simple Kony Master / Detail application which consumes the Trial SAP Gateway Business Partner service.

Prerequisites

Kony Cloud Development Cloud account
Local Development Setup (Applicable SDK's installed, Kony IDE & Server following the install guides)
Access to the Trial Gateway services or similar -

http://scn.sap.com/docs/DOC-40986

http://scn.sap.com/docs/DOC-31221

Giddy Up Kony....

1. Create the Application / UI

a. Create the Application / Project

Lets start by creating the Application/Project in KonyOne Studio

Below is the default structure for newly created projects -

Sub-Folder	Description
Forms	Where you create the UI for the application. The forms are separated out into 3 sub categories Mobile / Tablet / Desktop
Modules	Place custom JS files in here (By default the konylibrary.js file is included)
Resources	Application assets such as images etc.
Services	Can define different services that the application will utilize

b. Define 2 Mobile Forms for the UI

Master Form

This will display the Business Partner No. and Names returned from the Gateway service. Using drag and drop you place the widgets on the form. Also make sure you update the ID's of each UI element to something more meaningful than the default generated ID. This will help you reference the correct widget when coding & mapping data in the form.

The Segment Widget is used for displaying lists/tables of data. In addition to the BP Number & Name, we'll define 4 hidden columns to store additional data which won't be visible to the user. These hidden columns will be used later to pass data to the Detail Form

Detail Form

When the user selects a specific Business Partner, the application will navigate to the detail form which shows additional information. The form will comprise of Labels, Buttons and a TextArea widget to display the relevant information & actions (Click to dial, email etc).

2. Define Business Partner Service

Now we need to create a JSON service definition which will connect to the Gateway service to retrieve the Business Partner details. The service definition will be deployed to the Kony Development Cloud.

a. Define the JSON Service

Firstly navigate to the JSON service definitions and select the "Add Service" option ->

The application is going to be utilising the following URL to retrieve the BP Data ->

https://sapes1.sapdevcenter.com/sap/opu/odata/IWBEP/GWDEMO/BusinessPartnerCollection?$format=$format...

b. Define the Input & Output Parameters

Kony uses the "$" symbol as a placeholder for input parameters so I used a little work around to call the service with the parameters I needed.

For the input IDs in the below screenshot -

format - Will be used to append the OData query option "$format" to the URL
formatv - Will specify the response format; in our case we'll be requesting the response in JSON format

Enter the UserID / Password and click the "Get Response" button

In the Response tab at the bottom of the screen, it shows the data that has been returned from the service. We can use this information to define the output structure/collection that will be used in the application.

This is configured on the "Output Parameters" tab.

After defining the output structure, click the test button to validate the returned data (based on your test input parameter values) and output structure are as expected.

*NOTE - This is sample data being returned from the Trial SAP system *

c. Add the Service to MyLittleKony

Once you are happy you need to "Add" the newly defined service to your application so it is available for use. The service definition can also be reused for other applications in the future.

d. Deploy the Service to the Kony Development Cloud

Now we need to publish the service to our Kony Development Cloud by following the steps below -

Now the service has been successfully deployed and now is ready for consumption.

3. Implement logic to Consume the Service

a. Call the Gateway Service on initialisation

On the Master Form properties, find the Event "init". We'll use this event hook to call the Gateway service when the application is initialised.

In the Event Editor you build the action sequence that will be executed when the applicable event hook/action has been triggered.

For this init action sequence I've defined the following ->

Action Step	Description
Snippet:kony.appl...	This is a small code snippet which is executed first to display the Loading/Processing widget-> kony.application.showLoadingScreen()
Asynchronous Service: GatewayBpQuery	Select which service we want the application to call. Also by clicking the "Open Mapping Editor" we can define the values we want for the 2 input parameters
Decision: status == 400 & true	When the callback sequence returns status of 400, the data has been returned from the service and the "true" action sequence will be executed
Snippet:kony.appl...	Dismiss the Loading Screen by adding the code snippet -> kony.application.dismissLoadingScreen()
Add Mappings	Map the data returned from the service to the applicable columns and attributes in the Segment widget on the Master Form

Mapping Editor for the Service Input Fields ->

Mapping Editor for the Service Result to the Form elements/columns ->

b. Create Custom JS Modules

Create 2 JS files in the Modules section in your project structure.

frmBpMasterJS.js

A single function which will be called when the user selects a BP from the master list. It retrieves the data from the selected row, including the hidden columns and then assigns them to the applicable Detail form widget.

Finally navigate to the Detail form using the show() method.



function onRowClick() {

 // Get the selected item

  var row = frmBpMaster.segBpList.selectedItems[0];

 // Populate the Detail Screen

  frmBpDetail.lblBpNumber.text = row.lblBpNumber;

  frmBpDetail.lblBpName.text = row.lblBpName;

  frmBpDetail.lblBpPhone.text = row.bpPhone;

  frmBpDetail.lblBpEmail.text = row.bpEmail;

  frmBpDetail.lblBpWebsite.text = row.bpWebsite;

  frmBpDetail.txtareaAddress.text = row.bpAddress;

 // Navigate to the Detail Screen

  frmBpDetail.show();

}

frmBpDetailJS.js

The custom Detail JS file contains some basic functions to handle the click events when users select particular BP Details



// Launch the Native Email Client

function onEmailClick(){

  kony.phone.openEmail(frmBpDetail.lblBpEmail.text, null, null, "My Little Kony", "Giddy Up", false, null)

}

// Open the Browser and Navigate to Website

function onWebsiteClick(){

  kony.application.openURL(frmBpDetail.lblBpWebsite.text);

}

// Dial the BP Phone No.

function onPhoneClick(){

  kony.phone.dial(frmBpDetail.lblBpPhone.text)

}

c. Link the Functions to the UI Widgets

Link the Functions to the correct events for the respective Widgets

4. Build / Run the Application

After saving the application, select the Build -> Clean & Build option for the application.

Select the required targets.

After the build is complete you can run the application using the configured emulators (or on the device if you've configured that option)

Below are some screenshots of the MyLittleKony App running on iOS / Android / Windows Phone.

Note the application is using the default skins for each platform so they aren't the "prettiest" looking screens. The Kony studio does give vast number of options for customising the look and feel of your applications but it can be tedious with the current IDE.

The good news is Kony have released the Visualisation Cloud which will make the process of skinning the UI a whole lot easier. The tool looks very similar to the SAP AppBuilder used for SAPUI5 applications.