UX125 SAP Fiori Elements - sapevents.edgesuite.net · Bangalore, October 5 - 7 ... Predefined app...

Public

UX125 – SAP Fiori Elements

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

Speakers

Bangalore, October 5 - 7

Suneet Agarwal

Las Vegas, Sept 19 - 23

Jan Ruessel

Barcelona, Nov 8 - 10

Jan Ruessel


Disclaimer

The information in this presentation is confidential and proprietary to SAP and may not be disclosed without the permission of

SAP. Except for your obligation to protect confidential information, this presentation is not subject to your license agreement or

any other service or subscription agreement with SAP. SAP has no obligation to pursue any course of business outlined in this

presentation or any related document, or to develop or release any functionality mentioned therein.

This presentation, or any related document and SAP's strategy and possible future developments, products and or platforms

directions and functionality are all subject to change and may be changed by SAP at any time for any reason without notice.

The information in this presentation is not a commitment, promise or legal obligation to deliver any material, code or functionality.

This presentation is provided without a warranty of any kind, either express or implied, including but not limited to, the implied

warranties of merchantability, fitness for a particular purpose, or non-infringement. This presentation is for informational

purposes and may not be incorporated into a contract. SAP assumes no responsibility for errors or omissions in this

presentation, except if such damages were caused by SAP’s intentional or gross negligence.

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.


Agenda

What are SAP Fiori elements?

SAP Fiori elements outlook

SAP Fiori elements technology

SAP Fiori elements development

SAP Fiori elements enablement info

Public

What are SAP Fiori elements?


• Smart templates becomes SAP Fiori

elements

• SAP Fiori elements has the same meaning as

smart templates

• Examples of SAP Fiori elements are list

report, object page, overview page

SAP Fiori elements


• New design and interaction patterns for SAP Fiori

UX

– List report

– Object page

– Overview page

• Consistent UX across business processes

• Rapid SAP Fiori app development

• Improved SAP Fiori app maintenance

• Adaptation via SAPUI5 flexibility and extensibility

SAP Fiori elements


SAP Fiori elements available today

List report

Overview page

Object page


Introducing SAP Fiori overview page Support for a specific domain/role through Cards with different application content

The overview page is a data-driven SAP Fiori app

providing all the information a domain/role have to

overlook in a single page.

Via cards a user can view, filter and react easily

through content from different applications.

The overview page organizes and displays an amount

of filterable data to provide an introductory-level view of

content on one glance.


Overview page at a glance

*on selected devices

“Easy scan layout”

Cards are ordered in columns

Header of the overview page

with a collapsible filter bar

Stack card

will open an object

stream (collection of

cards)

List card

Bar chart list card

Analytical cards

— Line chart

— Bubble chart

— Donut chart

Table card

with multiple columns


List report at a glance


Smart filter bar

including search fields with

value helps

Actions

for one or multiple line items Indicator support

— status

— progress

— rating

Break-outs

for custom fields in smart filter bar

Personalization and

configuration of search fields

and columns


Anchor navigation

will open an object stream

(collection of cards)

Object Page at a glance


“Collapsible header”

Object header data with

important information

Section with contacts

information

Analytical content in sections

— Line chart

— Bubble chart

— Donut chart

Global actions like edit or

share

Public

SAP Fiori elements outlook


Flexible screen layout

The flexible screen layout is a new method

of displaying multiple floorplans side by

side on a single page.

It consists out of changeable layouts in

which up to three different floorplans can

be shown next to each other.

The flexible screen layout offers a

seamless User Experience with the

possibility to see more, but stay focused on

relevant details.

Planned

Innovations


Flexible screen layout

The efficient usage of the available screen size as well as an easy to use interface

are two of the major benefits offered by the new flexible screen layout.

Planned

Innovations


Introducing analytical list page Powerful and flexible floorplan for lightweight and advanced data analysis

SAP Fiori analytical list report embeds

analytical content and capabilities into

the natural work environment of a

business user.

It enables the user to predict and to

recognize the impact of his actions.

Planned

Innovations


Analytical list page at a glance


Actions, filter dialogue and filter

type-switch

Toolbar with view switch for

chart/table view

Variant switch with display

option for global KPIs

Visual filters

Breadcrumb navigation

showing analysis path

Interactive chart area (for

analysis and controlling the

line-item table)

Planned

Innovations

Public

SAP Fiori elements technology


Re-engineered development experience with SAP Fiori elements

SAP Fiori app freestyle

SAP Fiori app based on freestyle templates

SAP Fiori app based on SAP Fiori elements

SAP Web IDE


Re-engineered development experience with SAP Fiori elements

SAP Fiori app freestyle

Free design & development in using SAPUI5 controls

SAP Fiori app based on freestyle templates

Predefined app project structure model / view / controllers

translation

navigation

SAP Fiori app based on SAP Fiori elements

Development required Search, filter, links

Actions

Tables

Forms

Adaptation capabilities

SAPUI5 flexibility

Extensibility with code breakouts

Generic UI for recurring interaction patterns List report

Object page

Overview page

Generic app structure Development required

CDS views including UI annotations

or

OData service & UI annotations in

SAP Web IDE

SAP Web IDE


Flexibility Efficiency

SAP Fiori app UI development Flexibility vs. development efficiency with SAP Fiori elements

SAP Fiori elements

UX consistency

Code quality

Re-use

# lines of code

Maintenance

Freestyle SAP Fiori apps

Support Adaptation


D

a

t

a

b

a

s

e

SAP Fiori floorplans

SAP Fiori app

SAP Fiori elements

SAP Fiori elements explained

Controls

List report

Object page

Overview page

Smart

controls Smart

controls

Smart

controls

Analytical list page Analytical list page

OData

+

UI annotations

G

a

t

e

w

a

y

C

D

S Backend


Fiori elements architecture

Application tier

Global scope

UI integration tier

Local app scope

Annotations

Table Table Table

View View

CDS

App View

Gateway

OData model

UI tier

OData

http

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

SAP Web IDE

.xml

ABAP dev. tools

Database tier

OData

http

SAP Fiori application

(with SAP Fiori elements)

HTML

http

.js .js .js

S A


SAPUI5 control SAPUI5 smart

control

SAP Fiori

app

OData

service

Metadata Service UI annotations

Application

infrastructure

SAP Fiori terminology – connecting the dots



control

SAP Fiori

app

OData

service

Metadata Service UI annotations

Application

infrastructure

SAP Web IDE freestyle

templates

Master detail pattern

Worklist pattern

SAP Fiori terminology – connecting the dots



control

SAP Fiori

app

OData

service

Metadata Service UI Annotations

Application

infrastructure

SAP Web IDE freestyle

templates

Master detail pattern

Worklist pattern

SAP Fiori

elements

Overview page

Object page

List report

Analytical list page

Wizard

Comparison view

…

SAP Fiori

floorplans

New interaction

patterns based on

user needs

Terminology 101 for Fiori app development

Public

SAP Fiori elements

development


Applying SAP Fiori elements

Templates

Joint designer & developer team Create templates for commonly used page types, layouts and compositions

Backend developers

Create the data models for the

applications.

Define the semantics of the data: Data

types, information structure, relations

Data model 1

UI developer

Compose the SAP Fiori app by

combining the templates with the data

Fine-tune the UI by configuration and

freestyle development where needed.

Composition 2


Frontend development steps. Coding optional…

1 2 3 4


SAP Fiori elements – why is it smart?

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

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 fully functional

standard SAP Fiori application

No front end coding required.

Extension via additional

annotations or own templates

Development steps


Fiori elements – semantic information

Amount

linked to

currency

Code field

linked to

text field

Line item

fields

Label for field

Link to value

list

Selection

fields


Fiori elements: Annotations in CDS

Selection field

Link to value list

Field control

Field semantics

Amount linked to currency

Line item field

lineItem: {position: 30, importance: #HIGH},

@UI: {

selectionField: {position: 20},

}

mandatory: true,

@ObjectModel: {

foreignKey.association: '_Currency'

}

@Semantics.amount.currencyCode: 'Currency'

@Semantics.currencyCode: true

define view Product … {

Price,

Currency,

…

}

Public

SAP Fiori elements enablement

info


Further information

Related SAP TechEd sessions:

UX165: Hands-On workshop to build Fiori apps with Fiori elements

DEV109: Lecture to learn the ABAP Programming Model in SAP S/4HANA

DEV212: Lecture on building an End-to-End SAP Fiori App Based on SAP S/4HANA and ABAP

SAP Public Web

LINK to a simple end to end example

LINK to documentation on CDS modelling and UI annotations

LINK to documentation for Fiori elements development

SAP Education and Certification Opportunities

www.sap.com/education

Watch SAP TechEd Online

www.sapteched.com/online

http://help.sap.com/saphelp_nw75/helpdata/en/3b/77569ca8ee4226bdab4fcebd6f6ea6/content.htm?current_toc=/en/d9/bc687d35fa42ccbb0b9256ce786d51/plain.htm&show_children=true

http://help.sap.com/saphelp_nw75/helpdata/en/d9/bc687d35fa42ccbb0b9256ce786d51/frameset.htm

http://help.sap.com/saphelp_nw75/helpdata/en/5c/be4e5b4a19479a92b1d32ff23b7b63/frameset.htm

http://www.sap.com/education

http://www.sapteched.com/online


SAP TechEd Online

Continue your SAP TechEd

education after the event!

Access replays of

Keynotes

Demo Jam

SAP TechEd live interviews

Select lecture sessions

Hands-on sessions

…

http://sapteched.com/online


Please complete your

session evaluation for UX125

Contact information:

Jan Ruessel

UX & SAP Fiori Product Management

[email protected]

Feedback


© 2016 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 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, which speak only as of their dates, and they should not be relied upon in making purchasing decisions.

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



Date post:	17-Apr-2018
Category:	Documents
Upload:	lehuong
View:	244 times
Download:	11 times

UX125 SAP Fiori Elements - sapevents.edgesuite.net · Bangalore, October 5 - 7 ... Predefined app...

Documents