OpenSAP Fiux2 Week 03 All Slides

8/18/2019 OpenSAP Fiux2 Week 03 All Slides

1/49

Week 3 Unit 1: Anatomy of

Fiori Apps


2/49

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

Anatomy of SAP Fiori AppsSAP Fiori basic page layouts (1/2)

Split Screen Layout Full Screen Lay


3/49


Anatomy of SAP Fiori AppsSAP Fiori basic page layouts (2/2)



4/49


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

Anatomy of SAP Fiori AppsSAP Fiori floorplans (examples)

Create Page Edit Page Lis

Dynamic Side Content Wizard Floorplan Obj



Anatomy of SAP Fiori AppsSAP Fiori basic page layouts (mobile)




Anatomy of SAP Fiori AppsSAP Fiori floorplans (mobile)

Create Page Edit Page Wizard Object Page



Anatomy of SAP Fiori AppsPage header

Phone page header level 1




Phone full screen header with filter

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

Full screen tablet & desktop page header

Page header is a bar on top of each page and primarily used

services



Anatomy of SAP Fiori AppsPage footer

Master list footer

Footer with overflow button

Footer with overflow menu

Tablet & desktop full screen footer

Tablet & desktop footer with various actions and buttons

• The footer bar always appears at the bottom edge of the sc

• The control is used for main actions that impact the whole p



Anatomy of SAP Fiori AppsTabs / multiple views

Tabs with semantic colors

Tabs as filters, symbolizing a process flow

Tabs as filters Long tab strip with browsing arrow

Tabs with brand color


11/49


Anatomy of SAP Fiori AppsData visualization

Chart Control Map Control Min

Process Flow Progress Indicator Tim


12/49


Anatomy of SAP Fiori AppsResponsive tables

The responsiveness of a responsive table is optimized for viewing one line item

or only vertical scrolling, irrespective of the display width.


13/49


Anatomy of SAP Fiori AppsResponsive tables

The responsiveness of a responsive table is optimized for viewing one line item

or only vertical scrolling, irrespective of the display width.


14/49


Anatomy of SAP Fiori AppsButtons

Standard

Enabled

Segmented

Hovered

Pressed

Button Styles


15/49


Anatomy of SAP Fiori AppsColors

Primary Colors

Accent Colors

Gray Scale

Color Balance


16/49


Anatomy of SAP Fiori AppsContent 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 dev

Compact Content Density: Toolbar

Cozy Content Density: Toolbar


17/49


Anatomy of SAP Fiori Appshttps://experience.sap.com/fiori-design/


18/49


19/49


© 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


20/49

Week 3 Unit 2: IntroductionSAPUI5 and OData


21/49


Introduction to SAPUI5 and ODataWhat is SAPUI5?

The UI Development Toolkit for HTML5 (SAPUI5) is an extensible, JavaScript-baserendering library for business applications that run in the browser .

SAP contributes key elements of Open Source c

http://sap.github

Key Components

Runtime

– Core (JS files, based on jQuery)

– Control libraries (JS, CSS andimage files)

Interactive documentation

Design time (optional)

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


22/49


Introduction to SAPUI5 and ODataSAPUI5 key capabilities

SAPUI5 is SAP’s 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, responsivebusiness 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


23/49


Introduction to SAPUI5 and ODataSAPUI5 runtime – the core

SAPUI5 core includes:

Core, base, and model modules

jQuery plug-ins provided by SAP

Other JavaScript libraries like:

– jQuery

– jQuery UI

– jQuery Mobile

– data.js

SAPUI5 Core

jQuery

SAP jQuery Plug-ins

Event Logger Mobile Resources

UI

Core Base Model


24/49


Introduction to SAPUI5 and ODataBasic Model View Controller concept

View

Controller

data binding

User action

update

SAPUI5 provides an implementation ofthe MVC design pattern

Model: Manage the application data

View: Define and render the UI

Controller: Modify the view and model

I d i SAPUI d OD


25/49


Introduction to SAPUI5 and ODataSAPUI5 runtime – main control libraries

sap.ui.layout: Library with layoutcontrols (screenshot: sap.ui.layout.Grid)

sap.m: Leading control library formobile and mixed scenarios, used onSAP Fiori(screenshot: sap.m.ObjectHeader)

sap.ui.unified: Library with genericcontrols (screenshot:sap.ui.unified.Shell)

sap.ui.ux3*: Lib(screenshot: sap

sap.ui.table: Library with tablecontrols (screenshot:sap.ui.table.Table) sap.ui.commons

desktop scenariosap.ui.commons

Multiple control libraries can be combined in one application:


26/49

I t d ti t SAPUI5 d OD t


27/49


Introduction to SAPUI5 and ODataOData – 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 eitherformat

Service Root URI Resource path Query o

OData URL structure:

http://services.odata.org/OData/OData.svc/Category(1)/Products?$top

I t d ti t SAPUI5 d OD t


28/49


Introduction to SAPUI5 and ODataOData – Service document & metadata

Service Document

The service document (returned at the OData service root) gives you the titles and URLs for

http://services.odata.org/V3/OData/OData.svc/

$metadata

The $metadata entry for an OData service returns an EDMX file (Entity Data Model XML) tha

complete description of the feeds, types, properties, and relationships exposed by the OData

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

Introduction to SAPUI5 and OData

http://services.odata.org/V3/OData/OData.svc/http://services.odata.org/V3/OData/OData.svc/$metadatahttp://services.odata.org/ODataAPIExplorer/ODataAPIExplorer.htmlhttp://services.odata.org/ODataAPIExplorer/ODataAPIExplorer.htmlhttp://services.odata.org/V3/OData/OData.svc/$metadatahttp://services.odata.org/V3/OData/OData.svc/


29/49


Introduction to SAPUI5 and ODataOData – system query options

When accessing an OData service, you can supply some system query options to ireturned entries.

Parameter Description Example

$orderby Order entries by the entity supplied /Products?$orderby=Rating,de

$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/Cit

eq 'Redmond'$expand Expanded entries are loaded quickly and

presented inline/Categories?$expand=Produc

$format Defines the format that the server must return /Products?$format=json

$select Returns the subset of the specified properties /Products?$select=Price,Nam



30/49


Introduction to SAPUI5 and OData Adding OData query options

SAPUI5 handles most of the URL parameters for OData services automatically. Youability to add query options manually, either by adding them to the service URL or p

parameters when using bindElement or bindAggregation.

Expand Parameter: Select Parameter:

oControl.bindElement(

"/Category(1)",

{ expand: "Products" }

);

oTable.bindRows({

path: "/Products",

parameters:

{ expand: "Category" }

});

oControl.bindElement(

"/Category(1)", {

expand: "Products",

select: "Name,ID,Pro

});

oTable.bindRows({

path: "/Products",

parameters:

{ select: "Name,Cate

});



31/49


Introduction to SAPUI5 and ODataGet more details on SAPUI5

Get moreinformation at

SCN

http://scn.sap.com/community/developer-center/front-end

i

UI development toolkit for HTM

The official OpenUI5 page [Lin

OpenUI5 YouTube channel [Li

SAPUI5 at UX Explorer [Link]

Documentation: ABAP UI Add-

includes SAPUI5 [Link]

SAPUI5 main note: 1747308

– Installation Guides

http://openui5.org/index.htmlhttps://www.youtube.com/user/openui5videoshttps://uxexplorer.hana.ondemand.com/_item.html?id=78http://help.sap.com/saphelp_uiaddon10/helpdata/en/95/d113be50ae40d5b0b562b84d715227/content.htm?frameset=/en/7b/2e06c219dc4e4d964cc7e2f8629ef5/frameset.htm&current_toc=/en/e4/843b8c3d05411c83f58033bac7f072/plain.htm&node_id=175&show_children=falsehttp://service.sap.com/sap/support/notes/1747308http://service.sap.com/sap/support/notes/1747308http://help.sap.com/saphelp_uiaddon10/helpdata/en/95/d113be50ae40d5b0b562b84d715227/content.htm?frameset=/en/7b/2e06c219dc4e4d964cc7e2f8629ef5/frameset.htm&current_toc=/en/e4/843b8c3d05411c83f58033bac7f072/plain.htm&node_id=175&show_children=falsehttps://uxexplorer.hana.ondemand.com/_item.html?id=78https://www.youtube.com/user/openui5videoshttp://openui5.org/index.html


32/49

Thank you

Contact information:

[email protected]


33/49








These materials are provided by SAP SE or an SAP affiliate company for informational purposes only, without representation or warranty of aaffiliated companies shall not be liable for errors or omissions with respect to the materials. The only warranties for SAP SE or SAP affiliate cservices are those that are set forth in the express warranty statements accompanying such products and services, if any. Nothing herein shoconstituting an additional warranty.


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 affiliatedfor any reason without notice. The information in this document is not a commitment, promise, or legal obligation to deliver any material, codlooking statements are subject to various risks and uncertainties that could cause actual results to differ materially from expectations. Readerundue reliance on these forward-looking statements, which speak only as of their dates, and they should not be relied upon in making purcha

W k 3 U it 3 I t d ti t

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


34/49

Week 3 Unit 3: Introduction to

Annotations and Smart Temp

Introduction to Annotations and Smart Templates


35/49


Introduction to Annotations and Smart TemplatesBasic Model View Controller concept

SAPUI5 provides an implementation of the MVC design pattern

Model: Manage the application data View: Define and render the UI




36/49


Introduction to Annotations and Smart TemplatesLimitations of freeform application design

Model

View A

View B

View C

Invoice

C

A

R

Create Floorplan

Wizard Floorplan

Edit Floorplan

+

+

+

=

=

=



37/49


Introduction to Annotations and Smart TemplatesModel metadata provides rich semantic information

OData vocabularies provide the ability to annotate metadata as well as instance da

define a powerful extensibility point for OData.



38/49


Introduction to Annotations and Smart TemplatesModel annotations can enhance the semantic information



39/49


Introduction to Annotations and Smart Templates Annotations in OData

OASIS [email protected]

@Core.IsLanguageDependent

[email protected]

@Measures.Unit

[email protected]

@Cap.ChangeTracking

[email protected]

@[email protected]

@UI.Line

@UI.Sele

A@Analyti

@Analyti

Com@vCard.

@vCard.A



40/49


pSmart templates / controls

SMART TEMPLATE – LIST REPORTSMART TEMPLATE – OBJECT PAGE SMART TEMPL

Smart controls enrich standard UI5 controls with metadata support, e.g. Smart Table, Sm

Input field, Smart Link

Smart templates provide commonly used application patterns according to the latest SAP

The templates are applied to the data and are smart enough to understand the semantics

model.

The right combination of templates and freestyle helps to implement the defined target des



41/49


pLayering and sources of annotations

Application Tier

Global Scope

UI Integration Tie

Local App Scope

An

Table Table Table

ViewView

Core Data Services CDS

App View

Gateway

UI Tier

S

A

Consists of data & merged

annotations from and (optional)

Contains view template & controller logic

Evaluates annotations at runtime

Shared data model incl.

annotations across all

applications

Application-specific views

Web IDEABAP Dev. Tools

Database Tier

S AOData M

SAP Fiori App

OData

http



42/49


pUsing smart templates and annotations

Choose template

Templates incorporate

latest SAP Fiori design

and UX

Select annotated

OData service

Annotations are derived from

CDS for reuse, productivity,

and consistency

Run ful

standar

No front-

Extensio

annotatio

Development steps

Annotat ions 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.



43/49


UI

Represent data according to fashion, theming, persona

Use semantic information to increase consistency

Use semantic information to minimize development effo

Data Protocol

Platform-agnostic

Transport semantic information (annotations) in additio

Data Model

Describe data structure and semantic information

Independent of UI representation

pResponsibilities of architecture components

Database

Table

Semantic Information

UI Components

App

OData/HTTP R



44/49


Example of an annotation file



45/49


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

• com.sap.vocabularies.UI.v1.HeaderInfo/Title/Value determines the object title.

• com.sap.vocabularies.UI.v1.HeaderInfo/Description/Value determines the subtitle

• com.sap.vocabularies.UI.v1.HeaderInfo/ImageUrl determines the image; the image shap

• com.sap.vocabularies.UI.v1.HeaderInfo/TypeName is taken as the text for the navigation

Annotation Vocabulary



46/49


Semantic information and UI representation for Object Page

Attributes derived from

UI.v1.HeaderInfo



47/49


Basic Model View Controller concept

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


48/49

Thank you

Contact information:

[email protected]



49/49








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.


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 affiliatedfor 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.epxhttp://global12.sap.com/corporate-en/legal/copyright/index.epx

Documents

OpenSAP Fiux2 Week 03 All Slides