OpenSAP Fiux2 Week 03 All Slides

Week 3 Unit 1: Anatomy of SAP
Fiori Apps
Anatomy of SAP Fiori Apps

SAP Fiori basic page layouts (1/2)
Split Screen Layout

2015 SAP SE or an SAP affiliate company. All rights reserved.
Full Screen Layout

Public

SAP Fiori basic page layouts (2/2)
Split Screen Layout

Full Screen Layout

Public

SAP Fiori master/detail layout
Launchpad Header (not part of application)
Master List Header
Master List
Details Header
Details Content
Floorplan
Master List Footer

Details Footer
Public

SAP Fiori floorplans (examples)
Create Page
Edit Page
List Report
Dynamic Side Content
Wizard Floorplan
Object Page
Public

SAP Fiori basic page layouts (mobile)
Split Screen Layout

Full Screen Layout

Public

SAP Fiori floorplans (mobile)
Create Page
Edit Page
Wizard
Object Page
List Report
Public

Page header
Phone page header level 1
Page header is a bar on top of each page and primarily used for navigation
services
Tablet & desktop page header level 1
Tablet & desktop page header level 2 and 3 master/detail pages
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
Public

Page footer
Master list footer
The footer bar always appears at the bottom edge of the screen.
The control is used for main actions that impact the whole page.
Footer with overflow button
Tablet & desktop full screen footer
Footer with overflow menu
Tablet & desktop footer with various actions and buttons
Public

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
Public
10

Data visualization
Chart Control
Process Flow
Map Control
Progress Indicator
Mini Charts
Timeline
Public
11

Responsive tables
The responsiveness of a responsive table is optimized for viewing one line item at a time with no
or only vertical scrolling, irrespective of the display width.
Public
12

Responsive tables
The responsiveness of a responsive table is optimized for viewing one line item at a time with no
or only vertical scrolling, irrespective of the display width.
Public
13

Buttons
Standard
Segmented
Button Styles
Enabled
Hovered
Pressed
Public
14

Colors
Primary Colors
Gray Scale
Accent Colors
Color Balance
Public
15

Content density (cozy and compact)
SAPUI5 adjusts the control size depending on the interaction style
Cozy content density for touch devices
Compact content density for mouse and keyboard-enabled devices
Compact Content Density: Toolbar
Cozy Content Density: Toolbar
Public
16

https://experience.sap.com/fiori-design/
Public
17
Thank you
Contact information:
open@sap.com

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 forwardlooking 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.
Public
19
Week 3 Unit 2: Introduction to

SAPUI5 and OData
Introduction to SAPUI5 and OData

What is SAPUI5?
The UI Development Toolkit for HTML5 (SAPUI5) is an extensible, JavaScript-based HTML5 control
rendering library for business applications that run in the browser.
Key Components
Runtime
Core (JS files, based on jQuery)

Control libraries (JS, CSS and
image files)
Interactive documentation
Design time (optional)
SAP contributes key elements of SAPUI5 to

Open Source community:
http://sap.github.io/openui5/
Public

SAPUI5 key capabilities
SAPUI5 is SAPs preferred UI technology to transform SAP
Fiori
SAPUI5 is a UI control library that embraces Web

standards
Web and Eclipse-based tools are available to support
SAPUI5 development
SAPUI5 is optimized to make use of SAP metadata
exposed in the OData stream
SAPUI5 helps you to efficiently build delightful, responsive
business applications based on HTML5 for all devices
SAPUI5 is the key technology for the next generation of

SAP applications
SAPUI5 offers modification-free extensibility capabilities
Public

SAPUI5 runtime the core
SAPUI5 core includes:
SAPUI5 Core
Core, base, and model modules

jQuery plug-ins provided by SAP
Core
jQuery
jQuery UI
jQuery Mobile
data.js
jQuery.UI
Model
jQuery Mobile
UI
Other JavaScript libraries like:
Base
Event
Logger
Mobile
Resources
Utils
SAP jQuery Plug-ins
jQuery
Public

Basic Model View Controller concept
Controller
SAPUI5 provides an implementation of
the MVC design pattern
Model: Manage the application data
update
update
View: Define and render the UI

Controller: Modify the view and model
User action
View
notify
data binding
Model
Public

SAPUI5 runtime main control libraries
Multiple control libraries can be combined in one application:
sap.m: Leading control library for

mobile and mixed scenarios, used on
SAP Fiori
(screenshot: sap.m.ObjectHeader)
sap.ui.table: Library with table

controls (screenshot:
sap.ui.table.Table)
sap.ui.layout: Library with layout

controls (screenshot: sap.ui.layout.Grid)
sap.ui.ux3*: Library with UX3 pattern

(screenshot: sap.ui.ux3.Shell)
sap.ui.unified: Library with generic

controls (screenshot:
sap.ui.unified.Shell)
sap.ui.commons*: Library for pure
desktop scenarios (screenshot:
sap.ui.commons.Panel)
*library is in maintenance
Public

SAPUI5 runtime sap.m control
Controls are used to define the appearance and behavior of parts of a screen:
Split App control
(sap.m)
Page control
(sap.m)
List control
(sap.m)
Page control (sap.m)

Object Header control
(sap.m)
Icon Tab Bar control
(sap.m)
Simple Form control
(sap.ui.layout)
Progression Indicator
control (sap.m)
Vertical Box control
(sap.m)
Table control (sap.m)
Public

OData Open Data Protocol
Based on HTTP, Atom Pub format, and JSON
Enables provision of data services-based REST principles
Released under open specification promises by Microsoft
Defines data queries using URLs constructed with specific rules
Defines data formats representing resources like collections, entries, etc. in either Atom or JSON
format
OData URL structure:

http://services.odata.org/OData/OData.svc/Category(1)/Products?$top=2
Service Root URI
Resource path
Query options
Public

OData Service document & metadata
Service Document
The service document (returned at the OData service root) gives you the titles and URLs for each service feed:
http://services.odata.org/V3/OData/OData.svc/
$metadata
The $metadata entry for an OData service returns an EDMX file (Entity Data Model XML) that contains a
complete description of the feeds, types, properties, and relationships exposed by the OData service:
http://services.odata.org/V3/OData/OData.svc/$metadata
Alternatively, this experimental API Explorer by the OData service can be used:
http://services.odata.org/ODataAPIExplorer/ODataAPIExplorer.html
Public

OData system query options
When accessing an OData service, you can supply some system query options to influence the
returned entries.
Parameter
Description
Example
$orderby
Order entries by the entity supplied
/Products?$orderby=Rating,desc
$top
Selects only the first N items in a collection
/Products?$top=5
$skip
Selects entries starting with N+1
/Products?$skip=2
$filter
Filters entries based on the criteria
/Suppliers?$filter=Address/City
eq 'Redmond'
$expand
Expanded entries are loaded quickly and

presented inline
/Categories?$expand=Products
$format
Defines the format that the server must return
/Products?$format=json
$select
Returns the subset of the specified properties
/Products?$select=Price,Name
Public
10

Adding OData query options
SAPUI5 handles most of the URL parameters for OData services automatically. You do have the
ability to add query options manually, either by adding them to the service URL or passing a map of
parameters when using bindElement or bindAggregation.
Expand Parameter:
oControl.bindElement(
"/Category(1)",
{ expand: "Products" }
);
oTable.bindRows({
path: "/Products",
parameters:
{ expand: "Category" }
});
Select Parameter:
oControl.bindElement(
"/Category(1)", {
expand: "Products",
select: "Name,ID,Products"
});
oTable.bindRows({
path: "/Products",
parameters:
{ select: "Name,Category" }
});
Public
11

Get more details on SAPUI5
UI development toolkit for HTML5 [Link]
i
Get more
information at
SCN
http://scn.sap.com/community/
developer-center/front-end
The official OpenUI5 page [Link]

OpenUI5 YouTube channel [Link]
SAPUI5 at UX Explorer [Link]
Documentation: ABAP UI Add-on docu [Link]
includes SAPUI5 [Link]
SAPUI5 main note: 1747308
Installation Guides
Public
12
Thank you
open@sap.com

Public
14
Week 3 Unit 3: Introduction to

Annotations and Smart Templates
Introduction to Annotations and Smart Templates

SAPUI5 provides an implementation of the MVC design pattern
Model: Manage the application data
View: Define and render the UI
Public

Limitations of freeform application design
View A
Create Invoice app
Approve Invoice app
Reconcile Invoice app
Create Floorplan
Model
Invoice
View B
Wizard Floorplan
View C
Edit Floorplan
Public

Model metadata provides rich semantic information
OData vocabularies provide the ability to annotate metadata as well as instance data, and
define a powerful extensibility point for OData.
Public

Model annotations can enhance the semantic information
Public

Annotations in OData
Capabilities
UI
@Cap.FilterRestrictions
@Cap.ChangeTracking
OASIS Core
@Core.Description
@Core.IsLanguageDependent
Measures
@Measures.ISOCurrency
@Measures.Unit
@UI.LineItem
@UI.SelectionField
Common
@Common.Label
@Common.ValueList
@Common.FieldControl
Analytics
@Analytics.Measure
@Analytics.Dimension
Communication
@vCard.Contact
@vCard.Address
Public

Smart templates / controls
Smart controls enrich standard UI5 controls with metadata support, e.g. Smart Table, Smart Filter bar, Smart
Input field, Smart Link
Smart templates provide commonly used application patterns according to the latest SAP Fiori Guidelines.
The templates are applied to the data and are smart enough to understand the semantics behind the data
model.
The right combination of templates and freestyle helps to implement the defined target designs.
SMART TEMPLATE OBJECT PAGE

SMART TEMPLATE LIST REPORT
SMART TEMPLATE OVERVIEW PAGE

Public

Layering and sources of annotations
UI Tier
Contains view template & controller logic

Evaluates annotations at runtime
Consists of data & merged
annotations from S and (optional) A
Application Tier
Gateway
App View
Application-specific views
Global Scope
View
ABAP Dev. Tools
Database Tier
View
Table
OData Model
OData
HTML
http
http
OData UI Integration Tier

http Local App Scope
Shared data model incl.

annotations across all
applications
Core Data Services CDS

Table
SAP Fiori App (Smart Template)
.xml
.js
.js
.js
Annotations
Web IDE
Table
Public

Using smart templates and annotations
Annotations describe semantics related to data (examples: see next slide)
Smartness of controls and templates is based on the understanding of these semantics.
Annotations are evaluated in the client-controller-logic.
Development steps
Choose template
Select annotated
OData service
Run fully functional

standard SAP Fiori app
Templates incorporate
latest SAP Fiori design
and UX
Annotations are derived from

CDS for reuse, productivity,
and consistency
No front-end coding required.

Extension via additional
annotations or own templates
Public

Responsibilities of architecture components
App
UI
Represent data according to fashion, theming, personalization
Use semantic information to increase consistency
UI Components
OData/HTTP
Use semantic information to minimize development effort
Data Protocol
Platform-agnostic
Transport semantic information (annotations) in addition to pure data
Semantic Information
Data Model
Describe data structure and semantic information
Database
Table
Independent of UI representation
Public
10

Example of an annotation file
Public
11

Semantic information and UI representation for Object Page
Object Page comprises of the following elements:
Page Title (Supplier)
Object Header including title, sub-title and actions

The header can optionally include description,
image, label pair and other UI elements
Anchor Bar
Content Area(s)
Field Groups
Smart Table
Annotation Vocabulary
com.sap.vocabularies.UI.v1.HeaderInfo/Title/Value
com.sap.vocabularies.UI.v1.HeaderInfo/Description/Value
com.sap.vocabularies.UI.v1.HeaderInfo/ImageUrl
com.sap.vocabularies.UI.v1.HeaderInfo/TypeName
determines the object title.

determines the subtitle
determines the image; the image shape is fixed as a circle.
is taken as the text for the navigation back to the list report.
Public
12

Semantic information and UI representation for Object Page
Attributes derived from
UI.v1.HeaderInfo
<Annotation Term=UI.v1.HeaderInfo>
Public
13

SAPUI5 provides an implementation of the MVC design pattern
Model: Manage the application data with
annotations that enrich the metadata
View: Define and render the UI either with
freeform view or through the use of smart
controls that understand model annotation
semantics
Smart
Controls
Annotations
Public
14
Thank you
open@sap.com

Public
16

OpenSAP Fiux2 Week 03 All Slides

Încărcat de

Informații document

Drepturi de autor

Formate disponibile

Partajați acest document

Partajați sau inserați document

Opțiuni de partajare

Vi se pare util acest document?

Este necorespunzător acest conținut?

Drepturi de autor:

Formate disponibile

OpenSAP Fiux2 Week 03 All Slides

Încărcat de

Drepturi de autor:

Formate disponibile

Week 3 Unit 1: Anatomy of SAP

Anatomy of SAP Fiori Apps

Split Screen Layout

Full Screen Layout

Anatomy of SAP Fiori Apps

Split Screen Layout

Full Screen Layout

Anatomy of SAP Fiori Apps

Master List Footer

Anatomy of SAP Fiori Apps

Dynamic Side Content

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

Anatomy of SAP Fiori Apps

Split Screen Layout

Full Screen Layout

Anatomy of SAP Fiori Apps

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

Anatomy of SAP Fiori Apps

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

Phone full screen header with filter

Full screen tablet & desktop page header

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

Anatomy of SAP Fiori Apps

Tablet & desktop full screen footer

Footer with overflow menu

Tablet & desktop footer with various actions and buttons

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

Anatomy of SAP Fiori Apps

Tabs with brand color

Tabs as filters, symbolizing a process flow

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

Long tab strip with browsing arrows

Anatomy of SAP Fiori Apps

Anatomy of SAP Fiori Apps

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

Anatomy of SAP Fiori Apps

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

Anatomy of SAP Fiori Apps

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

Anatomy of SAP Fiori Apps

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

Anatomy of SAP Fiori Apps

Compact Content Density: Toolbar

Cozy Content Density: Toolbar

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

Anatomy of SAP Fiori Apps

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

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

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

Week 3 Unit 2: Introduction to

Introduction to SAPUI5 and OData

Core (JS files, based on jQuery)

SAP contributes key elements of SAPUI5 to

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

Introduction to SAPUI5 and OData

SAPUI5 is a UI control library that embraces Web

SAPUI5 is the key technology for the next generation of

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

Introduction to SAPUI5 and OData

SAPUI5 core includes:

Core, base, and model modules