openSAP Fiux1 Create Your First Fiori App PDF

Week 3 Unit 1: Anatomy of an
SAP Fiori Transactional App

Anatomy of an SAP Fiori Transactional App
SAP Fiori Basic Page Layouts
Master Detail Full Screen
2015 SAP SE or an SAP affiliate company. All rights reserved. Public 2

SAP Fiori Basic Page Layouts
Master Detail Full Screen
* Floorplans are design templates for applications that represent a certain task or process
Fiori Master/Detail Layout
Launchpad Header
Master List Header Details Header
Master List Details Content
Master List Footer Details Footer

SAP Fiori Floorplans
Create Page Edit Page List Report
Object View Flat Object View

SAP Fiori Floorplans (Mobile)
Create Page Edit Page List Report Object View Flat Object View

Page Header
Phone page header level 1
Page header is a bar on top of each page and primarily used for navigation services
Phone page header level 2 Tablet & desktop page header level 1
Phone page header level 3 Tablet & desktop page header level 2 and 3 master/detail pages
Phone page header level 4 Tablet & desktop page header level 2 and 4 master/detail with paging buttons
Phone full screen header with filter Full screen tablet & desktop page header

Page Footer
Master list footer
Footer Toolbar is reserved for triggering stuff
Footer with overflow button Tablet & desktop full screen footer
Footer with overflow menu Tablet & desktop footer with various actions and buttons

Tabs / Multiple Views
Tabs with semantic colors Tabs with brand color
Tabs as filters, symbolizing a process flow
Tabs as filters Long tab strip with browsing arrows

Forms
Single column form for master/detail or full screen layout Multiform for master/detail or full screen layout
Two column form for full screen layout

Responsive Tables

Buttons
Standard Segmented Button Styles
Enabled
Hovered
Pressed

Colors
Primary Colors Gray Scale
Accent Colors
Color Balance

http://experience.sap.com/fiori-guidelines

Thank you
Contact information:
open@sap.com
2015 SAP SE or an SAP affiliate company. All rights reserved.
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.
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. Please see http://global12.sap.com/corporate-en/legal/copyright/index.epx for additional trademark information and notices.
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 SE or its
affiliated companies shall not be liable for errors or omissions with respect to the materials. The only warranties for SAP SE 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 SEs 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, which speak only as of their dates, and they should not be relied upon in making purchasing decisions.

Week 3 Unit 2: Introduction to
SAP Web IDE
Introduction to SAP Web IDE
Key Trends
By 2020 at least 70% of new app development will

happen in the cloud1
Developers collaborate more over cloud-based
infrastructures2
Professional programmers are essential for the
development of complicated applications. They are
expected to deliver applications faster, at less cost,
and with less need for a complex infrastructure.2
Business users need to be able to create custom
software applications that once required the
assistance of professional programmers2
1 Gartner Application Architecture, Development & Integration Summit Dec. 2013

2 Gartner Hype Cycle for Application Development 2013

From Today to Vision
AppBuilder AppDesigner
SAP Web IDE
Gateway
Productivity
Accelerators
SAP Fiori
Eclipse Toolkit
UI Development
Toolkit for
HTML5
This is the current state of planning and may be changed by SAP at any time.

Speeding Development by Reducing Effort
Support end-to-end application lifecycle with one tool
Prototype* Develop Test Package/ Extend

Deploy
* Future innovation This is the current state of planning and may be changed by SAP at any time.

Overview
What? Where?
A web-based development tool
designed to simplify the E2E application SAP HANA Cloud Platform
lifecycle optimized for SAPUI5 and SAP
HANA*
Fiori apps
SAP Web
IDE
Who? When?
Developers Monthly release
Business experts
Designers**
* Integrated in HANA web based development workbench ** Future innovation This is the current state of planning and may be changed by SAP at any time.

Key Use Cases
Develop new Fiori and SAPUI5 applications
Extend SAP Fiori applications
Develop SAPUI5 mobile hybrid applications

(HAT plug-in)
Extend the SAP Web IDE with new plug-ins and

templates

Product Benefits
Develop once, deploy everywhere, & run on any

device - mobile, tablet, desktop
Reduces cost, complexity and effort through cloud-

based offering (zero installation)
Increases developer productivity by simplifying

development to create apps faster
Profit from code templates and SAP best practices

to rapidly build applications
Improves team productivity with the ability to code

and collaborate anywhere

Key Features I
Development environment
Source code editor with SAPUI5-
specific code completion
Project persistency
Layout editor (WYSIWYG)*
Mock data support for testing purposes
Instant preview in browser
Search capabilities
User-friendly interactive extension
mechanisms
Import and deploy to ABAP repository
or HCP
*Experimental features

Key Features II
Templates for creating and extending projects

New project:
SAP Fiori application templates
SAPUI5 application templates
SAP Web IDE plug-in development templates
Cloud Portal, Visualization
Extensibility of SAPUI5 applications:

Create extension project
Extend controller
Hide a control
Extend a view
Replace a view
Replace a service
Customize text of i18n resources
Add new views to existing project
Create your own custom template

SAP Plug-ins
Hybrid Application Toolkit (HAT)

Create, test, build and deploy Apache Cordova hybrid apps
using templates, code completion, etc.
OData Model Editor
Develop your own OData model using the OData Model
Editor in the SAP Web IDE framework
Fact Sheet
Create fact sheets from scratch and edit existing fact
sheets using a drag-and-drop approach.
VizPacker
Creating visual extensions for Analytics Lumira, Design
Studio
SAP Hana Cloud Portal
Easily create OpenSocial widgets for use in Cloud Portal
sites This is the current state of planning and may be changed by SAP at any time.

System Context
Any SAPUI5 apps SAP Fiori apps
External Services
Plug-ins
SAP Web IDE oData Services
Templates
Orion Git SAPUI5

Thank you
open@sap.com

Week 3 Unit 3: SAP Web IDE App Development
Basics
SAP Web IDE App Development Basics
Development Process Overview
Create Develop Preview Deploy
Source code editor with code

Coding completion, dynamic API
reference, and so on.
Wizards guiding the user through

New project a step-by-step process,
Templates automatically generating needed to
files and code SAP HANA Cloud
Extensibility to
WYSIWYG ABAP repository
project Design the UI in the layout editor
Design*
to
iOS and Android
While running the SAPUI5/SAP devices
Visual Fiori app, select an element and
Extensibility apply an extension, modification,
replacement
Manually deploy
to SMP, HCPms
Git integration
* Experimental feature

Development Environment Overview
Menu bar User name
Toolbar Search
Save Find in files
Create file (file name or content)
Create
folder Git
Delete Manage your
development objects
Undo
in your Git repository
Redo
Run History
Development Tag, cherry-pick,
view revert
Collaboration
User Integration with SAP Jam
preferences Collaborate with project
members
Editor API reference

SAPUI5 code editor Context-sensitive
Code completion Dynamic support
Creating a Project
Various options are available for the developer to create a new project:
Create a new project Create a project from

from a template an existing archive
File New Project from Template File Import Archive
Create a project in an
existing Git repository
File Git Clone Repository Create a new extension
project, such as for SAPUI5 or
SAP Fiori extensibility
File New Extension Project
Create a project by importing the application from
the diverse repositories
File Import Application from SAPUI5 ABAP Repository
File Import Application from SAP HANA Cloud Platform

Templates
The template wizard guides the user through

the definition of an application and then
generates the code
Standard templates are provided from

different categories
SAPUI5 application (basic, mobile,)
SAP Fiori applications (master detail, fact sheet)
Plug-in development
New component
Extensions
Cloud portal widget, Visualization Extension
Additional templates of any kind can be added

Coding (Assisted Development)
Code completion
For JavaScript and XML
Context-sensitive
Editor completes words, code fragments,
or entire SAPUI5 objects
JS snippets
Insertion of XML code snippets
Metadata completion from schema files
API Reference pane
Integrated API reference
Context-sensitive, dynamic support
Auto-save

Layout Editor (WYSIWYG) I
Design your view graphically in the layout editor

and display the content of the XML view
Right-click the XML file and open with layout editor
Design the view in the graphical display (Canvas)

Drag & drop the SAPUI5 controls from the Palette to the
Canvas
Configure the properties of the controls
Bind the data fields to the OData service entity sets
Check the outline of the XML view in the Outline pane

Layout Editor (WYSIWYG) II
Canvas Outline pane

Content of the Outline of the
XML view XML view
Graphical
display
Icon to open
Outline pane
Palette
SAPUI5 controls
drag & drop
Properties and
controls to the
Data pane
canvas
Shows
properties and
data of selected
control
Entity sets and
properties of
OData service
OData binding
Run the Application
You can run the application to test functionality and design

There are various ways to run your app:
Run with a frame
Run without a frame
Run with mock data
Run on ABAP server
Run on SAP HANA Cloud
Run in an SAP Fiori launchpad sandbox
Additional ways can be provided via plug-ins, for example

Run fact sheet

Deploy the Application
Various options are available for you to deploy your app:
1. Deploy to SAP HANA Cloud
2. Deploy to ABAP Repository

What Is Git?
Git is a widely used revision control and source code management system.
Available in SAP HANA Cloud and supported by SAP Web IDE.
Version control system

Distributed versioning
Enables collaborative workflows

SAP Web IDE and Git Integration
SAP Web IDE enables collaborative

development by providing seamless
integration with your Git repository.
Git client pane
Commit & Push

Git on SAP HANA Cloud Platform Used by SAP Web IDE
Source code is stored in Git repositories SAP HANA Cloud Platform

Every developer has a local clone of a central remote
repository
Remote
The clone is only executed initially to create the local Git
Repository
Git repository. (If the clone is executed again, then
the local Git repository will be overridden) Clone
1 Push
A specific state of the repository is checked out into Fetch
4
the developers workspace
Checkout
Changes are collected in commits ( ABAP transport) Workspace Local Git
2
Repository
Commits can be pushed to and fetched from the 3
remote repository Files Commit
Git allows you to branch or merge branches at any

time

Thank you
open@sap.com
2015 SAP SE or an SAP affiliate company.
All rights reserved.
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.
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. Please see http://global12.sap.com/corporate-en/legal/copyright/index.epx for additional
trademark information and notices.
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 SE or its affiliated companies shall not be liable for errors or omissions with respect to the materials. The only warranties for SAP SE 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 SEs 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, which speak only as of their dates, and they should not be relied upon in making purchasing decisions.

Week 3 Unit 4: Creating a Fiori Master Detail
App with SAP Web IDE
Creating a Fiori Master Detail App with SAP Web IDE
Create a Fiori Application
Set up a Use a
Run the app
connection Create a new template to
and test the
to a remote project create an
results
system app

SAP Web IDE on SAP HANA Cloud Platform
SAP HANA Cloud Platform
Cockpit
Browser
SAP Web IDE
Git SAPUI5
Orion
(App Projects) Version
Permanent File
System
Internet / Cloud
Corporate Network / Intranet HTTPS

Windows OS
Linux OS
SAP HANA Cloud Connector Mac OS X
(all 64-bit)
HTTP(S)
SAP Gateway
Trusted RFC
For more details: http://scn.sap.com/docs/DOC-55466 Business Suite / ERP

SAP Web IDE Master Detail Template
SAP Web IDE Wizard

Guides the user through the definition of an
application and then generates the code
Placeholders for static and dynamic data
Fiori Master Detail Template

A template to generate a Fiori master detail UX
application
Starting point for modifications

Simulator (Application Preview)
Language
If the application supports
Choice of simulator multiple languages (i18n
Desktop (large) properties), then the
language text can be
Other screen sizes, changed on the fly
such as iPad
(medium), iPhone
(small), Android, QR Code generation
custom size A QR code is generated for
The application is the URL by
clicking the
responsive will adapt
rectangle
its appearance to the
screen size
Multiple screen sizes Orientation
are predefined
The orientation of the screen
can be toggled between
landscape and portrait view
Refresh
The application can be
reloaded without needing to
rerun it from the
development environment

Thank you
open@sap.com

Week 3 Unit 5: Testing an App
with Mock Data
Testing an App with Mock Data
Creating an App with an EDMX File and Testing with Mock Data
Test the
Create an
Create an application Edit your
app from a
EDMX file with mock mock data
template
service

Run the App with Mock Data
You can run the app with mock data, for example, if your back-end
systems are not ready or available.
There are two options available:

Let the mock service generate data.
Provide data in a JSON file.

Edit Your Mock Data
A mock data editor allows you to create a JSON file.

Thank you
open@sap.com
2015 SAP SE or an SAP affiliate company.
All rights reserved.
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.
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. Please see http://global12.sap.com/corporate-en/legal/copyright/index.epx for additional
trademark information and notices.
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 SE or its affiliated companies shall not be liable for errors or omissions with respect to the materials. The only warranties for SAP SE 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 SEs 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, which speak only as of their dates, and they should not be relied upon in making purchasing decisions.

openSAP Fiux1 Create Your First Fiori App PDF

Uploaded by

Document Information

Original Title

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

openSAP Fiux1 Create Your First Fiori App PDF

Uploaded by

Copyright:

Available Formats

Week 3 Unit 1: Anatomy of an

SAP Fiori Transactional App

Master Detail Full Screen

2015 SAP SE or an SAP affiliate company. All rights reserved. Public 2

Master Detail Full Screen

Master List Details Content

Master List Footer Details Footer

Object View Flat Object View

2015 SAP SE or an SAP affiliate company. All rights reserved. Public 6

2015 SAP SE or an SAP affiliate company. All rights reserved. Public 7

Footer Toolbar is reserved for triggering stuff

2015 SAP SE or an SAP affiliate company. All rights reserved. Public 8

Tabs as filters, symbolizing a process flow

Tabs as filters Long tab strip with browsing arrows

2015 SAP SE or an SAP affiliate company. All rights reserved. Public 9

Two column form for full screen layout

2015 SAP SE or an SAP affiliate company. All rights reserved. Public 10

2015 SAP SE or an SAP affiliate company. All rights reserved. Public 11

Standard Segmented Button Styles

2015 SAP SE or an SAP affiliate company. All rights reserved. Public 12

Primary Colors Gray Scale

2015 SAP SE or an SAP affiliate company. All rights reserved. Public 13

2015 SAP SE or an SAP affiliate company. All rights reserved. Public 14

National product specifications may vary.

2015 SAP SE or an SAP affiliate company. All rights reserved. Public 16

By 2020 at least 70% of new app development will

1 Gartner Application Architecture, Development & Integration Summit Dec. 2013

2015 SAP SE or an SAP affiliate company. All rights reserved. Public 2

2015 SAP SE or an SAP affiliate company. All rights reserved. Public 3

Support end-to-end application lifecycle with one tool

Prototype* Develop Test Package/ Extend

2015 SAP SE or an SAP affiliate company. All rights reserved. Public 4

2015 SAP SE or an SAP affiliate company. All rights reserved. Public 5

Develop new Fiori and SAPUI5 applications

Extend SAP Fiori applications

Develop SAPUI5 mobile hybrid applications

Extend the SAP Web IDE with new plug-ins and

2015 SAP SE or an SAP affiliate company. All rights reserved. Public 6

Develop once, deploy everywhere, & run on any

Reduces cost, complexity and effort through cloud-

Increases developer productivity by simplifying

Profit from code templates and SAP best practices

Improves team productivity with the ability to code

2015 SAP SE or an SAP affiliate company. All rights reserved. Public 7

2015 SAP SE or an SAP affiliate company. All rights reserved. Public 8

Templates for creating and extending projects

Extensibility of SAPUI5 applications:

2015 SAP SE or an SAP affiliate company. All rights reserved. Public 9

Hybrid Application Toolkit (HAT)

2015 SAP SE or an SAP affiliate company. All rights reserved. Public 10

Any SAPUI5 apps SAP Fiori apps

Orion Git SAPUI5

2015 SAP SE or an SAP affiliate company. All rights reserved. Public 11

National product specifications may vary.

2015 SAP SE or an SAP affiliate company. All rights reserved. Public 13

Source code editor with code

Wizards guiding the user through

2015 SAP SE or an SAP affiliate company. All rights reserved. Public 2

Editor API reference

Create a new project Create a project from

File Import Application from SAP HANA Cloud Platform

2015 SAP SE or an SAP affiliate company. All rights reserved. Public 4

The template wizard guides the user through