Sencha Touch, Ext JS and Architect Spotlight: UNIORG for SAP

UNIORG is a leading full service provider of SAP business solutions and certified partner of SAP AG. Besides offering conventional SAP consulting for the last 30 years, we have supported our clients with a broad range of products and services for deployment and development of their business information management systems. We continue to develop new SAP offerings to help our customers prepare their businesses for the future. We recently developed UNIORG OrderTracking for SAP HANA.

UNIORG OrderTracking is a mobile app that provides real-time monitoring of customer orders from the SAP ERP System, based on different dynamic criteria. Our app is useful for all SAP customers who want to equip their external partners, sales reps or internal employees with a fast, efficient view of current and historical orders. The application delivers real-time status, order value, classification characteristics and provides analysis functions on top of SAP HANA (In-Memory Technology), which is not achievable with the native SAP ERP system.

UNIORG OrderTracking is a mobile app that provides real-time monitoring of customer orders from the SAP ERP System.

### Why We Chose Sencha Touch, Ext JS and Architect
Sencha Touch fit our needs perfectly because we wanted to build a modern HTML5-based web UI with touch support that would work on almost any mobile device. The competitive solution of SAP and the SAP HTML5 framework based on JQuery is currently in beta and did not satisfy our needs for a high performance mobile solution.

The Sencha Touch API is similar to the Ext JS API, so we were able to take advantage of our broad knowledge and experience with Ext JS. We also used Sencha Architect to design our mobile apps, and the combination of Architect with Sencha Cmd gave us all the tools we needed right out of the box to be highly productive building mobile apps for SAP.

Sencha Architect and Cmd make it easy to prototype and give clients a hands-on demo.

Using Sencha Architect and Cmd, we can also prototype functional working mockups quickly to give clients a hands-on demo, rather than looking at non-functional layouts created with mockup/wireframing tools like Balsamic Mockups or Mockingbird. We can reuse designs and custom widgets by exporting and importing them between different Sencha Architect Projects and also use a custom theme that reflects the customer’s corporate design with very low effort — thanks to Compass/SASS and Sencha Cmd. For this reason, we designed the L-Shape (Surrounding Portal/App Navigation and Information Layout that allows switching between different apps) and added some static placeholder HTML as well as mockup data used by the list and data widgets. If the client decides to implement the solution, we then add some additional design using CSS and develop the business logic inside the target SAP system.

UNIORG OrderTracking includes graphic charts and integrated map visualization of partner addresses via Google maps.

Using Sencha Touch, we built an extensible and highly responsive platform. We included the Google Maps Panel widget and added some additional functionality using the Google Maps API (resolving addresses to coordinates, dynamically adding markers, etc.).

Statistical information is presented by using the native touch pie chart widget.

The Sencha object-oriented class approach allowed us to develop a custom oData Proxy for accessing SAP HANA Data Services. We decided to use the default Ajax proxy and customize the corresponding source inside sdk src folder. By doing it that way, we could use the standard building process that included our own Ajax proxy implementation for building/compiling the app. We also implemented the store filter functionality between local and remote stores directly inside the proxy, so any designed form filter widget is able to remotely filter the needed data without additional programming effort. The extended SAP HANA proxy is able to translate Ajax requests into oData requests transforming filter, paging and sorting into the corresponding SAP HANA oData format.

### Business Value of Using Sencha Touch, Ext JS and Architect
Using Sencha Touch, we got a multi-platform solution that runs perfectly on many devices including the Apple iPad and Samsung Google Nexus. We don’t have to develop the same solution for different devices with different SDKs. After some investigation into XCode, we calculated that it would have been an additional effort of 3-4 times to realize the same functionality inside a native XCode App. Furthermore, Sencha Touch delivers more widgets out-of-the-box. If we’d used XCode, we would have had to develop them ourselves. If we’d built our app for Android, it would have required a complete rebuild because XCode uses Objective C while Android SDK uses Java.
Sencha Touch uses native JavaScript on all supported devices, so we don’t have to rely on our developers to have knowledge of the individual platforms, which would lead to higher engineering resources and additional project management overhead. HTML5-based, cross platform, mobile development allows us to write one code base and reduce our development costs.

…we calculated that it would have been an additional effort of 3–4 times to realize the same functionality inside a native XCode App.

With Sencha Architect, we were able to build and release mobile apps quickly which reduced our costs and made it easier to maintain the apps. Our developers are much more productive using Sencha Touch. By implementing ExtDirect into SAP Application Server ABAP, we are able to include SAP ERP data at design time (using local apache with modproxy to inject ExtDirect SAP services into local app domain URI for Cross-Domain issues). Currently, the whole design process (including controller logic) can be done inside Sencha Architect. Using Eclipse, we customize the look and feel using themes and also build/theme the app using ant tasks that trigger the Sencha Cmd Build Tool. The next step is to deploy the app directly on the target SAP system by using a custom ant task that uses WebDav, so the whole build and deploy process is completely automated. The production version is stored inside the SAP development system and is rolled out (transported) with native SAP technology.

### Our Advice to New Developers
In addition to the great online API documentation, developers should also look at the Sencha Touch source code, which is part of the SDK download. In some cases, developers need to know how things work internally, and for that reason the source code is the best place to look. As an example, in a previous version of the API docs, the image property ‘mode’ was not listed, but it was used internally so we were able to review it. We wanted to have an image that stretched width and height to 100 percent of the surrounding container. After a quick look into the code, we found out that the property ‘mode’ controls the creation of an image tag or use of the CSS property. Keeping this in mind, we were able to set the required properties to get the experience we wanted.

### Final Thoughts
We found it easy to get started with Sencha Touch, especially with our Ext JS experience. By spending time with the examples and demos to learn the basics, you will love the object-oriented approach especially when you’re building cross-platform apps for mobile and desktop. Using Sencha Architect as the UI modeling tool, you can focus on user experience and efficiency instead of creating handcrafted UIs, and that makes it easier to build a better app. We also saved a lot of time by using Sencha Architect because it increased our productivity.