SAP Fiori Mobile Apps and Tools for Apache Cordova

Cordova makes it easy to build an app for iOS, Android, and Windows using web technologies. Although Blank project templates in Visual Studio Tools for Apache Cordova provide all the raw materials to build your basic “Hello World”, you have also told us that you would like to see richer starting points. We have covered starting points for frameworks like Ionic and Monaca in the past, but today we are going to take a look at how a major business platform company is working towards this goal with Cordova and Visual Studio: SAP.

SAP, SAP Fiori, and the SAP Mobile SDK

As the market leader in enterprise application software, SAP is at the center of today’s business and technology revolution. SAP’s innovations enable more than 291,000 customers worldwide to work together more efficiently and use business insight more effectively. SAP is building their next-generation platform and business systems that include a strong focus on mobile based workflows as well as a distinctive set of design guidelines called SAP Fiori. In addition to end-user mobile apps for their business systems, SAP also offers an underlying platform and server infrastructure that enables developers like you to build custom apps that take full advantage of enterprise business data.

With over 500+ role-based apps, SAP solutions such as SAP S/4HANA, SAP Simple Finance, and the SAP Business Suite are applying SAP Fiori responsive design patterns to provide a personalized, responsive and simple user experience from either web or hybrid apps.

The SAP Mobile Platform (SMP) and in particular the Mobile Platform Server and SDK enhances apps built using SAP5UI and Fiori Mobile UX by providing additional mobile device capabilities not available to traditional web apps. SAP provides multiple development options for mobilizing Fiori – SAP Web IDE, Cloud build or Custom Fiori client. Under the covers, these Fiori clients are built using a standard Apache Cordova Command Line Interface (CLI) project and a series of SAP built value-add Cordova plugins.

As a part of the collaboration between SAP and Microsoft, SAP plans to introduce some features to streamline development of SAP-powered mobile apps in Visual Studio. This blog post will cover the option of bringing Fiori apps to mobile devices through the creation of custom Fiori clients using Tools for Apache Cordova. Note thattoday Microsoft and SAP also announced that Microsoft Intune’s App SDK can be integrated with Fiori clients to add greater app level security controls when using Microsoft’s Enterprise Mobility Suite and will even be available in SAP’s cloud build service. You can expect even more in the future, so be sure to check out this video for more information!

Custom Fiori clients allow you to extend these base features and brand your Fiori client, add additional device capabilities by with Cordova plugins, remove plugins you do not intend to use to reduce your app’s size, and even add additional code packaged with the client app to meet your own specific needs (such as customizing your offline experience).

Tools for Apache Cordova

All editions of Visual Studio 2015 now come bundled with Tools for Apache Cordova which is designed to make it easy for you to build cross platform apps targeting Android, iOS, Windows, and Windows Phone using Cordova from one convenient IDE. Tools for Apache Cordova is “command line interoperable” which means that you can easily take a standard Cordova CLI project (like a Fiori client project) and further customize it to meet your needs. Once in Visual Studio you can take advantage of all of Visual Studio’s great cross-platform features like IntelliSense, integrated debugging for Android and iOS, and the high-speed Visual Studio Android Emulator.

Using Visual Studio on Windows to Build an App

The SAP Mobile SDK enables developers to build apps using Cordova through the integrated Kapsel SDK. The Kapsel SDK contains a set of Cordova plugins that you can add to your own Cordova project. In addition, the SDK provides a script to generate a Custom Fiori Client project ready for use.

You can currently build custom SAP Fiori clients for Android and iOS with Windows support expected in the future. Pick either Android or iOS, a device or emulator / simulator debug target, and click the debug button to see the app in action!

Using Visual Studio Code on a Mac or Windows to Build an App

If you would prefer to use Visual Studio Code or your favorite text editor on Windows or a Mac:

Follow the same instructions above to create your Cordova project

Install the TACO CLI and use it to help you install any pre-requisites

Simply open the folder containing your project in VS Code, start editing, and use the “taco” command to build and run as appropriate!

Summary and the Future

SAP’s Mobile SDK combined with Tools for Apache Cordova can help you build quality, secure, and great looking SAP Fiori mobile apps faster than ever before. As a part of the collaboration between SAP and Microsoft, SAP’s roadmap includes Visual Studio support for building, debugging, and deploying fully “packaged” versions of Fiori apps along with integration with a cloud build service and Microsoft has some new and exciting capabilities already in the works.

You can expect much more from SAP and Microsoft in ensuring that you are able to build and deploy the high quality, secure apps for your enterprise needs in the future.

Chuck spent over 15 years as developer, advocate, and architect in a variety of mid and large scale enterprise IT shops. He brought his passion for app development to Microsoft in 2012 and is currently focused on mobile app development.

Kiran Karunakaran, Director, Product Management at SAP

kiran.karunakaran (at) sap.com

Kiran is responsible for the product management, strategy and roadmaps for the SAP Mobile SDK and Fiori client. He has over 19 years of experience in architecture and development across multiple domains. He has been with the mobile platform team at SAP for the last four years.

Sanjeet Mall, Vice President, Engineering at SAP

sanjeet.mall (at) sap.com

Sanjeet is the Chief Architect for the SAP Mobile Platform team. He has been with SAP for more than 15 years and has worked on some of the key SAP products like SAP CRM, SAP Mobile Platform. He also runs the engineering organization responsible for Mobile SDK and Fiori client.