Simplify UI Development with SAPUI5

Overview

SAPUI5 is a recent offering from SAP that powers SAP Fiori applications. It is a client UI technology that is based on JavaScript, CSS and HTML5, enabling you to build and adapt client applications. Depending on what device the application runs (mobile, tablet or desktop PC), you can use different libraries.
The SAPUI5 runtime is a client-side HTML5 rendering library that consist of rich set of standard and expansion controls. It is also referred as a light weight programming model for desktop and mobile applications that is based on JavaScript and supporting RIA like client-side features. It is based on the extensibility concept pertaining to custom controls.

Role of servers
Servers have a major role to play when you deploy your applications; they store the SAPUI5 libraries and connects to a database. Depending on the environment in which the SAPUI5 is deployed, the libraries or your applications are stored on a SAP NetWeaver application server or a SAP HANA cloud platform.

SAPUI5 Architecture (Courtesy: SAP)

How it works?

When you access an SUPUI5 application from your device (a mobile or a tablet), a request is sent to the respective server to load the application into the browser, letting the view to access the relevant libraries. Generally, the model is also instantiated (creates an instance of an object) and the business data gets fetched from the database.

Usage of Model View Controller (MVC)

SAPUI5 uses the MVC concept to accomplish the following goals:

• Support development in distributed teams with varied source locations
• Recommend file structure, naming and usage patterns
• Add capability of UI declaration (as compared to a programmatic construction)

Some of the notable features of this new SAPUI5 to enable you to easily create and extend state-of-the-art user interfaces are as follows:

• Supports CSS3, allowing you to adapt themes as per your company’s branding in an effective fashion.
• Uses the open source jQuery library as a foundation.
• Supports RIA like client-side features based on JavaScript.
• Completely supports SAP product standards.
• Complies with OpenAjax and can be used alongside standard JavaScript libraries.
• Produced in a release independent code line to enable short shipment cycles.

Hence, based on the MVC concept, SAPUI5 applications enable you to create sophisticated UI5 projects and can be delivered in different platforms such as:

• SAP HANA Cloud Platform
• SAP HANA Platform
• User Interface Add-on for SAP NetWeaver

Let’s briefly look at an overview of each platform:

SAP HANA Cloud Platform

SAP HANA Cloud platform is based on open standards, providing rich access to a feature-rich and user friendly environment in the cloud. The platform includes a comprehensive set of services for integration, enterprise mobility, collaboration and analytics.

Using SAP HANA cloud platform, customers and partners can rapidly build, deploy and manage cloud based enterprise applications that compliment and extend your SAP or non-SAP solutions, whether they are deployed on premises or on cloud.

Creating Simple SAPUI5 Applications

The simplest way to work with SAPUI5 is to include a set of JavaScript libraries into your HTML page and then use all the controls provided by these libraries to construct one or more control trees, and finally include them into your HTML page. This framework also supports the JavaScript Object Notation (JSON) that lets you initialize controls, minimizing your typing efforts.

For creating mobile apps, SAPUI5 provides an additional library called sap.m that is optimized for mobile devices.

SAP HANA platform

SAP HANA platform is a platform that can be deployed on-premises, unlike the SAP HANA cloud platform that can be deployed on the cloud.

In order to start working on SAP HANA platform, you need to first install and configure the SAP HANA Studio Eclipse workbench, which comprises of a series of steps. Once you have successfully installed, you can right away create simple applications using SAPUI5. The procedure for creating the apps is similar to the one as enlisted in the earlier SAP HANA Cloud Platform.

SAP User Interface Add-On

SAP User Interface Add-On for SAP NetWeaver is an application that you can use swiftly to offer new user interaction and technology without disturbing the underlying business applications. One the major advantages that this product offers for its existing customers is it helps to enhance their existing SAP UI landscapes independent of application releases and devoid of major investments – no upgrade of existing systems.

The objective is to integrate the existing UI functionality, while utilizing the cutting edge SAP’s UI technology and functionality to deliver crucial UI improvements to customers and end users irrespective of the application lifecycle and the version of the SAP NetWeaver platform that is being used.

For developing an application in SAPUI5, the following tools are required

• Eclipse – as editor
• SAPUI5 Plugin installed in Eclipse
• SAPUI5 SDK
• Tomcat Apache (Server)

Conclusion

This blog provided an overview of SAPUI5 technology, the benefits it offers, platforms it can be deployed and the tools that you require to develop applications in SAPUI5. With SAPUI5 technology that leverages the MVC concept, you can create sophisticated and user friendly applications without any additional investment.

If you would like to request a demo for SAPUI5, please click on the link above. Alternatively, if you would like to discuss with an Innovapptive solution expert, you can reach out to us by emailing us at sales@innovapptive.com or you can reach a sales representative at (713) 275-1804.

Developing Google Glass Applications for SAP

Google glass applications for SAP is soon shaping out to be the leader in wearable technology consisting of an optical head-mounted display (OHMD). Google Glass displays information in a smartphone like hands free format, letting wearers to communicate with the internet via voice commands in natural language.
It was launched in 2012 by Google, consisting of both the Mirror API and the Glass Development Kit (GDK), creating lot of curiosity among the developers and other users. Using Google Glass, developers can create amazing Glassware in order to build the application ecosystem for Glass.

If you opt to develop web based services that interact with Glass, you can use the Mirror API, enabling you to build web-based services that interact with Google Glass. One of the unique features of this Mirror API is it offers this functionality over a cloud-based API without the necessity to run code on Glass. On the contrary, GDK is an add-on for the Android SDK that helps you to build Glassware that can run directly on Glass.

Since its release in the market in 2012, there have been notable changes and enhancements in GDK; the current release being Glass XE 17.1. Now, let’s take a brief look at its basic features, which are as follows:

• Touchpad: This is located at the side of the Google Glass, enabling you to control the device by swiping through a timeline-like interface displayed on the screen. When you slide backward, you can view current events, such as weather and when you slide forward, you can view past events consisting of phone calls, photos and much more.
• Camera: Using camera, you can click photos and record 720P HD videos.
• Display: The Explorer version of Google Glass uses a liquid crystal on silicon (LCoS), field sequential color and LED illuminated display. With this display, the light is reflected into your eye, enabling you to view crystal clear images.

The environment (pre-requisites) to develop google glass are: Eclipse IDE, Android SDK, Glass Development Kit and Mirror API.

This blog walks you through the various stages of glass development such as:
1. Downloading SDK
2. Installing drivers
3. Writing a simple hello world program
4. Deploying the same on glass.

Let’s explore each of the stages briefly:

I. Downloading GDK

GDK kit provides APIs to build glassware applications, which otherwise wouldn’t be available in all the versions of android.

1. From the android’s SDK folder, click SDK manager.
2. In the SDK Manager window:

• Click to select Android 4.2.2 (API 19) and Google USB Driver (available under Extras).
• Click Install Packages. Wait until all packages gets downloaded successfully.

II. Installing google glass drivers

The next step is to install Android google device drivers, which can be done either from Android SDK’s USB drivers or with the default software that comes from the device manufacturer. Since you can directly use USB driver for Google Glass, you need to however modify the android_winusb.inf file to ensure that it is listed properly in Eclipse.

1. Open the android_winusb.inf file that is available in the android_SDK_folder\sdk\extras\google\usb_driver path to edit this file.

2. Edit the file by typing the following code at the end of the file.

[Google.NTamd64]
;GoogleGlass
%SingleAdbInterface% = USB_Install, USB\VID_18D1&PID_4E11&REV_0216
%CompositeAdbInterface% = USB_Install, USB\VID_18D1&PID_4E11&MI_01
%SingleAdbInterface% = USB_Install, USB\VID_18D1&PID_9001&REV_0216
%CompositeAdbInterface% = USB_Install, USB\VID_18D1&PID_9001&MI_01
[Google.NTx86]
;GoogleGlass
%SingleAdbInterface% = USB_Install, USB\VID_18D1&PID_4E11&REV_0216
%CompositeAdbInterface% = USB_Install, USB\VID_18D1&PID_4E11&MI_01
%SingleAdbInterface% = USB_Install, USB\VID_18D1&PID_9001&REV_0216
%CompositeAdbInterface% = USB_Install, USB\VID_18D1&PID_9001&MI_01

3. Now open the Run window (use shortcut Win + R) and type devmgmt.msc and click OK. The Device Manager window opens.

4. In the Device Manager window:

• Right click on your Google Glass device and install drivers.
• Select android_winusb.inf parent folder and follow the appropriate instructions.

III. Creating new glass project

This is similar to creating a new project in android, provided you choose the proper API version. You can create a new Glass project in Eclipse.

1. Click File -> New and then click Android Application Project to initiate creating a new project.
2. In the Android Application Project window, type your application name, project name and the package.
3. In the Minimum Required SDK and Target SDK fields, type API 19: Android 4.4 (KitKat).
4. Compile using Glass Development Kit Sneak Peek (Google Inc.) (API19) and select the Theme to None.
5. Open AndroidManifest.xml file, once the project is created and delete the theme: android:theme property to enable glass to apply its own theme.
6. Open strings.xml file and type the below string values:

strings.xml
<?xml version="1.0" encoding="utf-8"?>
<resources>
<string name="app_name">Hello Glass</string>
<string name="action_settings">Settings</string>
<!-- main activity strings -->
<string name="hello_glass">Hello Glass !</string>
<string name="home_url">www.androidhive.info</string>
<!-- "ok glass" voice command -->
<string name="start_command">Hello Glass</string>
</resources>

7. Now open your main activity layout file and paste the following code. activity_main.xml

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:layout_centerInParent="true"
android:gravity="center"
android:orientation="vertical" >
<TextView
android:id="@+id/message"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="@string/hello_glass" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="@string/home_url"
android:textSize="20dp" />
</LinearLayout>

8. Without any modifications, the code in the Mainactivity.Java file should look like this:

MainActivity.java
package info.androidhive.helloglass;
import android.app.Activity;
import android.os.Bundle;
public class MainActivity extends Activity {
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
}
}

Now we are done with the simple hello world program. In the next step, you will learn how to deploy this program.

IV. Running the application on glass

The pre-requisite to run the application on glass is to turn on the debug option.
1. On your Glass, click Settings, next click Device Info and then click Turn on debug.
2. Use a USB cable to connect the Glass to your PC.
3. Next right click Project and then click Run As ⇒ Android Application. Eclipse will list the glass in the list of available devices.
4. Select the appropriate device and then click OK. The app gets started running on your glass.

Conclusion

Google glass is a wearable technology that is slowly revolutionizing the way your apps are being developed and deployed. The above blog provided an overview of the various stages of glass development such as downloading SDK, installing drivers, writing a simple hello world program and deploying the same on glass. You can order this app from Google PlayStore to get started with building apps for your glass.

If you would like to request a demo for SAPUI5, please click on the link above. Alternatively, if you would like to discuss with an Innovapptive solution expert, you can reach out to us by emailing us at sales@innovapptive.com or you can reach a sales representative at (713) 275-1804.

OData Integration on SAP NetWeaver Gateway : Batch Operation Usage

Business Scenario

There may be certain scenarios wherein instances may logically bind together and requires to be handled or processed in conjunction within the same logical unit of work. Take for instance a sales order, wherein an update of two or more related firm entries may be required and ought to be processed together in a single request (all or none).

SAP NetWeaver Gateway can be used to process such scenarios possessing the power to accomplish multiple operations in a single request.

It’s a known fact that Gateway provides an OData API into a SAP system (assuming that you had worked earlier with SAP Gateway). This uniform interface supports a given set of operations like Create, Read, Update and Delete and lets you process a single operation per HTTP request.

However, based on the business requirements, it may become pertinent for clients to send multiple operations in a single HTTP request. Commencing with SP04, SAP NetWeaver Gateway offers the capability for client operations to batch multiple operations into a single HTTP request, enabling a sequence of retrieve operations and/or modify operations with only one request.

Pre-requisites

In order to start batching multiple operations, you need to understand few pre-requisites, which are outlined as follows:

• Access to SAP NetWeaver ABAP 7.02 SP7 or system with higher configuration, having SAP NetWeaver Gateway ABAP add-ons installed.
• Availability of SAP delivered RMTSAMPLEFLIGHT service or other Gateway services that are configured to accept requests.
• Installation of backend SAP ECC 6.0 or higher version along with the IW_BEP Gateway add-on (optional, in case the service data arrives from a separate backend).
• Configuration of connections between SAP NetWeaver Gateway system and backend SAP application (optional, in case the service data arrives from a separate backend).
• Google Chrome with “Advanced Rest Client” extension or other compatible REST client that can send RAW HTTP requests.
• Basic understanding of ABAP development.

Introduction

OData batch requests enables binding of multiple operations into a single HTTP request payload. Certain parameters like components of a batch request, how the request gets handled and the components of the batch response have major differences with respect to the components and processing of a simple and single operation of OData request.

There is one major difference between OData batch request and a normal OData request. In OData batch request, the batch request is represented as a Multipart MIME v1.0 message as specified in RFC2046 (MIME networking protocol). This standard format enables multiple parts of various content types to be denoted within a single overall request.

Components of a Batch Request

Batch request consists of two components:

• Batch request header
• Batch request body

Batch request header

Batch requests are sent as a single HTTP POST request to the batch endpoint of a service. The batch endpoint of a service serves as a base service URL attached with “$batch”. Let’s take an example. The batch endpoint for the sample RMTSAMPLEFLIGHT service is:
http://:/sap/opu/odata/iwfnd/RMTSAMPLEFLIGHT/$batch.

The batch request must consists of a Content-Type header that specifies a content type of “multipart/mixed” and a “boundary” specification. The boundary specification is inserted in the body of the request to mark the commencement and termination of each part of the batch request – segregating the different operations contained in the request.

While using HTTP POST method, a CSRF (Cross-Site Request Forgery) token is required when sending the request

Batch request body

The body of a batch request is comprised of an ordered series of retrieve operations and/or change sets. Retrieve operations are generally Query or Read operations executed with the HTTP GET method. When you modify such operations, they are referred as “Change Sets” in OData batch processing terms. Change Sets can consist of Create, Update or Delete operations executed using the POST, PUT and DELETE methods.

In the batch request body, each retrieve request and change set is denoted as a different MIME part and is separated by the boundary marker defined in the Content-Type header of the request. The contents of the MIME part that represents a change set is itself a multipart MIME document with one part for each operation, making up the change set. Each MIME part denoting a retrieve request or change set within the batch includes both Content-Type and Content-Transfer-Encoding MIME headers. The batch request boundary is the name specified in the Content-Type Header for the batch.

Batch Response

Batch response consists of two components:

• Content Type Header that specifies the content type of multipart/mixed.
• Batch boundary specification that may be different from the batch boundary used in the corresponding request.

A body of the batch response consists of a response for each retrieve request and change set, as existed in the associated batch request. The order of responses in the response body tally with the order of requests in the batch request. Each response consists of a Content-Type header with application/http value and a Content-Transfer-Encoding MIME header with a binary value. The formatting of response for a retrieve request is exactly the same as it would have been displayed outside a batch.

The body of a change set response could be:

• A response pertaining to all the successfully processed change requests within the change set.
• Formatted exactly as it would have been displayed outside a batch.
• A single response denoting a failure of the complete change set.

However, at present, content ID referencing in a change set is not supported for $batch.

How are operations handled in batch requests?

Retrieve operations and change sets are handled differently by Gateway.

Each retrieve operation like Query or Read within a $batch request will be transferred separately from SAP NetWeaver Gateway hub system to the provider application at the backend for processing.

On the contrary, since every change set is to be treated as a single logical unit of work (LCW), all operations of a change set will be sent at a single instance from Gateway to the provider application at the backend system for processing. The Gateway system collects results from all the operations and subsequently sends these results as one HTTP response to the OData consumer.

Additional Application API for $batch

For executing retrieve operations, there is no requirement of special handling. However, in order to ensure the “all or nothing” character of a change set, there are two additional methods for changing set handling in interface /IWBEP/IF_MGW_APPL_SRV_RUNTIME. The two additional methods are:

• /IWBEP/IF_MGW_APPL_SRV_RUNTIME~CHANGESET_BEGIN
• /IWBEP/IF_MGW_APPL_SRV_RUNTIME~CHANGESET_END

/IWBEP/IF_MGW_APPL_SRV_RUNTIME~CHANGESET_BEGIN

All operations within a change set must be considered as a logical unit of work. Hence, a provider must not issue COMMIT WORK or ROLLBACK WORK while processing the change sets. Otherwise, the framework will terminate the change set processing. In case the change set consists of only one operation, the check of Commit or Rollback is deactivated.

/IWBEP/IF_MGW_APPL_SRV_RUNTIME~CHANGESET_END

The provider can update the database only if it updates all modifications of a change set within the internal tables. A COMMIT WORK will be issued by the framework at the end of this API.

Mobile Enterprise Predictions for 2015

International Data Corporation (IDC) has hosted the IDC FutureScape for mobile enterprise predictions for 2015 Web conference. The session provided organizations with insight and perspective on long-term industry trends along with new themes that may be on the horizon.

The Predictions Web conference series and accompanying IDC FutureScape reports are designed to help company leaders capitalize on emerging market opportunities and plan for future growth.

PREDICTIONS FROM THE NEW MOBILE ENTERPRISE APPLICATIONS AND SOLUTIONS FUTURESCAPE INCLUDE:

1. IT organizations will dedicate at least 25% of their software budget to mobile application development, deployment, and management by 2017.

2. Difficulties linking mobile platforms to existing databases will cause 45% of mobile enterprise app initiatives to be delayed or go over budget in 2015.

3. Thirty-five percent of large enterprises will leverage mobile application development platforms to develop and deploy mobile apps across their organizations in 2015.

4. The number of enterprise applications optimized for mobility will quadruple by 2016.

5. Thirty to 40% of organizations deploying more than five mobile applications in 2015 will realize substantial business agility benefits by establishing an API tier in their enterprise IT architecture.

6. Over 50% of large organizations will invest in enhanced enterprise mobility management (EMM) capabilities to secure apps and data in 2015.

7. By 2017, 100% of the line of business (LOB) apps in customer-facing roles and 75% of LOB apps in internally-facing roles will be built for mobile-first consumption.

8. IT departments will require major reorganizations by 2016 to assume broker-integrate-manage as well as service orchestration functions.

9. Competitive necessity will supersede productivity and efficiency for 50% of mobile enterprise app development in 2015.

10. By the end of 2015, only 15% of large organizations will have adequate mobile security governance for process and policy.

“The number of enterprise applications optimized for mobility will quadruple by 2016, driven both by competitive necessity and rapidly evolving technologies that support faster and more secure enterprise ‘appification’,” said John Jackson, program vice president for Mobility Research at IDC. “The benefits from efficiencies and business innovation on the back of this app explosion will transform industries and markets. At the same time it is clear that the path to broader mobilization of business processes is still complex. For this reason, we offer this FutureScape to help enterprise mobility stakeholders shape their strategies, decisions, and investments. Organizations that execute effectively will be positioned to enable innovation across all facets of their business.”

The IDC FutureScape report that this Web conference is based on will be published and available within the 24 hours. To learn more, visit www.idc.com/Predictions2015.

Mobile SSO for SAP Fiori with SAP Authenticator

Overview of SAP Fiori

SAP Fiori is a new age experience (UX) for SAP, that is revolutionizing the way applications are built, taking the user experience to new heights. It combines modern design principles providing a holistic and a consistent experience across variety of devices. With SAP Fiori, you can accomplish a variety of productive tasks including getting quick insight-to-action anytime and anywhere.

There are a variety of apps that are currently applying the SAP Fiori UX to provide enhanced user productivity and personalization for customers, who use SAP Business Suite on any database and SAP Business Suite powered by SAP HANA. Enterprises that have implemented a single sign on (SSO) solution for the SAP Business Suite can give the same ease of use to their Fiori users with several SSO options.

Implementing Mobile SSO for SAP Fiori with SAP authenticator

On November 3rd, 2014 SAP released a latest support package (SP04) for Single Sign-On 2.0 – a mobile SSO solution that is perceived as a straightforward authentication mechanism for favorite applications and trusted websites on mobile devices. It offers simplicity for your SAP Fiori users without compromising the security for your company.

This solution is based on Time based One-Time Password (TOTP) algorithm, which is of the open standard RFC 6238. This algorithm computes a one-time pass code from a shared secret key and current time. With the respective user name and pass code, the authentication to the Identity Provider triggers IDP initiated single sign-on mechanism. For TOTP client, SAP authenticator is the mobile application, which is available for iOS and android platforms. SAP Authenticator offers password protection. The password is defined during the installation of the application, it is used only for the encryption/decryption of the secret key, and it is not stored on the device. The password offers additional level of security, that is not available with the other similar OTP generator applications existing on the market. Mobile SSO implementation with TOTP is easier to setup and support compared to, for example, a Mobile SSO implementation based on client certificates, where a Public Key Infrastructure is necessary. Mobile SSO with TOTP could be enabled easily also for scenarios that allow a “Bring Your Own Device” (BYOD) policy, where the transfer and the storage of client certificates is difficult or impossible.

Once you implement this solution, you will have the flexibility to use Fiori applications, bookmarked on your device after a single click. Once you click on the respective Fiori application bookmark, the SAP authenticator creates a pass code and a URL with respective parameters. Next, the SAP authenticator sends this URL to the browser, wherein the browser opens the URL that triggers the single Sign-On. On the other hand, the Identity Provider checks the entered credentials and if the authentication is successful, issues a SAML 2.0 assertion for you and for the respective service provider (SAP Fiori). In the final step that refers to the HTTP-POST binding response, the SAP Fiori application gets securely opened on your mobile device.

Key Take aways

• Greater simplicity for end users – high level of user experience
• Enhanced security for your organization
• Save costs due to minimized number of password related IT tickets
• Increased employee productivity (only one single password and less typing)
• Built on responsive design principles
• Utilizes SAP UI5 and SAP NetWeaver Gateway to provide a consistent and a seamless end-to-end extensibility
• Leverage your current SAP investments by offering quick value for over 85% of your users.

Conclusion

From the above discussion, it is obvious that Mobile SSO with SAP Authenticator has a major role to play in ensuring enhanced corporate security, while providing a consistent, simple and a holistic consumer grade experience across a variety of devices – desktop, tablet or a smart phone. Organizations worldwide are adapting to this new technology to take consumer mobile user experience to the new level with perceived business benefits – improved user productivity and substantial cost savings.

If you would like to request a demo for the “Fiori SSO with SAP Authenticator”, please click on the link below. Alternatively, if you would like to discuss with an Innovapptive associate, you can reach out to us by emailing us at sales@innovapptive.com or you can reach a sales representative at (713) 275-1804.