sap business bydesign mobile addon development 3_0900... · [ demo ] mobile addon development via...

SAP Business ByDesign

Mobile AddOn Development Mani Deepak Alli & Stephan Wollny, SAP

March 14, 2019

Internal | SAP Employees and Partners OnlySMB Innovation Summit 2019

2Confidential: Released for Partners© 2019 SAP SE or an SAP affiliate company. All rights reserved. ǀ

(1) Overview: Mobile@SAP Business ByDesign (15min)

(2) Mobile AddOn Development Options (5min)

(3) Mobile AddOn Development using SAP Cloud Application Studio (20min)

(4) Mobile AddOn Development using SAP Cloud Platform (20min)

(5) Hands-On, Q&A (50min)

Agenda

>>> Get an overview on the different options available and develop in-app and side-by-

side mobile extensions for SAP Business ByDesign followed by a hands-on session. <<<

Overview Mobile@SAP-ByD


Self-Services, Approvals,

Tasks, Notifications

Tablet: e.g. Dashboards, KPIs

Groupware & Collaboration

Built-In Mobility Across Devices


Mobile Apps @ByD

SAP Manager

Approvals

SAP Time

Recording

SAP Project

to Go

SAP Project

Cockpit

SAP Business

ByDesign Mobile

Role & Purpose Specific AppsSAP Business ByDesign Mobile

▪ The SAP Business ByDesign Mobile app is

generally available in iOS and Android

smartphones since the 1811 release

▪ The app is planned to be the single point of entry

to access all ByDesign Mobile content in the future

▪ HTML5 based mobile apps that are built to help users perform specific

functions (e.g: Approvals, Time recording etc)

▪ Mostly static and do not allow extensions. Only the Manager

Approvals app can be extended to a limited extent (e.g: Introduce

approvals for a new category code)

https://itunes.apple.com/us/app/sap-business-bydesign-mobile/id1343951881?mt=8

https://play.google.com/store/apps/details?id=com.sap.byd.mobile.player


ByD Mobile App Architecture: Fiori/UI5 & Cordova based

ByD Backend

ByD Partner

Free-Style

Apps

…

UI DesignerByD Mobile UI

Models

ByD Partner

Mobile UI Models

SAP Business ByDesign Mobile

{ HTML5 rendering of the UIs }

CORDOVA

Free-Style Apps

ByD Free-Style Apps

…

Integrate / Extend

Free-Style apps

into the

Launchpad


[ Demo ] SAP Business ByDesign Mobile


SAP Business ByDesign Mobile appFeature Summary

▪ Seamless analytics and KPIs

▪ Employee self-services (expenses, leave, shopping)

▪ Manage accounts, contacts, activities and leads

▪ Service orders and confirmations

▪ Easy to personalize and extend

More information here …

▪ Summary Video

▪ ByD Mobile Blog (regular updates)

https://www.youtube.com/watch?v=c9tRgf7W2LY

https://blogs.sap.com/2018/05/25/labs-preview-sap-business-bydesign-plans-new-mobile-apps-for-smartphones/

Mobile AddOn Development Options


ByD Mobile AddOn Development Options

SAP Cloud Application Studio(“PDI”)

SAP Cloud Platform Freestyle (Native / Hybrid)

▪ “Modelled” development approach for

InApp Extensions of ByD Mobile App

▪ First pilot project ready to Go-Live

▪ Customer / partner engagement

started

▪ Improvements of Partner Development

Environment planned for 2019

▪ Mobile content accessible via Mobile

Cards App, browser or specific App

▪ ByD data access via OData

▪ More flexible (as specific features like

Offline usage are possible)

▪ Freestyle mobile App development;

mobile content accessible via browser

or as specific App

▪ ByD data access via OData

▪ Very flexible as “everything” is

possible

[++] Low TCO for customers

[++] Low development effort

[-] Limited flexibility

[--] High TCO for customers

[+] Medium development effort

[+] High flexibility

[--] High TCO for customers

[--] High development effort

[++] Very high flexibility

Usage insights, development example and

hands-on as part of this session

Usage insights, development example and

hands-on as part of this session

ByD Mobile AddOn’s

via SAP Cloud Application Studio


(1) Overview SAP Cloud Application Studio

(2) Real & Live Customer Project Implementation Example

(3) Implementation Showcase: “Simple” enhancement

(4) Implementation Showcase: AddOn development

Agenda Details: ByD Mobile AddOn’s via SAP Cloud Application Studio


Introduction: SAP Cloud Application Studio

The studio is based on a local integrated development environment (IDE) that:

▪ Provides access to a hosted repository

▪ Provides access to all tools you need to create

and enhance the functionality of the SAP standard

cloud solution

▪ Is integrated with the tools that administrators

work with in the SAP cloud solution

▪ Allows you to manage the entire

lifecycle of customer-specific solutions,

including development, testing, and assembly

▪ Makes it easy and quick for you to perform

activities through features such as wizards for

multistep tasks

▪ Simplifies programming through features

such as code completion

Integrated Development Environment

Open SAP Course: Application Development for SAP Business ByDesign

https://open.sap.com/courses/byd1?locale=de


Project implemented and

driven by SAP Innovative

Business Solutions (CD)

Realized Business Scenarios

based on ByD Mobile App

Implementation was done in

PDI Environment via SAP

Cloud Application Studio

Self Service & Standard

Enterprise Users

Athletes will have

mobile-only access to the

ByDesign System

Private Foundation, mainly

financed by national German

partners

Supports top athletes and

young talents with financial

and ideal values

Today almost 4.000 athletes

in more than 50 sports

(focus: Olympic) are

supported

Example: Customer DSH – Deutsche Sporthilfe

SporthilfeThe Project *

* GoLive in April 2019

Stefanie HerzogTriathlon

Mueller

Gunther Hader

+49 33231 343540

[email protected]

StefanieHerzog1

Stefanie.Herzog


[ Demo ] “Simple” Mobile Enhancement via SAP Cloud Application Studio

Assumption:

▪ Customer BO extension already available in the System

▪ Social media attributes LinkedIn / XING contact

information added to BusinessPartner as extension fields

Extension Scenario:

▪ Extend the mobile screens by bringing the extension

fields to the floorplans with SAP Cloud Application Studio

SAP Cloud Application Studio

UI Designer



[ Demo ] Mobile AddOn Development via SAP Cloud Application Studio

Assumption:

▪ Customer extension has been developed in the

customer system for use on desktop

▪ Based on this custom solution a mobile version of the

extension shall be provided

Extension Scenario:

▪ Extend the ByD mobile app with a new app extension

based on a custom business object

▪ Generate a mobile workcentre view and the mobile

screens

▪ Understand the tagging concept

▪ Understand the clustering concept for authorizations

SAP Cloud Application Studio

UI Designer



► Installing and Updating the SAP Cloud

Applications Studio

► Open SAP: Application Development for SAP

Business ByDesign

► Getting Started with the SAP Cloud

Application Studio

► Download the Business ByDesign Mobile

App from iOS App Store and Google Play

Store

Learn more

https://help.sap.com/viewer/549c75135a7e44859a53cdf191e0db54/2019.02/en-US/7330686873e21014a936dfb7e454d59f.html

https://open.sap.com/courses/byd1?locale=de

https://help.sap.com/viewer/549c75135a7e44859a53cdf191e0db54/2019.02/en-US/751b080e73e21014b9598433f7dce3ea.html

https://itunes.apple.com/us/app/sap-business-bydesign-mobile/id1343951881?mt=8

https://play.google.com/store/apps/details?id=com.sap.byd.mobile.player

ByD Mobile AddOn’s

via SAP Cloud Platform


(1) Overview SAP Cloud Platform Mobile Services

(2) Real & Live Partner Implementation Example

(3) Implementation Showcase: Mobile Cards Content Development

(4) Implementation Showcase: SDK based App Development

Agenda Details: ByD Mobile AddOn’s via SAP Cloud Platform


Connectivity for SAP and 3rd

party back end systems.

Out of the box support for

critical enterprise security

standards

Enterprise-grade offline data

synchronization and flexible

cross-platform push notifications

Support for developing

native, hybrid, SAP Fiori and

micro apps

Enterprise grade security and

authentication

Full offline support,

notification services, superior

back-end integration and

enterprise-grade security.

Scale to meet large enterprise

app and user demands

Increase developer productivity

with support for a wide range of

mobile app types to meet all

use cases

Accelerate rollout of mobile

apps with secure access to on-

premise & cloud solutions

Increase user productivity via

anytime, anywhere

connectivity with backend

systems

Engage a highly mobilized

workforce, consumers, suppliers

and partners with preferred

channel

Benefits Capabilities

SAP Cloud Platform Mobile Services

A single, comprehensive mobile solution

NEO


Feature Overview

Mobile Service for Development and Operations

SAP Mobile Platform SDK

Hybrid Cross

Platform


Push Notifications Enterprise Authentication 2FAuthenticationOffline (OData) Application Lifecycle

GDPR complianceEUDP access possible

Mobile AnalyticsMobile Card KitClient Resources

Managementintegration services

support

Usage AnalyticsApplication Access

ControlDocument Service

integrationStorage Service

Sample OData Service OData (v2, v4)

Mobile Traffic Management

Mobile Setting ExchangeCloud Build Service for CI Network TracesOnline (Caching)

(REST, SOAP, OData, etc.)

Enterprise Level Encryption

Discovery Service Remote LoggingSAP Fiori Client App Lab*

SAP Cloud Platform SDKs MobileDevelopment Kit

iOS

SAP Mobile Cards

Android** iOS Android

* Cloud Foundry only ** Roadmap item


Partner Implementation Example (using SAP Cloud Platform)

Video

More details: here

https://www.sapappcenter.com/apps/28120/scan4cloud-mobile-warehouse-app#!resources

https://www.sapappcenter.com/apps/28120/scan4cloud-mobile-warehouse-app#!overview

https://youtu.be/RHkaZeI1Bjc

https://youtu.be/RHkaZeI1Bjc

https://www.all4cloud.de/loesungen/lager-app-scan4cloud/


Phone integration for maps,

location, email, SMS, and

voice calling, Apple Watch

Deploy content from Smart

Template apps. No coding

required

Create content cards for

SuccessFactors, FieldGlass,

Ariba, etc. with low code.

Provides instant content,

context, availability with

always available cards

Full offline availability with

background updates

Push updates,

subscriptions, user

selected content cards

Share only the information

users need, eliminating

navigation across systems

Reduce costs by mobilizing

data in familiar Wallet style

apps without development

Scale quickly with new

content with minimal coding

to no coding

Provide additional channel

to access content that’s

most important to users

Maximizes time to value with

prebuilt content from SAP

S/4HANA Fiori Launchpad



SAP Mobile Cards


SAP Mobile Card kit – a feature of Mobile Services

▪ Creates cards that work across iOS, Android and WeChat

▪ Targets simple 1-2 screen apps & lean workflows.

▪ Reduces training by leveraging an easy to use Wallet-style app

▪ Simplifies app management with content updates handled

automatically

Example Use Cases:

▪ Simple approvals - purchase orders, leave requests, deal approval

▪ Company news & alerts, facility information, sales promotions

▪ KPIs like charts, inventory levels, order exceptions

▪ My timesheets, vacation accrued, pay slip details

With Mobile Services customers have access to a microapp platform to

publish data into a consumer grade, “wallet” or “passbook” style app


The SAP Mobile Cards appProvides instant content, context, and availability

User actions:

▪ Offline data access

▪ Get push notifications about cards and take action

▪ Approve or reject workflows

▪ Make phone calls from card information

▪ Send iMessages or emails to card contacts

▪ Open addresses in maps

▪ Deep link to another app or URL in context of card

▪ Share cards with others

▪ Notify and action cards via the Today screen


[ Demo ] ByD AddOn Development using SAP CP Mobile Cards

Assumption:

▪ Custom OData service has been created in the

customer system to access Service Orders

▪ Based on this data a mobile version shall be provided

in order to summarize the service to be performed

(also in case of no internet connection is available with

immediate notifications in case of changes)

Extension Scenario:

▪ Create a new SAP Cloud platform based Mobile Card

based on a custom OData service

SAP Mobile Cards


SDK Assistant automatically

generates fully running app

scaffolding by reading

metadata from backend

enterprise APIs

Empower designers and

developers with tools to

quickly and efficiently build

iOS apps for the enterprise

Enable apps with native iOS

look and feel high

performance

Accelerate development

with UI controls,

frameworks and tools

Innovate by taking

advantage of rich iOS device

features like ARKit, CoreML,

location services and

notifications

SAP Fiori Mentor app

generates customized UI

code snippets for Fiori

controls

Swift-based SDK for iOS

incl. UI controls,

frameworks for data

access, security,

supportability

SAP Fiori for iOS design

language



Native App Development – SAP Cloud Platform SDK for iOS


Accessible from Java or

Kotlin

SDK Wizard automatically

generates fully running app

scaffolding by reading

metadata from backend

enterprise APIs

Empower designers and

developers with tools to

quickly and efficiently build

Android apps for the

enterprise

Enable apps with native

Android look and feel high

performance

Accelerate development

with APIs for enterprise

communications, security,

encryption & onboarding

Innovate by taking

advantage of rich Android

device features like

Fingerprint Scanner, location

services and notificationsFoundation for model-

driven apps and micro-

apps on Android

SDK for Android accelerates

enterprise app development

in Android Studio IDE

Rich set of UI controls,

implementing SAP Fiori for

Android design language



Native App Development – SAP Cloud Platform SDK for Android


[ Demo ] ByD AddOn Development using SAP CP Mobile SDK

Assumption:

▪ Custom OData service has been created in the

customer system to access Service Orders

▪ Based on this data a mobile version shall be provided

in order to summarize the service to be performed

(also in case of no internet connection is available with

immediate notifications in case of changes)

Extension Scenario:

▪ Create a new role and purpose specific Service Order

App based on a custom OData service

SAP Cloud Platform SDKs


Simplify security by not

needing to maintain security for

individual apps.

Cross-platform, running on

Android* and iOS


Mobile Development Kit

Reduce app development

costs by leveraging drag and

drop simplicity of no code tool

Relieve maintenance burden

by simplifying lifecycle

management without re-

installing apps

Increase capacity to meet

mobile app demand without

professional developers

Optimize select pre-built SAP

apps (SAP Asset Manager,

etc.) by customizing them to

meet unique business needs

Application definitions

represented using metadata

which is dynamically

interpreted on the client to

render the native UI

Code-free tool that speeds

the process of creating

applications for mobile

platforms

Support for building

customized clients

Cloud Build Service

WYSIWYG Editor, rule

editor based on Google

Blockly, extensible via

Plug-ins,


* Roadmap item

SAP Web IDE

Full-Stack


Open for 3rd party UI

frameworks, like Angular or

Ionic

Enhanced lifecylce with

AppUpdate plugin

Cross-Platform app

development

Based on open-source Apache

Cordova

Leverage existing, available

developer skillset

Access large developer

community and large library

of 3rd party plugins

Leverage enterprise grade

capabilities with Kapsel

plugins, like remote logging,

secure login and push

SAP WebIDE support for

Hybrid App development

Offline support is on-par

with native app

development

WYSIWYG Editor, Web

IDE Plugin, extensible via

Plug-ins


Hybrid



Consume SAP Cloud Platform

Portal pages, or any other

WebApp

Available for Android, iOS and

Windows devices

Use the publicly available SAP

Fiori Clients from AppStore or

Google Play – immediate

improvements

Makes device features

available to your SAP Fiori

Apps

Add mobile consumption

channel to your existing Fiori

Apps

Increased UX and security

(Auth) compared to mobile

browser access

Enterprise-grade

supportability features and

reporting available if used

with Mobile Services

Add push notifications to

your SAP Fiori Apps

UI5 aware caching for

improved Fiori

Launchpad performance

Customizable and it can be

branded, with custom build

SAP Fiori Client


SAP Fiori Client




How to find the best approach

Native Mobile Development Kit Mobile Cards Mobile Web

Pros ▪ Native look and feel ▪ Best performance▪ Instant access to device specific

innovations

▪ Native look and feel ▪ Visual development approach

simplifies development▪ Simplified app development

lifecycle▪ Enforces UX consistency

▪ Simple wallet style UX▪ No coding required for SAP Fiori

Elements UI

▪ OS agnostic▪ Lower costs than native▪ Large device compatibility

GoodFor

▪ Apps that require the best mobile UX and performance

▪ Offline apps▪ Apps that require native

frameworks▪ Example: Field sales, self

service, consumer apps

▪ Apps that require the best mobile UX

▪ Functionally complex apps▪ Offline apps▪ Apps that require significant and

frequent customization▪ Example: Field service, asset

maintenance apps

▪ Functionally simple apps▪ Example: Fact sheets, approval

apps

▪ Functionally simple apps▪ Apps that do not require native

features of offline▪ Example: Workflow and approval

apps

RequiredSkills

▪ Xcode/Swift and Android Studio/Java skills

▪ Mobile Development kit skills ▪ HTML5, CSS skills ▪ JavaScript skills▪ SAP Web IDE, UI5, Apache

Cordova


► SAP Cloud Platform Mobile Services Roadmap

► SAP Cloud Platform Mobile Services

► SAP Cloud Platform SDK for iOS

► SAP Cloud Platform SDK for Android

► Mobile Development Kit

► SAP Mobile Cards

► SAP Cloud Platform Trial

► SAP Mobile Interactive Tutorials

Learn more

https://www.sap.com/documents/2017/12/82cb5e0d-e77c-0010-82c7-eda71af511fa.html

https://cloudplatform.sap.com/capabilities/mobile.html

https://www.sap.com/developer/topics/cloud-platform-sdk-for-ios.html

https://blogs.sap.com/2018/06/06/sap-cloud-platform-sdk-for-android-has-arrived/

https://blogs.sap.com/2018/06/05/latest-mobile-development-kit-blogs-and-videos/

https://blogs.sap.com/2018/05/23/sap-mobile-cards-how-to-connect-the-mobile-cards-app-for-android/

http://www.sap.com/registration/trial.908cb719-0e03-421c-a091-daca045f0acc.html

https://www.sap.com/developer/tutorial-navigator/mobile-interactive-tutorials.html

Hands-On Q&A


ByD Mobile AddOn Development Hands-On

Example 1:

Cloud Application Studio based Mobile AddOn

▪ Installation

▪ Step-by-Step Implementation Example (please request from presenter)

Example 2:

SAP CP based Mobile Card

▪ SAP CP Trial

▪ Step-by-Step Implementation Example(please request from presenter)

https://help.sap.com/viewer/549c75135a7e44859a53cdf191e0db54/2019.02/en-US/7330686873e21014a936dfb7e454d59f.html

https://cloudplatform.sap.com/try.html

Thank you.

Contact information:

Mani Deepak Alli

[email protected]

Gamification Challenge Code

BAN1g8i

By entering this Keynote Session

code you will be granted 30 points

5 5 5 55 5

No part of this publication may be reproduced or transmitted in any form or for any purpose without the express permission of SAP SE or an SAP affiliate company.

The information contained herein may be changed without prior notice. Some software products marketed by SAP SE and its distributors contain proprietary software components

of other software vendors. National product specifications may vary.

These materials are provided by SAP SE or an SAP affiliate company for informational purposes only, without representation or warranty of any kind, and SAP or its affiliated

companies shall not be liable for errors or omissions with respect to the materials. The only warranties for SAP or SAP affiliate company products and services are those that are

set forth in the express warranty statements accompanying such products and services, if any. Nothing herein should be construed as constituting an additional warranty.

In particular, SAP SE or its affiliated companies have no obligation to pursue any course of business outlined in this document or any related presentation, or to develop or release

any functionality mentioned therein. This document, or any related presentation, and SAP SE’s or its affiliated companies’ strategy and possible future developments, products,

and/or platform directions and functionality are all subject to change and may be changed by SAP SE or its affiliated companies at any time for any reason without notice. The

information in this document is not a commitment, promise, or legal obligation to deliver any material, code, or functionality. All forward-looking statements are subject to various

risks and uncertainties that could cause actual results to differ materially from expectations. Readers are cautioned not to place undue reliance on these forward-looking statements,

and they should not be relied upon in making purchasing decisions.

SAP and other SAP products and services mentioned herein as well as their respective logos are trademarks or registered trademarks of SAP SE (or an SAP affiliate company)

in Germany and other countries. All other product and service names mentioned are the trademarks of their respective companies.

See http://global.sap.com/corporate-en/legal/copyright/index.epx for additional trademark information and notices.

© 2019 SAP SE or an SAP affiliate company. All rights reserved.

http://global.sap.com/corporate-en/legal/copyright/index.epx

sap business bydesign mobile addon development 3_0900... · [ demo ] mobile addon development via...

Documents