Build your own Fiori

hybrid mobile app rapidly using SAP Web IDE

Marc Anderegg, SAP
SESSION CODE: BT404

LEARNING POINTS

What is SAP Web IDE

What are its key features
What is the Hybrid Application Toolkit
What are the steps to build your own app
See a demo to build a Fiori hybrid mobile app
How can you get started today

BEST PRACTICES
Use SAP Web IDE and the Hybrid Application
Toolkit to build your own Fiori hybrid mobile
apps.

KEY LEARNINGS
SAP Web IDE and Hybrid Application Toolkit help
you to create hybrid mobile apps.
The hybrid apps are built as Cordova containers.
Today, as a developer, you can preview and run
the app on an Android or iOS emulator, on a
mobile device or even in a browser.

MOBILE APPLICATION TYPES

Kapsel

Mobile Web
Web Browser

Hybrid

Native

Mobile App

Mobile App

BUILDING APPS WITH SAP WEB IDE

SAP Web IDE

SAPUI5 application

Fiori application

Hybrid
Application
Toolkit

(Fiori) hybrid mobile app

WHAT IS SAP WEB IDE?

Browser-based (Web) toolkit available
on SAP HANA Cloud Platform
An Integrated Development
Environment to
create new UI5/HTML5 or custom Fiori
apps
extend SAP Fiori apps or UI5 apps

Provides standard Web development

tools like code editors, wizards, and
WYSIWYG tooling that are optimized
for building responsive HTML5 apps
with SAPUI5 (e.g., code completion)

WHAT IS SAP WEB IDE?

Application templates act as the
foundation for highly efficient app
development
Supports the E2E application
lifecycle: UI design, development,
testing, deployment, and customer
extensions for responsive SAPUI5
apps
Everything is source code-based
the tool never gets in the way of the
developer

KEY FEATURES (DEV ENVIRONMENT)

Source code editor with SAPUI5
specific code completion
Layout Editor (WYSIWYG)
Instant application preview in browser

Mock data support for testing purposes

Import and deploy to HANA Cloud Platform and ABAP repository
User-friendly interactive app extension mechanisms
Extension possibilities via plugins
Project persistency

Mobile hybrid app development support

KEY FEATURES (TEMPLATES)

Basic SAPUI5 project
SAP Fiori Application

Sample applications
Plugin Development
Extensibility of
Fiori applications

Create your own custom template

WHAT IS HYBRID APP TOOLKIT (HAT)?

Enables developers to develop
and deploy Apache Cordova
hybrid apps in SAP Web IDE

SAP HANA Cloud Platform

SAP Web IDE

Hybrid
Application
Toolkit

A plugin and add-on to

SAP Web IDE

(plugin)

HAT has 3 components:

1.
2.
3.

HAT Plugin for Web IDE

HAT Connector to local build
environment
HAT Companion application

HAT Connector
HAT Companion app

Android SDK Tools

Kapsel

XCode

HAT
(add-on)

DEVELOPMENT PROCESS OVERVIEW

Create

New project

Develop

Deploy

Coding
to
HANA Cloud
Platform

Reference
application

Templates

Extensibility
project

WYSIWYG Design

to
ABAP repository

Visual
Extensibility

* not in current GA release, planned for future release

Preview

to
Mobile*

CONFIGURE MOBILE DEVICES

Select plugins to be used in the Device Configuration

LAYOUT EDITOR (WYSIWYG)

Design your view graphically in the Layout Editor and
display the content of the XML view

LIVE PREVIEW AND TESTING

Use pre-built hybrid
companion app
Test native device APIs
Double-click the app
and refresh
Give instant response
without build the project

RUN ON EMULATOR OR DEVICE

Build mobile app for
Android or iOS
including all artifacts
(HTML
Install it on emulator or
mobile device
Run the app

PREVIEW IN A BROWSER
Live Preview & Testing
Use the browser with
Cordova Facade
Quickly validate hybrid
app functionality
without deploying to an
emulator or device
Allow/Deny access to
mobile features, i.e.
camera of laptop

Demo

GETTING STARTED WITH SAP WEB IDE

Web IDE on HCP Trial

https://account.hanatrial.ondemand.com

SAP Web IDE

online help

https://help.hana.ondemand.com/SAP_RDE/frameset.htm?62
84a94889db4f3cad001ba674282f20.html

SAP Community Network

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

GETTING STARTED WITH HAT

HAT online help

https://help.hana.ondemand.com/webide_hat/frameset.htm

HAT Add-on (PDF)

https://help.hana.ondemand.com/webide_hat/frameset.htm

SAP Community Network

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

STAY INFORMED
Follow the ASUGNews team:
Tom Wailgum: @twailgum

Chris Kanaracus: @chriskanaracus

Craig Powers: @Powers_ASUG

THANK YOU FOR PARTICIPATING

Please provide feedback on this session by completing
a short survey via the event mobile application.
SESSION CODE: BT404
For ongoing education on this area of focus,
visit www.ASUG.com