Posts Categorized: Mobility

SAP UI5 – A Photoshop template of GUI elements


For me (and I am sure many others!), UI5 has become a really useful toolkit for easily developing web apps and POC’s with little effort around the SAP Ecosystem. The OData support, rich controls and business inspired examples lend itself well to the mantra of “Don’t reinvent the wheel”. At a recent SAP Inside Track event in NY, I made reference to the fact, that while developing a mobile app, I, or a graphic designer, can spend close to 40% of the total design & development phase/hours on the UI. Building “consumer grade” enterprise apps is a different way of thinking for app developers. I am sure many of you, like me, started out with a redefined canvas of boring, grey .NET controls or a “Enjoy” SAP CXTAB_CONTROL. But times are changing and we should all look to the creative and vibrant consumer world of both web and mobile apps to reconsider our methods and processes for developing great apps.

When I started working with the UI5 toolkit, I would more often than not, start coding right away, without going through my traditional methods, and ultimately ended up in a frustrating muddled mess. Why wouldn’t you start coding immediately …. everything you need is right there? Wrong, planning is everything when it comes to design. Properly designing a app which is going to judged, by today’s standards, is not an option – but a requirement. I am not saying every application in your organization needs a UI Designer, but planning should start with sketches, process flows, and subsequently lead to the UI design and  development. When you have a toolkit which has some great looking components, its easy to skip this phase and get cracking. Don’t do it. Since I have spent a lot of time developing both web, mobile and traditional apps for the enterprise, my approach and system development life cycle (SDLC) resembles more of a artistic approach and design definition, than a “traditional” enterprise app. Yours can be entirely different, but the point is that I would like to encourage you to consider that a *great* design should be a part of your project goals.

The Reason

That’s the reason I developed the PSD file of UI5 elements. To make that design planning process quicker, easier and to encourage all of us collectively to make great designs and awesome apps.   Screen Shot 2013-07-09 at 9.19.16 PM.png

The Process

I used the online test suite and replicated the majority of the objects using shapes in Photoshop. Each object has groups/folders categorizing and defining it, both for extensibility and this makes finding a component/object easier. Some objects are not included: Icons and some of the VIZ Charts are not individual objects. Maybe in the near future if I can get some form of ‘OK’ from SAP for not copying/redistributing their font I will consider it (hint?).

Screen Shot 2013-07-09 at 9.15.29 PM.png  Screen Shot 2013-07-09 at 9.20.44 PM.png

The UI Toolkit

95% of graphic designers will spend time working with a UX/UI in Photoshop prior to coding and this toolkit makes creating those mockups considerably easier. Each object is defined as a shape and can be moved, and styled as needed. Currently the file has 897 individual layers which makes up the +- 8.2 million pixels of UI goodness . Building a new UI mockup should not take long … create a new file, duplicate the objects you need and get creative. (Please also consider the fact someone is going to need to code this and that your imagination, should be limited by *their* capabilities!)

Whats next …

I am hoping someone else interested in the UI/UX aspect will be able to contribute to the project and consider extending this file and its objects to cover all the aspects. I also hope that SAP will consider releasing its “Master” file to the community as ultimately it will encourage better adoption and use of the product.

My challenge to you ….

Does you/your company/partner have a UI/UX designer? Do you think its important to design a UI before coding? Do *you* have any great UI/Designs you would like to share? Post a link in the comments, or better yet, create a post here: (SAP Why is not directly integrated/on SCN??? )

You can download the file here:

Don’t have Photoshop? Here are a couple of the elements split up and are available in PNG format:

Simple Sample: Writing an entry to SAP Netweaver Gateway using JSON

Skill Level: Beginner
Time Needed: 20 minutes

I recently assisted someone on the forums when they were having trouble creating records in their SAP ECC instance while using Gateway. I thought I would share some very simple code showing what it takes to write an entry into a service via JSON from iOS (Objective C). The reason the title of the document is “Simple Sample” – there are no frills. Whenever I develop a new app, I start small, get the basic functionality working, and proof out the process before getting too creative.

*** If you do not have your own gateway server, you might be able to connect this to the SAP Gateway System which can be found here. Create an account and utilize this service *** DISCLAIMER: Untested as the signup form does not work

The small application sample below uses this document as a starting point. It describes setting up CRUD (Create, Read, Update and Delete) operations for the Bank account list in your back-end, based on the Bank BAPI. For our example, we will be using the Read and Create functionality of the service. Our example will use a open source repository called AFNetworking. The download can be found here, is ARC compatible and is very easy to add and reference in your project. I will skip the basics of creating a iOS project and adding the reference to AFNetworking (but for reference I am using a “Single View” app template in XCode).

Read Operation from your iOS App

Reading from a OData service using JSON can be done in as little as 7 lines of code in objective C (When using the AFNetworking classes). Here is my example code which can be used to read from your service. In my case, I am returning a list of Banks. Below is the code and the output.

Screen Shot 2013-05-10 at 8.20.25 AM.png Screen Shot 2013-05-10 at 8.23.55 AM.png

Create Operation from your iOS App

Creating a new record adds a small requirement, in that a CSRF (Cross Site Request Forgery) Token needs to be added to the POST request header. If you notice above, I have added this “fetch” header to my GET request, thus returning the key we need along with our data. (2 birds, 1 stone). Here is the create request. Pending it is successful, it will return the record which have been added to your back-end system. Below is the code and output.

Screen Shot 2013-05-10 at 8.19.28 AM.png Screen Shot 2013-05-10 at 8.25.14 AM.png

Here is a link to the GitHub project to avoid you writing all of this out. Once again – download and follow this useful guide from Gateway team to create the Bank service in your Gateway system, download the project from GitHub, update your gateway server name and details and this will be a useful starting point for creating your next enterprise app.

Disclaimer: Keep in mind the code purposely simplifies the code needed. If you feeling more adventurous:

  1. Ensure your gateway server is using HTTPS.
  2. Instead of using a NSString *dataset, use NSDictionary object/Class to the Request using JSONRepresentation
  3. Add your username and password to the header request, Base64 encoding them.
  4. Instead of writing the JSON response out to a UITextView, add some UITextBoxes and parse the values out.

Can anyone spot the field I forgot to post?

Blaze … a free iPad app for SAP Netweaver Gateway



A couple of months ago I was working on creating services for a SAP App store app called Production Insight for SAP. While working on the app I constantly found myself using RESTClient for Firefox to test, debug and view the attributes of my service while I was developing in XCode. Eventually I pulled up the metadata and service implementation on my iPad and used it as a second screen for reference. This made my life much easier. After having done this a couple of times over the past few months, I figured it wouldn’t be a bad idea to create an app which not only lets you view the service and its details, but also save requests, test them against multiple servers and also view the details easily. Which is why I built “Blaze”, it does all this and a little more. It is a free app and available in the app store as of yesterday, if I could put a “demo” or “beta” sticker on it: I would. (but apple won’ approve anything like that!) for all you “gatewayers” out there, please test it out and let me know what you like and don’t. My intention is to create a iOS client for gateway which is useful to developers like myself. The app can also handle other OData servers and services like Netflix and XS Engine from HANA.

Here are a couple of the app’s features:

  • Easily create and test new gateway services
  • Browse the service catalog of your servers
  • Save service calls as favorites for easy testing
  • Adding favorites saves request headers and methods
  • Handles both XML and JSON based services
  • Preview mode formats the response for easy reading
  • Links mode shows all links in the document which enables quick and easy drill down
  • Add headers easily with a list of choices
  • Also supports other OData Service Implementations such as Netflix and HANA XS Engine

  • This version currently requires SAP Netweaver Gateway SP04, the main reason for this is to easily browse the service catalog using JSON, if you don’t have SP04, you can set the app to “other” type and it should work. <- feedback needed

Click here to download the app

Here is a short demo video of the app in action:


And here are a couple of screenshots:

iPad Screenshot 1

iPad Screenshot 2

iPad Screenshot 3

zSCN – A iPad SCN Community Reader

After spending a couple of months traveling in 2012, I wrote a personal app for reading and following content created on the SAP Community Network. Although it was slightly buggy and ghetto, I found it way faster than firing up my MBA to check if a comment or something helpful had been posted in my local Netweaver Gateway hangout. I spent the last +- 6 months using the app and after reading a few comments on the new Idea place and in the forums, I decided a couple of others may find it helpful and set out to build a user friendly version.

Now on to the app …. firstly, starting up the app you are presented with a list of spaces (thanks to Jason Lax for creating a helpful list here!), secondly, the app uses the RSS feeds from each SCN “Space” to curate the content, each time you select a space the content is cached on the device (in a little SQLite DB) and refreshes each time the space is opened. You can also select the number of items which are downloaded in each category (blogs, documents and forums). After logging into SCN using your SCN username/password, it will download your spaces, people and saved content. Keep in mind that you cannot “save” or create content from the app, since the SCN API’s are not currently publicly available (I am hoping for some change on this!). However, each item can be selected and the original content will be displayed on the website where you can login and respond/comment. You can also easily email the item to a friend in need, or tweet it if you are a social butterfly

Currently the app has been written for iPad only but the iPhone version is in the works, but since blogs and more in depth content is more conducive to read on a tablet, I am still trying to decide if it would be warranted … any comment?

Personally, I am quite surprised the Community does not have a mobile app for iOS/Android since it would ultimately bring better adoption and collaboration amongst the users. Like all the other free apps I have developed, this is a work in progress and am hoping the direction and goals get driven by the community of users, so any and all constructive comments are welcome!

Here are a couple of screenshots and features of the app, you can download the iPad app here:

– Access to your saved spaces, bookmarks and people
– View all available SCN spaces
– Blogs, messages and documents are all displayed on a single page for quick and easy browsing
– Each space includes relevant tweets
– Share articles via email or twitter easily







S2F: Developing an iPad app using SAP Netweaver Gateway – Part 1


Click here if you would like an intro to this blog post …

Essentially, these are some of my slides from a TechEd presentation last week (MOB205). My position with this presentation is to depict the overall process I use when developing an app, a few of the *many* considerations to make, as well as the simplicity of using a product like Gateway to actually connect and “consume” ERP/CRM/Back office data in a few lines of code.


Why Mobile?

Needs no introduction, mobile was one of the hottest topics at TechEd this year, if it had a “girly” name or acronym like “HANA” … I am convinced it would have been “the” hottest topic 

Why Gateway?

The mobile landscape is fairly complex right now, lot sof vendors, lots of choices and not particularly easy to navigate. One this is for sure, services are here to stay – particularly REST based web services and that is exactly what Gateway is built for.

Another great product: XS Data Services for HANA ….

So this is the app being designed during the presentation. Essentially my goal was to develop a “template” type app which the attendees could download and use as a starting point for their mobile app development and encourage them to get their feet wet.

The app makes 2 service calls. 1 to pull a list of customers from SAP ERP, once selecting a customer, the app would download the additional details of the customer including the address. And lastly – the “idea” … anyone wanting to customize the app could pull additional data in, a good example would be: An Accounts Receivable Clerk who attends a weekly open payables meeting, may want to take their iPad, get a list of customers, select one in question and see all open payables which are relevant … easy to do with this type of structure and simple to implement.

Another example was a Business Development road warrior who could select a customer, and see a list of Open Quotes.

Your app … here is some starter type code and you decide …

I skipped a couple of the slides related to the Gateway platform … this included this slide/blog post I added a couple of weeks ago:


During the presentation I also reminded folks that mobile apps can be powered by a variety of data providers, including a method we (Lithium labs) did a couple years ago which was actually using SAP.Net Connector (v2.0) to create a ASP.NET Web Service (XML) which was called from the mobile device which worked and is still in production today.
In this app, all the components are distributed. The Netweaver Gateway instance in the cloud at AWS (Thanks John!) and connected to a ERP backend which is in Walldorf (ES Workplace). The app talks to the AWS GW machine which pulls the data from the ERP and gives it back to the iPad via a REST web call.
Now that we have covered the platform, we will go through the prerequisites for developing the iPad app. We will cover the development machine types, software need and useful tools.
A mac development machine is recommended, when I started out 3 years ago, I tied to put together a hackintosh … didnt work, first update and it bombed… waste of time. A used mac mini off craigslist goes for +- $300 … worth the investment.

This is an overview of the developer accounts – most important point was that with the free account you cannot run your app on a physical device … (boo). Pay the $99 if you are getting started and if you develop something your company wants to deploy on a larger scale … i.e. > 10 devices, pony up to the Enterprise Program.

Click here for additional details:


Development options.

I am a native kind of guy …


Useful tools include a solid graphics editor … I estimate that I spent +- 50% of my time when developing an app from start to finish with graphics and the UI. If you have access to a graphic or UI designer … USE THEM 

RESTClient for Firefox has saved me multiple hours … a quick and easy way to test your services before development.

Overview of the “SDLC” we will be following in Part 2…. click here…..


Connecting SAP Netweaver Gateway Trial to ES Workplace ERP

After following John Moy’s blog series on setting up the Netweaver Gateway trial on Amazon EC2, I thought it would be helpful to share how to connect your shiny new gateway trial to the ES Workplace ERP. Since using the ES Workplace systems a couple years ago for a CRM Mobile app, I have always praised the ES team for putting together a great set of resources for encouraging and enabling a service oriented architecture (SOA). The systems (ECC, CRM and PI) are great for doing testing against and developing POC’s or demo apps. In this case we will be using the ERP instance to connect our Gateway system for data consumption.

In this example we will be initially connecting our systems together and then going through setting up a very basic example of consuming data from the ES Workplace ERP system via the Netweaver Gateway system sitting in the AWS cloud.

Please note that the Prepackaged Netweaver Gateway Trials already have this configured and ready for your username/password.

In order to connect and consume data from the ES Workplace ERP system, you will need an account. You can create one here and it only takes a couple of minutes:
Once you have created your account, I suggest logging in and changing the initial password you received through registration. Its also just a good idea to check you are able to gain access to avoid any issues down the road.
Next up head over to your Netweaver Gateway Trial system and open up SPRO

-> SAP Netweaver

-> Gateway

-> OData Channel

-> Configuration

-> Connection Settings

->SAP Netweaver Gateway to SAP System

-> Manage RFC Destinations

Screen Shot 2012-07-20 at 4.47.32 PM.png
Click on ABAP Connections and select the “New” icon. Screen Shot 2012-07-20 at 8.08.35 PM.png
Name your RFC Destination and make sure that Connection Type is configured to be 3 – ABAP Connection.

Under Technical Settings enter the following values:

Target Host: iwdfvm3989

System Number: 00

Save As: IP Address

Gateway Host: /H/$workp1ace/H/

Gateway Service: 3300

Screen Shot 2012-07-20 at 5.11.42 PM.png
next click the “Logon & Security” Tab and enter your ES Gateway Credentials and save the connection. Screen Shot 2012-07-20 at 5.11.52 PM.png
After saving, select “Manage SAP System Aliases” and enter the details which will create a system alias for the ES Workplace ERP system. Screen Shot 2012-07-20 at 8.29.31 PM.png
SAP System Alias: Any name e.g. ESW

RFC Connection: Should be the name of your RFC connection you specified above

Software Version: Default

Screen Shot 2012-07-20 at 8.31.19 PM.png
Click the connection test button and you should receive a screen looking like this. Screen Shot 2012-07-20 at 5.12.03 PM.png
Once this is done, we are ready to create our webservice.

For our consumption example we will be pulling out a simple list of all users. If you would like to see a complete and detailed guide of CRUD (Create, Read, Update and Delete) operations – I would suggest checking out this document:

Open up SE80 and create your Gateway Data Model. Screen Shot 2012-07-20 at 8.25.27 PM.png
Be sure to specify your System Alias when creating the Model. Screen Shot 2012-07-20 at 8.40.47 PM.png
Per the documentation, search for a BAPI you would like to use. Because we defined the System Alias in the previous step, the BAPIs being displayed are coming from the target system, in this case the ES Workplace machine. Screen Shot 2012-07-20 at 8.51.23 PM.png
Continue through the process by mapping the query operation.Also be sure to set a primary key by highlighting your unique property and clicking the “Key” button. Once done, click “generate”. Screen Shot 2012-07-20 at 9.01.33 PM.png
Next up we will create a consumption model for our data model. Open up SE80 again and attach the gateway data model to consumption model. Screen Shot 2012-07-20 at 9.39.01 PM.png
Now we should be done, you can open up the browser and point to your URL listed in SE80 under the consumption model to see the definition and available collections. Screen Shot 2012-07-20 at 9.40.35 PM.png

This is directly on the AWS machine, but I can also call this from my local machine:


In the event you try to view a collection and receive the error: No System Alias found for Service, open up SPRO and assign a System Alias to the Service.

Screen Shot 2012-07-20 at 9.32.23 PM.png
Here you can see where the ESWORKPLACE alias has been defined. Screen Shot 2012-07-20 at 9.35.36 PM.png
Having additional problems?

Check that the service has been defined in SICF

Screen Shot 2012-07-20 at 9.37.49 PM.png
If you queries are taking a long time to load or your dataset is large, don’t forget to limit it/add parameters to restrict the returned records. This can be done when defining the data model. Screen Shot 2012-07-20 at 9.46.04 PM.png
If your service will display locally on AWS but not from another machine, check that the AWS Security Rules include the port gateway is running on (in my case 8000).
If you try to view the detail of the  you will get an error, this is because I did not map the operation of GetDetail or Read – we only did the Query. Follow the guide to easily add this.

If you have a elastic IP associated with you EC2 instance you should be able to call the REST service from any machine connected to internet. (You could also use your public DNS name, its just not all the short!).

Here are a couple of useful TCodes for working with Gateway:

/IWFND/ERROR_LOG Gateway Error Log
/IWFND/APPS_LOG Gateway Application Log Viewer


App Review: Material Availability from SAP

App Name: Material Availability
Developer: SAP AG
Release Date: 07 Jan 2012
Version: 2.1.0
Price: Free
Requirements: Sybase Unwired Platform, SAP Netweaver Gateway

Summary (from iTunes):
With the SAP Material Availability mobile app for iPhone, you can display material details including a product image. It allows you to check on customer specific pricing and product availability. Now you can also make reservation directly from your mobile device anywhere and anytime.

Material availability is a staple part of any ERP and having an app which has the ability to view pricing, stock on hand and reserve stock from a mobile device is valuable. The app is very straight forward and pleasantly basic, it allows you to filter your list of materials as well as group them by material group or base unit of measure. Selecting the “Availability” button will allow you to lookup and specify a customer and quantity, then displaying an estimated delivery date, delivery plant and total price. Once you confirm the displayed details you can make or cancel the reservation.

I liked the fact the app offered the ability to use sample data as this makes it easy to evaluate and decide if you feel it is worth pursuing further. The material images are a nice additional too, I believe it would be beneficial if you could click the image and have a larger view of the product.

As mentioned, the app is simple to use, quick and easy to navigate – The premise for any mobile application. However, one item I felt the app lacked was the ability to see existing reservations for the customer/material.

Open Question:
If anyone out there is using this app in production, I am curious to know how the images are loaded/stored and then subsequently referenced? In DMS?


Mobility News

Introduction This series of blog posts is intended to highlight industry news, releases, events and happenings within the enterprise mobility space.

Middleware: Netweaver Gateway SP03
You can read about what is new using this link. Being a big proponent and advocate toward the use of NW GW, I am excited to see SAP pushing this product, giving it a lot of attention and driving short release cycles to answer the needs of the development community.
Middleware: Netweaver Gateway SP03 Trial
Developers can now also download a LINUX trial version of Netweaver Gateway. This is a prepackaged version and will get you up and running with a test server in no time. The trial uses MaxDB and sits on top of SUSE Linux. The trials were also recently (15th March) updated to the new SP03 level of Gateway. Windows version
Mobile Payments: Square
I recently received my free square credit card reader and am really impressed with the tight little app it ships with (there are 2 actually), and how quick and easy it was to get setup. I would not be surprised to start seeing iPad’s replace cash registers. Currently there are Wifi enabled receipt printers and pretty cool looking check out stands. Definitively a transformation from the cash drawer days. From a development perspective I hope they will release an API allowing you to use the reader and accept payments from custom developed apps.
Apple News
New: iPad 3
With the recent release of the iPad 3 I am curious to know how many users out there have plans to upgrade or purchase the new model? Just a reminder to all the iOS developers out there to upgrade their apps to be retina “compatible”. So far our SAP Note Viewer for iPad seems to look OK with the new resolution, albeit some icons being slightly pixelated, not sure if that would warrant a upgrade. For the iOS developers out there, you can use this hack to simulate the higher resolution.
New: Apple Configurator
Apple configurator is a new product recently released which runs on OSX Lion gives mobility admins a basic MDM platform for deploying and managing apple devices in the enterprise. This is perfect for a small company where some basic management features are needed within the mobility space. You can read a little more about the software here.
Update: Apple iPhone Configuration Utility
Apple recently updated the Apple Configurator which allows you to create and deploy profiles for iPhone, iPad and iTouch devices. These profiles contain security policies, email account settings and certificates enabling enterprise integration. The new version of the software is 3.5 and adds policy restrictions for Siri, voice dialing and photo stream to name a few. You can check the out the change log here.

Integrating Apple Siri with SAP Gateway

After hearing about folks hacking Apple’s Siri to do things like starting their Viper and controlling their thermostat, I thought about utilizing voice based integration with SAP to retrieve data. By default, Apples technology is pretty well locked down, but it didn’t take long for a developer to introduce a small workaround using a ruby app and a DNS filter. The filter intercepts the call to apple and allows you to inject your own questions, responses and data. If you are interested in learning more, this summary can guide you through the process of setting up and actually communicating with SAP from Siri.

Click here for a short demo video on youtube.

What you will need:
–          iPhone 4S – (SiriProxy has a test console, if you don’t have one)
–          Ubuntu (Virtual Box Virtual Machine) – this is quick and easy to download, and get up and running quickly with Oracle’s VirtualBox. (Download)
–          SiriProxy – You can use this guide from within your Ubuntu box to get this up and running in less than a hour. (Download & Install Instructions)
–          SiriSAP Plugin – You can download this here from the SDN CodeExchange (Download)

How does SiriProxy work?
SiriProxy intercepts the iPhones DNS calls to Apple (specifically and reviews your request, in the event a loaded plugin contains the requested text, it will process the request “locally” rather than sending it to Apple.

Below is the general network path a Siri requests traverses.


With SiriProxy and SiriSAP Plugin, the calls are routed through your Ubuntu server and essentially “preprocessed”:


How does SiriSAP Plugin work?
The plugin gives you the ability to write your own search text and pulls data from SAP’s Gateway system. As an example, you could say something like: “Show  account name”, the plugin will process the request, pull data from SAP CRM (Using Gateway) and present the results to the user.

The plugin is written in Ruby as a gem and utilizes a HTML/XML Parser called NokoGiri which makes processing very quick and easy. One limitation I found with SiriProxy is the inability to have your own custom response types, for example, SiriProxy only supports “Answer snippets”, maps, and answers. Below is an example of how a simple interaction would occur:


In this example we:

1. Intercept the call
2. Let the user know we are processing their request
3. Remove any spaces
4. Pass the account number to a method (show_account_name).
5. The method Opens the SAP Gateway CRM request “Account Collection”
6. We use NokoGiri to parse the HTML/XML
7. We search the HTML/XML for “orginizationname” and return the contents




Click here for a short demo video on youtube.