OpenSAP Fiux2 Week 04 All Slides

8/19/2019 OpenSAP Fiux2 Week 04 All Slides

1/52

Week 4 Unit 1: Introduction

SAP Web IDE


2/52

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

Introduction to SAP Web IDEKey trends

• Professional programmerthe development of comp

• Business users need to b

custom software applicat

Gartner Hype Cycle for Applic

• “Application platform technology innovation has

moved to the cloud …”

• “aPaaS offerings begin to challenge traditional

platform middleware for mainstream projects, ...”

Gartner MQ, Enterprise Application Platform as a Service,

Mar ‘15


3/52


Introduction to SAP Web IDESpeeding development by reducing effort

SAP Web IDE is a powerful web-based integrated dev

tool that simplifies the end-to-end application deve

lifecycle for SAP Fiori apps, Fiori-like apps, and SAP

Prototype Develop Test Package

and Deploy


4/52


Eclipse

SAP Fiori

Toolkit

Introduction to SAP Web IDEBefore SAP Web IDE, today, and future vision

AppBuilder AppDesigner

UI Development

Toolkit for

HTML5

Gateway

Productivity

Accelerators

This is the current state of plann

SAP Web IDE

SAP HANA

Cloud

Integration

SAP HAN

SAP Fiori

Cloud

Edition

A

Mana

I

S


5/52© 2015 SAP SE or an SAP affiliate company. All rights reserved.

Introduction to SAP Web IDEKey use cases

SAP Web IDE

Develop new SAP Fiori and SAPUI5

applications

Extend SAP Fiori applications

Develop SAPUI5 mobile hybrid applications

(HAT plug-in)

Extend SAP Web IDE with new plug-ins and

templates



Reduce cost, complexity,

and effort through cloud-

based offering (zero-

installation)

Develop once, deploy

everywhere, & run on any

device - mobile, tablet,

desktop

Increase p

simplifying

to create gr

Introduction to SAP Web IDEProduct benefits



Introduction to SAP Web IDEKey features

Prototype Develop Test Package and

Deploy

BUILD

Layout Editor

Code Editor

Validations

Templates&Wizards

Sample Apps

Git

Instant Preview

Mock Data

HCP

HCPms

ABAP Repository

SMP

Enterprise Portal

Export



SAP offers out-of the-box plug-ins and templates that

leverage SAP Web IDE’s modular and extensible

framework.

Introduction to SAP Web IDESAP Web IDE plugins

Hybrid Application Toolkit

OData Model Editor

SAP Fiori overview page (OVP)

VizPacker

…and more…



Introduction to SAP Web IDEThe big picture

SAPUI5 apps SAP Fiori apps

SAP HANA Cloud Platform (HCP)

SAP Web IDE

Orion Git SAPUI5

Templates

Optional plug-ins

OData Model Editor

Fact Sheet Editor

VizPacker

SAP Event Management

SAP HANA Cloud Portal

Hybrid App Toolkit

SAP Fiori overview page

Plugin



Introduction to SAP Web IDEWhat’s new in the latest releases of SAP Web IDE

Layout editor – productive usage

Dynamic SAPUI5 version support Editor enhancements

New templates for new UI versions

BUILD integration

Minification of the application's JavaScript files

UI facelift

For more information:

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

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


11/52


SAP Web IDE is SAP’s web-based development environment that enables cus

partners to build and extend SAP Fiori and SAPUI5 apps.

SAP Web IDE today

Provides tools to increase developer productivity

Runs on SAP HANA Cloud Platform (HCP) which reduces cost, complexity, and effort

SAP Web IDE plans

Offer integration with additional HCP services

Support additional editor capabilities, WYSIWYG, personalization options, and more

Include quality tools

Give customers and partners the ability to use Development Infrastructure capabilities

Introduction to SAP Web IDESummary

Code Simple


12/52


Introduction to SAP Web IDEUseful links

SAP Web IDE

• SAP HANA Cloud Platform:http://hcp.sap.com/index.html

• SCN (SAP Community Network):https://www.sapstore.com/solutions/60009/Web-IDE

• SAP Web IDE at SAP Store:http://scn.sap.com/docs/DOC-55465

• SAP HANA Cloud Platform (SAP Web IDE trial beta):https://account.hanatrial.ondemand.com/

• Official documentation:https://help.hana.ondemand.com/under Platform Solutions choose SAP Web IDE

• Documentation within SAP Web IDE:Choose Help > Documentation

Additional related information to SAP Web IDE

• SAP HANA Cloud Platform:https://help.hana.ondemand.com/Go to SAP HANA Cloud Platform > Getting Started

• SAP Gateway:

http://help.sap.com/nwgateway20

SAPUI5

• SAPUI5 Developer Center- Demo Ki

SAPUI5 / OpenUI5):

https://sapui5.hana.ondemand.com/sd

• OpenUI5:

http://sap.github.io/openui5/

• UI Development with SAPUI5 docum

https://help.hana.ondemand.com/help

a44bb5710148368de02b150bce3.htm

SCN (SAP Community Network)

• SAPUI5 & SAP Web IDE:

http://scn.sap.com/community/develop

• SAP Fiori:

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

• SAP for Mobile:

http://scn.sap.com/community/mobile

http://hcp.sap.com/index.htmlhttps://www.sapstore.com/solutions/60009/Web-IDEhttps://www.sapstore.com/solutions/60009/Web-IDEhttp://scn.sap.com/docs/DOC-55465https://account.hanatrial.ondemand.com/https://help.hana.ondemand.com/https://help.hana.ondemand.com/http://help.sap.com/nwgateway20http://help.sap.com/nwgateway20https://sapui5.hana.ondemand.com/sdk/http://sap.github.io/openui5/https://help.hana.ondemand.com/help/frameset.htm?e8fdaa44bb5710148368de02b150bce3.htmlhttps://help.hana.ondemand.com/help/frameset.htm?e8fdaa44bb5710148368de02b150bce3.htmlhttps://help.hana.ondemand.com/help/frameset.htm?e8fdaa44bb5710148368de02b150bce3.htmlhttp://scn.sap.com/community/developer-center/front-endhttp://scn.sap.com/docs/DOC-41598http://scn.sap.com/community/mobilehttp://scn.sap.com/community/mobilehttp://scn.sap.com/community/mobilehttp://scn.sap.com/docs/DOC-41598http://scn.sap.com/community/developer-center/front-endhttps://help.hana.ondemand.com/help/frameset.htm?e8fdaa44bb5710148368de02b150bce3.htmlhttp://sap.github.io/openui5/https://sapui5.hana.ondemand.com/sdk/http://help.sap.com/nwgateway20https://help.hana.ondemand.com/https://help.hana.ondemand.com/https://account.hanatrial.ondemand.com/http://scn.sap.com/docs/DOC-55465https://www.sapstore.com/solutions/60009/Web-IDEhttp://hcp.sap.com/index.html


13/52

Thank you

Contact information:

[email protected]


14/52


© 2015 SAP SE or an SAP affiliate company. All rights

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 and other SAP products and services mentioned herein as well as their respective logos are trademarks or registered trademarks of SA

company) in Germany and other countries. Please see http://global12.sap.com/corporate-en/legal/copyright/index.epx for additional tradema

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 a

affiliated companies shall not be liable for errors or omissions with respect to the materials. The only warranties for SAP SE or SAP affiliate c

services are those that are set forth in the express warranty statements accompanying such products and services, if any. Nothing herein sho

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

or release any functionality mentioned therein. This document, or any related presentation, and SAP SE’s or its affiliated companies’ strategydevelopments, products, and/or platform directions and functionality are all subject to change and may be changed by SAP SE or its affiliated

for any reason without notice. The information in this document is not a commitment, promise, or legal obligation to deliver any material, cod

looking statements are subject to various risks and uncertainties that could cause actual results to differ materially from expectations. Reader

undue reliance on these forward-looking statements, which speak only as of their dates, and they should not be relied upon in making purcha

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


15/52

Week 4 Unit 2: SAP Web ID

App Development Basics


16/52


SAP Web IDE App Development BasicsPrototyping

Start

Prototype

Import

Wizard

Wizard to create apps from templates

Quick Start with Layout Editor using drag & drop

Leverage mock data instead of back-end system

Import prototype from Build tool

Import from

– SAPUI5 ABAP Repository – SAP HANA Cloud Platform

– Archive

– Git

Capabilities


17/52

© 2015 SAP AG or an SAP affiliate company. All rights reserved.

SAP Web IDE App Development BasicsMock data benefits

Design

Develo

Test

while (true)

Back-end-independent application development

Simulate service API and data

Decoupled development

UI First approach

Back-end-independent application tests

Unit testing

Offline and demo

The mock server simulates back-end calls within your

client app. No back-end connection.


18/52


SAP Web IDE App Development BasicsData model

The data model is described by the Entity Data Model (edmx) of a da

It is stored in the metadata.xml file, which can be edited with the ODa

Editor of SAP Web IDE.


19/52


SAP Web IDE App Development BasicsData content

Project Set

Run the application with mock data in case your

back-end service is not (yet) available.

There are two options:

Let the mock service generate data

Provide data in a JSON file

A mock data editor is availableto enter business data suitable for

your scenario (JSON format).


20/52


SAP Web IDE App Development BasicsMock data features

The client-based mock server mimics OData back-end calls by

simulating an OData provider.

Its usage is transparent to your application: No changes are required to

the application, its OData model, or the data binding. The mock server

coding comes with

– App template

– Sample app

– Or is manually coded

The mock server provides mock data – Auto-generated data (based on service metadata)

– Mock data created on your own (JSON files)

The mock server supports CRUD calls,

navigations, and most other OData 2.0 options.


21/52


SAP Web IDE App Development BasicsCode editors (1/2)

State-of-the-art code editors for SAP Fiori and

SAPUI5 apps

JavaScript, XML, and SAPUI5 code completion

and validations

Integration with code quality tools

Collaborative development with Git project

persistency


22/52


SAP Web IDE App Development BasicsCode editors (2/2)

Code completion

– For SAPUI5, JavaScript, and XML

– Context-sensitive

– Editor completes words, code fragments, or entire

SAPUI5 objects

– Code snippets for JavaScript and XML

Cross-file navigation

Customizable code validations (All, Error, Error and

Warning, Disable)

Static code checks (linting) for JavaScript and XML

Code beautification (JavaScript, XML, CSS)

Metadata completion from schema files

API Reference pane

Auto-save


23/52


SAP Web IDE App Development BasicsTesting

Instantly preview your application atdifferent resolutions and in different

languages

Run your app with real or mock data

Test SAPUI5 responsive design


24/52


SAP Web IDE App Development BasicsRun configurations

Configure how to run the applications in the

project settings:

Application file path to the file that is used to runthe application

Preview with or without test frame

With mock data or back-end data

SAPUI5 version

Application URL parameters: name = value

ApplicationFile Path

FrameMockData

SAPUI5Version

ApplicationURL

Parameters

Web

Applicationx x x x x

Unit Test x x

SAP Fiori

Componentx x x

SAP W b IDE A D l t B i


25/52


SAP Web IDE App Development BasicsDeployment

Seamlessly deploy to run on any

platform

SAP HANA Cloud Platform (register to SAP

Fiori launchpad)

SAPUI5 ABAP Repository (in ABAP package

and transport request)

Mobile usage via SAP HANA Cloud Platform

mobile service (HCPms) and SAP Mobile

Platform (SMP) Export/Import


26/52

Thank you


[email protected]


27/52













or release any functionality mentioned therein. This document, or any related presentation, and SAP SE’s or its affiliated companies’ strategydevelopments, products, and/or platform directions and functionality are all subject to change and may be changed by SAP SE or its affiliated






28/52

Week 4 Unit 3: Creating Your Firs

Fiori App with SAP Web IDE Tem

Creating Your First SAP Fiori App with SAP Web IDE Tem


29/52


Creating Your First SAP Fiori App with SAP Web IDE TemTemplates & sample apps

Create your own custom

application template

Templates for creating projects

Basic SAPUI5 projects

SAP Fiori apps(Master-Detail & Worklist)

SAP Fiori smart template

application

Hybrid mobile applications

SAP Web IDE plug-in development

Sample applications

SAP Fiori reference apps Easily ramp up SAP Fiori

development by audited end-to-end

sample applications as reference



30/52


Creating Your First SAP Fiori App with SAP Web IDE TemFreestyle templates: Kick-start your app development

Motivation & Benefits

Start from a running app

High flexibility for individual use cases

Best practices for routing, error handling,

busy handling, models, mock server, app

descriptor, internationalization

SAP Fiori ready

– SAP Fiori launchpad integration

– SAP Fiori UX guidelines

• Quality focus – Clear separation of test/productive

code

– Shipped with tests (OPA5 and QUnit)

Versioning according to SAPUI5 release

cycle

Shipped with SAP Web IDE



31/52


Creating Your First SAP Fiori App with SAP Web IDE TemFreestyle templates: Master-Detail & Worklist

WorklistMaster-Detail



32/52


Creating Your First SAP Fiori App with SAP Web IDE TemFreestyle templates: Get started!

Create a new project from template:

Click File New in the menu bar,

then Project from Template

and select an SAPUI5 application template SAPU App

SAPUI5 Master-Detail

Application



33/52


Creating Your First SAP Fiori App with SAP Web IDE TemTemplate customization

Alternatively use a local file

Person

Email

ContactGroupGroup

OrganisationContact Address

Choose a data model as a basis for your app

Typically connect to SAP Gateway service



34/52


Creating Your First SAP Fiori App with SAP Web IDE TemSAP Fiori reference apps (1/2)

Please note:

The back-end service is available with SAP NetWeaver 7.40 SP10

SCN: http://scn.sap.com/docs/DOC-59963

SAP Web IDE currently offers 3 reference apps:

You can review and

approve/reject purchase

orders

You can maintain the

product master of the

shop

You can browse

products and add

them to a shopping

basket

Approve Purchase Order Manage ProductsShop

Master-detail pattern Master-detail patternFull screen pattern


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


35/52


Creating Your First SAP Fiori App with SAP Web IDE TemSAP Fiori reference apps (2/2)

SAP Fiori reference apps are available as sample apps in SAP Web IDE:

In contrast to the templates, SAP

Fiori reference apps are complete

apps with all the coding. They can

be used as a reference or to copy

& paste coding from.

They provide exemplary coding

and comprehensive comments

Mock-server support allows

immediate look & try, even without

a back-end system

Creating Your First SAP Fiori App with SAP Web IDE Te


36/52


Creating Your First SAP Fiori App with SAP Web IDE TeDemo


38/52













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

developments, products, and/or platform directions and functionality are all subject to change and may be changed by SAP SE or its affiliated




Week 4 Unit 4: Enhancing You



39/52

Week 4 Unit 4: Enhancing You

SAP Fiori App with SAP Web

Enhancing Your SAP Fiori App with SAP Web IDE


40/52


g pp Adding more SAPUI5 controls

sap.ui.layout: Library with layout

controls (screenshot: sap.ui.layout.Grid)

sap.m: Leading control library for mobile

and mixed scenarios, used on SAP Fiori

(screenshot: sap.m.ObjectHeader)

sap.ui.unified: Library with generic

controls (screenshot: sap.ui.unified.Shell)

sap.ui.ux3*: Lib

(screenshot: sap

sap.ui.table: Library with table controls

(screenshot: sap.ui.table.Table)sap.ui.common

desktop scenario

sap.ui.commons

Multiple control libraries can be combined in one app :



41/52


g pp Adding more components

Depending on the context, the New menu

lets you add more project components.

Work with

Any chan



42/52


g ppDemo



43/52


g ppEnhancing SAP Web IDE itself

SAP Web IDE is a flexible tool environment. A wizard supports creatio

IDE plug-ins, providing custom app templates or use case-specific too

Customized SAP

My custom app template


45/52














developments, products, and/or platform directions and functionality are all subject to change and may be changed by SAP SE or its affiliatedfor any reason without notice. The information in this document is not a commitment, promise, or legal obligation to deliver any material, cod



Week 4 Unit 5: Testing an A



46/52

Week 4 Unit 5: Testing an A

with Mock Data

Testing an App with Mock Data


47/52


S c h e m a / S t r u c t u r e Set up a

back-endconnectionin SAPHANA CloudPlatform

A p p f r o m T

e m p l a t e Create an

SAPUI5 appfrom atemplate T e

s t t h e A p p Test the

applicationwith a backend N

e x t S t e p s

OptioCustoor enthe gservicODat

Testing with back-end data – Creating an app and testing it

Testing an App with Mock Data


48/52


Agenda

Demo Content

Process overview with mock service

Upload an EDMX file

Create an SAPUI5 app from a template

Run the SAPUI5 app with mock data (mock service-

generated data only)

Edit and individualize the mock data with the mock editor

Take advantage of JSON files for mock data Set up a Run Configuration in SAP Web IDE

Testing an App with Mock DataC ti b d EDMX fil d t ti it


49/52


Creating an app based on an EDMX file and testing it

S c h e m a / S t r u c t u r e

Create andset up anEDMX file

A p p f r o m T

e m p l a t e

Create anSAPUI5 appfrom atemplate T e

s t t h e A p p Test the

applicationwith themock service M

o c k D a t a Edit t

mockthe a

Testing an App with Mock DataD


50/52


Demo


51/52

Thank you


[email protected]



52/52


p y g












developments, products, and/or platform directions and functionality are all subject to change and may be changed by SAP SE or its affiliatedfor any reason without notice. The information in this document is not a commitment, promise, or legal obligation to deliver any material, cod



OpenSAP Fiux2 Week 04 All Slides

Documents

Transcript of OpenSAP Fiux2 Week 04 All Slides