Prototyping Kit

SAP Fiori
PREFACE
INTRODUCTION
To allow for creating quick mock-ups, SAP Fiori provides a kit for
Microsoft PowerPoint which includes all important UI elements.
By using this prototyping kit, you can easily create mock-ups
and create links between pages using PowerPoint's
functionalities. When designing your prototype, keep the
design principles in mind.

SAP Icon Font

To view the following slides correctly, please make sure you
have the latest version of the SAPs icon font (file: SAP-
Icons.ttf) installed. It comes with the Open UI5 SDK. For
example for windows 7 installation, simply search the open UI5
library for string .ttf. In the search results right-click on the
sap-icons.ttf file and select install. You can then change and
insert icons in Microsoft PowerPoint via Insert-> Symbol and
selecting font: SAP-Icons.
After the installation on Mac, you can open the font Book
application and select the user from the navigation menu.
Then choose the SAP-Icons to view all the icons. From here you
can highlight any icon and copy it to your Microsoft PowerPoint
slides.

Please address your design-related questions to

fioridesign@sap.com .
App Type Index
Work List : Master/Detail
Work List: Full Screen
List Reporting: Filtered List Report
List Reporting: Categorized List Report
Object Pages: Object View
Create Forms: Create Form
Create Froms: Multi-Step Create From
Analytics: Smart Business
Processing: Processing App
Components Index
Home & Tile
Busy Indicator
Button
Checkbox
Dialog
Edit
File Upload
Filtering
Form
List
Login
Message Toast
Object Header
Components Index
Popover
Selection Controls
Progress Indicator
Radio Button
Rating Indicator
Search Filed
Segmented Button
Sharing
Tab Container
Input
Tables
Timeline
Tokenizer
Components Index
Toolbar
Tray/Panel
Tree
Background
Application Types
Work List
Master/Detail
 User Name

Requests (42) Request

Search
Name1 3,762,199.90
USD
Name 1 100 Mio
USD
1 day ago

1 Item Today
3

Name 2 3,762,199.90
USD

Label Lorem Ipsum: Description dolor sit

3 Items 1 day ago
Consectetuer: Eget dolor Aenean massa
Adipiscing elit Aenean: Cum sociis natoque
Name 3 6,450.00 Commodo ligula: Penatibus et magnis dis parturient
USD

10 Items 6 days ago

ITEMS (3)
Name 4 1.99
USD
Description Quantity Price Total

100 Items Last week

Item 1 1 12,000.00 USD 12,000.00 USD

Name 5 1771.00 Item 2 15 250,000.00 USD 3,750,000.00 USD

USD

84 Items Last week Item 3 1 199,90 USD 199,90 USD

Approve Reject
 With Letter Boxing U

Requests (42) Request

Search
Name2 3,762,199.90
USD
Name 1 100 Mio
USD
1 day ago

1 Item Today
3

Name 2 3,762,199.90
USD

Label Lorem Ipsum: Description dolor sit

3 Items 1 day ago
Consectetuer: Eget dolor Aenean massa
Adipiscing elit Aenean: Cum sociis natoque
Name 3 6,450.00 Commodo ligula: Penatibus et magnis dis parturient
USD

10 Items 6 days ago

ITEMS (3)
Name 4 1.99
USD
Description Quantity Price Total

100 Items Last week

Item 1 1 12,000.00 USD 12,000.00 USD

Name 5 1771.00 Item 2 15 250,000.00 USD 3,750,000.00 USD

USD

84 Items Last week Item 3 1 199,90 USD 199,90 USD

2014 SAP AG or an SAP affiliate company. All rights reserved. Approve Reject 10
Work List
Full Screen
 User Name

Application Title

Status Customer Company Code

Open Customer 1
ACME Reset Search

Items (223)

Customer Description Status Company Code Offset Account

90000201 Customer 1 Open 100450003 660200

90000213 Customer 1 Open 200776544 700000

90000183 Customer 1 Open 000678332 2 Accounts

90000623 Customer 1 Open 000322235 660200

90000871 Customer 1 Open 000678332 550000

90007211 Customer 1 Open 000678323 660200

90002121 Customer 1 Open 000678388 700000

90000231 Customer 1 Open 000678755 660200

90000231 Customer 1 Open 000678324 700000

90381122 Customer 1 Open 000678231 2 Accounts

92192911 Customer 1 Open 000678365 660200

90000371 Customer 1 Open 000678764 550000

90000812 Customer 1 Open 000678388 660200

90007211 Customer
2014 SAP AG or an SAP affiliate 1 All rights reserved.
company. Open 000678399 700000 12
 User Name

Company (All) Store (All) City (All)

Store List

Stores

Name Address Details

Department Store A 100 Some Street 2 Buildings

Company XX City 1 560 Shops

Department Store B 998 Some Street 1 Building

Company XX City 1 254 Shops

Department Store C 1001 Some Street 3 Buildings

Company YY City 2 780 Shops

Department Store D 60 Some Street 2 Buildings

Company YY City 3 400 Shops

Department Store E 88 Some Street 2 Buildings

Company ZZ City 3 360 Shops

2014 SAP AG or an SAP affiliate company. All rights reserved. 13

List Reporting
Filtered List Report
 User Name

Application Title

Variant Name

Status Customer Company Code

Open Customer 1
ACME Reset Search

Items (223)

Customer Description Status Company Code Offset Account

90000201 Customer 1 Open 100450003 660200

90000213 Customer 1 Open 200776544 700000

90000183 Customer 1 Open 000678332 2 Accounts

90000623 Customer 1 Open 000322235 660200

90000871 Customer 1 Open 000678332 550000

90007211 Customer 1 Open 000678323 660200

90002121 Customer 1 Open 000678388 700000

90000231 Customer 1 Open 000678755 660200

90000231 Customer 1 Open 000678324 700000

90381122 Customer 1 Open 000678231 2 Accounts

92192911 Customer 1 Open 000678365 660200

90000371 Customer 1 Open 000678764 550000

2014 SAP AG or an SAP affiliate company. All rights reserved. 15
List Reporting
Categorized List Report
 User Name

Application Title

12 31 45 45

Open In Progress Sent Completed

Open (12)

Customer Description Status Company Code Offset Account

90000201 Customer 1 Open 100450003 660200

90000213 Customer 1 Open 200776544 700000

90000183 Customer 1 Open 000678332 2 Accounts

90000623 Customer 1 Open 000322235 660200

90000871 Customer 1 Open 000678332 550000

90007211 Customer 1 Open 000678323 660200

90002121 Customer 1 Open 000678388 700000

90000231 Customer 1 Open 000678755 660200

90000231 Customer 1 Open 000678324 700000

90381122 Customer 1 Open 000678231 2 Accounts

92192911 Customer 1 Open 000678365 660200

90000371 Customer 1 Open 000678764 550000

2014 SAP AG or an SAP affiliate company. All rights reserved. 17

Object Pages
Object View
 User Name

Contacts(5) Contact

Search
Invoice 90035638 2 821,06
EUR
Invoice

90035638 3K Bill To: Name1 Unpaid

EUR Some Street 36,City 2,13467, Country 2 Invoice Date: 2014.05.29
PO Unpaid

SO 38089

Due on 2017.02.22

Invoice Purchase Order:

Sales Order: 38089
90035637 3K Ref. Invoice: 0090035638
EUR
Unpaid Payment Terms: Customer Invoices Unlimited
PO
Carrier: Some Express Shipping
SO 38084
Incoterms: CPT sss
Due on 2017.02.20

Invoice Items (1)

90035633 3K
EUR Description Quantity Unit Price Subtotal
PO Unpaid

SO 38071 Laptop 1 HT-1010 2 431, 95 EUR 2 431, 95 EUR

Due on 2017.02.19

19
A

2014 SAP AG or an SAP affiliate company. All rights reserved. 19
Create Forms
Create Form
 User Name

Contacts(5) New Contact

Search Personal Information

A
A
A
First Name:

Name 1
* Last Name:
Company 3

Job Title:

JJ
Department:

Name 2
* Company:
Company 4

Communication Information
Name 3
Telephone:
Company 5

Telephone Extension:
L
L
Mobile Phone:
Name 4
Company 6 Fax:

Fax Extension:
P
P

Email:
Name 5
A
Save Cancel
Create Forms
Multi-Step Create Form
 User Name

Cart

Delivery Schedules

Customer: Customer 1

Requested Delivery:
06/19/214

Items (1)

Description Product No. Requested Quantity Requested Delivery

Notebook Professional HT-1010
15
3 Item 06/19/214

Checkout
Analytics
Smart Business
 User Name

Liquidity Forecast

Forecast in 7 Days (USD) 18,385 M

USD
Subheader

Gross Revenue Culmulative Totals This is the Headline

Global Year to Date Expenses (M EUR) This is the
Subheadline
125 0M 80 M

348.2 M 75 June 1 June 30

USD, Actual Actual and Target USD

Cash Flow by Location

Inflow in Display Currency

Europe -172M Outflow in Display Currency

193M

-34M
Australia

42M

-94M
Asia

117M

-200M -100M -100M -50M 0 50M 100M 150M 200M

Open in
 User Name

Financial Close Progress

All Closing Phase All Closing Milestone All Status of Closing Task All Closing Template All Closing Task is Delayed

Completion Rate
Month-End Company Name

By Region

120

12

100 15

80

18
60
8
89
40

50
20

24

0
Region 1 Region 2 Region 3

Open in
 User Name

Liquidity Forecast

Forecast in 7 Days (USD) 18,385 M

USD
Subheader

Gross Revenue Culmulative Totals This is the Headline

Global Year to Date Expenses (M EUR) This is the
Subheadline
125 0M 80 M

348.2 M 75 June 1 June 30

USD, Actual Actual and Target USD

Forecast by Date

3.0 B
2.6B
2.4 Net Cash Flow
B
Balance
2.0 B
1.4B 1.6B

1B 1B
1.0 B
.7B 1.5B
.9B
.3B .3B
0
-.5B -.8B
-1B
-1.0 B

-2.0 B

-3.0 B
20140129 20140130 20140131 20140201 20140202 20140203 20140203

Open in
 User Name

Unused Contracts

Unused Contracts 84.585.546,7

Gross Revenue Culmulative Totals Comparative

Global Year to Date Expenses (M EUR) Annual Totals
Country 1 234 M
125
Country 2 97 M

348.2 M 75
Country 3 197 M

USD, Actual Actual and Target USD, By Region

By Supplier

3.5 No. of Pur. Contr. Older than Specfd No. of Days

2.5

1.5

1
20140129 20140130 20140131 20140201 20140202 20140203

Open in
 User Name

Unused Contracts

Unused Contracts 84.585.546,7

Gross Revenue Culmulative Totals Comparative

Global Year to Date Expenses (M EUR) Annual Totals
Country 1 234 M
125
Country 2 97 M

348.2 M 75
Country 3 197 M

USD, Actual Actual and Target USD, By Region

By Supplier

Current Account 170M Amount in Display Currency

201302
Notice Deposit 200M

Current Account 250M

201303
Notice Deposit 75M

Current Account 100M

201304 Notice Deposit 125M

Other Short Term Investment 170M

Current Account 175M

201305 Notice Deposit 225M

0 50M 100M 150M 200M 250M

Open in
 User Name

Unused Contracts

Unused Contracts 84.585.546,7

Gross Revenue Culmulative Totals Comparative

Global Year to Date Expenses (M EUR) Annual Totals
Country 1 234 M
125
Country 2 97 M

348.2 M 75
Country 3 197 M

USD, Actual Actual and Target USD, By Region

By Supplier

Current Account 170M Amount in Display Currency

201302
Notice Deposit 200M

Current Account 250M

201303
Notice Deposit 75M

Current Account 100M

201304 Notice Deposit 125M

Other Short Term Investment 170M

Current Account 175M

201305 Notice Deposit 225M

0 50M 100M 150M 200M 250M

Open in
Processing
Process App
 User Name

Order from Requisitions

50 43 19 23
Assigned PRs
Simulated POs
Created POs
Approved PRs

PricingPRs
Approved Details
PR Item Description Release Date Delivery Value

10014284-10 Lorem ipsum dolor sit amet 01/01/14 12/31/14 95.00 USD

10014285-10 Lorem ipsum dolor sit amet 01/01/14 12/31/14 66.50 USD

10014286-10 Lorem ipsum dolor sit amet 01/01/14 12/31/14 99.00 USD

01/01/14 12/31/14
10014287-10 Lorem ipsum dolor sit amet 66.50 USD

01/01/14 12/31/14 66.50

10014288-10 Lorem ipsum dolor sit amet USD

01/01/14 12/31/14 66.50

10014289-10 Lorem ipsum dolor sit amet USD

Assign Supplier
Patterns & Components
 User Name

My Home

Net Order Value is at Comparative Annual Approve Travel Gross Revenue

Totals Request Global Year to Date

Country 1 234 M

Country 2 97 M

21,5 v Country 3 197 M

1 48.2
Relative Imporvement
%
USD, By Region
Request USD, Actual
M

Gross Revenue under This is the Headline

Target This is the Subheadline
Global Year to Date

SAP Unveils Powerful New Player Comparison Tool

48.2 M
Exclusively on SAP.com
December 06, 2013
45.2 M
USD, Absolute Deviation SAP News This is the value definition

This is the Headline Culmulative Totals This is the Headline I am a short title !
This is the Subheadline Expenses Still Headline This shows a StaticTile wit

Subheadline
0M 80 M 125 M

June 1 June 30 75 M
0
USD USD, Actual and Target This is value definition 0 Days running without b

2014 SAP AG or an SAP affiliate company. All rights reserved. 34

BusyIndicator

Request

Control Example

Approve Reject

2014 SAP AG or an SAP affiliate company. All rights reserved. 35

Button

Content Header Footer

Content
Action1 Action2

Action1 Action2
Pressed

Default Action Action1 Action1

(First and most frequently used action
in footer)

Approve Approve

Approve / Reject

Reject Reject

2014 SAP AG or an SAP affiliate company. All rights reserved. 36

Checkbox

Enabled Disabled

Option 1 Option 1

Option 2 Option 2

Option 3 Option 3

Option 4 Option 4

Option 5 Option 5

2014 SAP AG or an SAP affiliate company. All rights reserved. 37

Dialog

Lorem
Lorem ipsum
ipsum Quick
Quick Entry
Entry Alert
Alert

Lorem ipsum dolor sit amet? Lorem ipsum dolor st amet,

Container can be consetetur sadipscing elitr, sed
Add note diam nonumy eirmod tempor
filled with any invidunt ut labore et dolore
content magna aliquyam erat, sed diam
voluptua. At vero eos et accusam
et justo duo dolores.
Dolor Sit OK Cancel OK Cancel

2014 SAP AG or an SAP affiliate company. All rights reserved. 38

FileUploader

2014 SAP AG or an SAP affiliate company. All rights reserved. 39

 User Name

Requests (42) Request

Search
Name1 3,762,199.90
USD
Name 1 100 Mio
USD 1 day ago
3 5

1 Item Today

Name 2 3,762,199.90 Attachments (5)

USD

3 Items 1 day ago SomeTextFile.txt
28.11.2013 by Marty McFly
Name 3 6,450.00

USD SomeWordDocumentWithRatherLongTitle.doc
28.11.2013 by Marty McFly
10 Items 6 days ago

Photo_of_my_TIMEMACHINE.jpg
Name 4 1.99 21.10.2013 by Emmett Brown
USD

100 Items Last week

Blue-Prints_for_Flux-Capacitor.jpg
21.10.2013 by Emmett Brown
Name 5 1771.00
USD

84 Items Last week Shopping-list_Parts-you-need-for-a-time-machine.xls

21.10.2013 by Emmett Brown

FilterBar

2014 SAP AG or an SAP affiliate company. All rights reserved. 41

 User Name

Application Title

Variant Name

Status Customer Company Code

Open Customer 1
ACME Reset Search

Items (223)

Customer Description Status Company Code Offset Account

90000201 Customer 1 Open 100450003 660200

90000213 Customer 1 Open 200776544 700000

90000183 Customer 1 Open 000678332 2 Accounts

90000623 Customer 1 Open 000322235 660200

90000871 Customer 1 Open 000678332 550000

90007211 Customer 1 Open 000678323 660200

90002121 Customer 1 Open 000678388 700000

90000231 Customer 1 Open 000678755 660200

90000231 Customer 1 Open 000678324 700000

90381122 Customer 1 Open 000678231 2 Accounts

92192911 Customer 1 Open 000678365 660200

90000371 Customer 1 Open 000678764 550000

2014 SAP AG or an SAP affiliate company. All rights reserved. 42
FacetFilter

2014 SAP AG or an SAP affiliate company. All rights reserved. 43

 Request

Suppliers (All) Items (All) All Business Partners (All) Orders (All)

Variant Name 10
Items

Table or chart or other content

Suggest solution
 Request

Suppliers (All) Items (All) All Business Partners (All) Orders (All)

SearchSearch
Search
Variant Name 10
All Orders Items

Order 1

Order 2

Order 3

Order 4

Table or chart or other content

Suggest solution
 Request

Filtered by Order (Order 2, Order 3, Order 4)

Variant Name 10
Items

Table or chart or other content

Suggest solution
Contextual Filter

Filtered by: variant 1

Filtered by: Variant 2 If there is only one filter

criterion which the user can
select an instance from, the
icon should be changed to
match said criterion. In this
case: Customer

2014 SAP AG or an SAP affiliate company. All rights reserved. 47

 Phone

Sales Orders (42) Select Customer

Filtered by: Variant 2 Search

Name 1 100 Mio Customer 1 (500098)
USD

1 Item Today Department:

Sales

Name 2 3,762,199.90 Customer 2 (300973)

USD

3 Items 1 day ago Department:

Lorem Ipsum
Sales

Name 3 6,450.00 Customer 3 (300700)

USD

Department:
10 Items 6 days ago
Sales

Name 4 1.99 Customer 4 (Name 1) (509999)

USD

Department:
100 Items Last week
Approve Reject Sales
SimpleForm

Example Label: This is an example description

Another Example: Description example
Label Example: Another example for a description
Yet Another Label: Next description goes here

Some Example Form

Label 000 Qoutation Details

Label 001: abcdefghijklmno

Purchase Order: 123456789123

Label 002 / Lable 003. : abcdefghojkl 12345 Valid Form: 09/06/2014 12:00

Label 004 / Label 005: 123456 abcdefghijklm

ZIP Code/City: 1000 EUR

Label 006: : Lorem Ipsum

2014 SAP AG or an SAP affiliate company. All rights reserved. 49

FeedListItem

Firstname Lastname: Hi Boss,

my wife will be on sabbatical in the month of December and we have 5 kids. Best
Firstname
2013-06-09

Firstname2 Lastname2: Hi Firstname,

Hmmmmmm. I am not so sure yet. You know we have so much work open for the
current project. regards Firstname2
2013-06-08

Firstname3 Lastname3: This FeedListItem displays an ImagePool image. Cras

congue posuere metus sed tempus. Mauris euismod, dui sit amet molestie volutpat,
ipsum est viverra velit, id ultricies ante dolor et ligula.
Rejected Dec 04, 2012

2014 SAP AG or an SAP affiliate company. All rights reserved. 50

FeedListItem

Firstname Lastname: This FeedListItem comes with senderActive = false and

iconActive = This FeedListItem comes with senderActive = false and iconActive =
interdum eget sollicitudin acc, blandit a ante.
Waiting for Approval Dec 02, 2012

Firstname2 Lastname2: This FeedListItem comes without an image and has a very long info
text
Waiting for Approval and waiting and waiting and waiting and waiting and waiting and waiting and waiting and
waiting and waiting and waiting and waiting and waiting and waiting and waiting and waiting and waiting and
waiting and waiting and waiting and waiting Nov 23, 2012

2014 SAP AG or an SAP affiliate company. All rights reserved. 51

FeedListItem

Firstname1 Lastname1:This one has no date

New

Firstname2 Lastname2: And this one does without info

Nov 01, 2012

Firstname3 Lastname3: OPEN (No decision yet)

This one has no sender but active/inactve icons (check out the icon's color, when you

press this item)

Nov 01, 2012

2014 SAP AG or an SAP affiliate company. All rights reserved. 52

Login

2014 SAP AG or an SAP affiliate company. All rights reserved. 53

MessageToast

Requests (42)
Control Example
Search

Your request has been

approved
Name 1 100 Mio
USD

1 Item Today

On behalf of Marty McFox

Name 2 3,762,199.90
USD

3 Items 1 day ago

Name 3 6,450.00
USD

10 Items 6 days ago

Your request has been

Name4
approved
1.99
USD

100 Items
Last week

2014 SAP AG or an SAP affiliate company. All rights reserved. 54

ObjectHeader

Name2 3,762,199.90
USD

1 day ago

The following slides show multiple examples and variations of the ObjectHeader control.

2014 SAP AG or an SAP affiliate company. All rights reserved. 55

ObjectHeader

Example Object Header Text 3.624

Euro
Forwarded by Name2

First Attribute Positive Text

Second Attribute Status Info

Example Object Header Text That 999.999.123.624,00

Euro
Is Rather Long It Is Even So Long
That It has to Wrap Twice
Added by Name3
Negative Text About Something That Is Extremely Negative

2014 SAP AG or an SAP affiliate company. All rights reserved. 56

ObjectHeader

Example Object Header Text 3.624

Euro
First Attribute Positive Text

Second Attribute with a very long descriptive text that will Status Info
wrap around because it is sooo long

Example Object Header Text 3.624

Euro
First Attribute Positive Text

Status Info

2014 SAP AG or an SAP affiliate company. All rights reserved. 57

ObjectHeader

Example Object Header Text That Is Sooo Long That

It has To Wrap Several Times Before We Reach The
End. That Is How Long This Text Is Can You Even
Begin To Believe Just How Long This Text Actually Is
Or Do You Fail To Believe It?
xxx.999.999.123.624,00
Euro

Added by Name5

First Attribute Negative Text

Second Attribute with a very long descriptive text that will Status Info
wrap around because it is sooo long

2014 SAP AG or an SAP affiliate company. All rights reserved. 58

ObjectHeader

Example Object Header Text That Is Sooo Long That It

has to Wrap Once

Added by Name5 Positive Text

Example Object Header Text That Is Rather Long That It

has to Wrap Once
xxx.999.999.123.624,00
Euro

Added by Name5

First Attribute Negative Text

Second Attribute with a very long descriptive text that will Status Info
wrap around because it is sooo long

2014 SAP AG or an SAP affiliate company. All rights reserved. 59

Bar

Footer [Tablet/Desktop]

Approve Reject

Footer [Tablet/Desktop with default action]

Save Cancel

Footer [Phone]

Approve Reject

Footer [Phone with default action]

Save Cancel

2014 SAP AG or an SAP affiliate company. All rights reserved. 60

Popover

Quick Overview
Popover Employee Profile
Profile
Popover Employee

Firstname LastName

Hiro Protagonist Sales Assistant
Senior Deliverator

Contact Details
Contact Details Mobile:
Mobile: 0132-76541234

0132-76541234 Work:
Work:

0468-75312468
0468-75312468
Email:
Email:
Action 1 Action 2 firstname@somecompany.com
h.protagonist@cosanostra.com
Company
Company Name:
Name: Company A
Address:
Company Name
8716 Street, Country

Send Email
Open in Jam

2014 SAP AG or an SAP affiliate company. All rights reserved. 61

Popover

Example without icon

Quick
Quick Overview
Overview Person
Person Quick
Quick Overview
Overview Company
Company Quick
Quick Overview
Overview Generic
Generic

Firstname Lastname Company B Company B

Senior Deliverator Department C Department C

Contact Details Contact Details

Mobile: Phone: Mobile:
0132-76541234 0468-75312468 0132-76541234
Work: Address: Phone:
0468-75312468 Some street 3 0468-75312468
Email: 1111111 City Email:
Lastname@CompanyB.com lastname@companyB.com

Main Contact
Company Company
Name: Name: Name:
Company B Fistname Name Company B
Mobile:
0132-76541234 This is a status info and can have
Send Email
Email: semantic colors like
@NegativeText or @CriticalText
Name@companyB.com or @PositiveText.

2014 SAP AG or an SAP affiliate company. All rights reserved. 62

Progress Indicator

Enabled Disabled
Negative without text Negative without text

Positive with text Positive with text

0.99GB of 1TB 0.99GB of 1TB

Critical, 50% with text Critical, 50% with text

25% 25%

Neutral with text Neutral with text

50% 50%

2014 SAP AG or an SAP affiliate company. All rights reserved. 63

RadioButton

Enabled/disabled All disabled

Option 1 Option 1

Option 2 Option 2

Option 3

Option 4

2014 SAP AG or an SAP affiliate company. All rights reserved. 64

RatingIndicator

2014 SAP AG or an SAP affiliate company. All rights reserved. 65

SearchField

Initial State
Search

Active/Typing
Lorem Ips|

Search complete
Lorem Ipsum

2014 SAP AG or an SAP affiliate company. All rights reserved. 66

SegmentedButton

Content
Action1 Action2 Action3

Header

Action1 Action2 Action3

Footer
Action1 Action2 Action3

2014 SAP AG or an SAP affiliate company. All rights reserved. 67

Select

Used in Content Area Footer

Vacation

Vacation
Price

Vacation Item

Leave 1/2 Day Price

Sick Leave Scheduling

Educational Leave

2014 SAP AG or an SAP affiliate company. All rights reserved. 68

Value Help Dialog

Status

Status

Com|
Company 1
Company 2
Company 3
Company 4

Status

Company 1 |

2014 SAP AG or an SAP affiliate company. All rights reserved. 69

 Select Company

Search

Advanced Search

Company Code:: Currency Code::

Company Name::

Items (1234)

Company Code Company Name City Currency Code

90000201 Company A City 1 EUR

90000213 Company A City 1 EUR

90000183 Company A City 1 EUR

90000623 Company A City 1 EUR

90000871 Company A City 1 EUR

Selected Items (1)

CompanyA

Excluded Items (1)

CompanyA

2014 SAP AG or an SAP affiliate company. All rights reserved. OK Cancel 70

ComboBox

Choose your country |Choose your country

|Choose your country

Algeria

Argentina

Australia

Austria

Bahrain

Belgium

Bosnia Herzegovina

Brazil

Bulgaria

Canada

2014 SAP AG or an SAP affiliate company. All rights reserved. 71

Multi ComboBox

Choose your country |Choose your country

|Choose your country Germany |

Croatia Croatia

Cuba Cuba

Czech Republic Czech Republic

Denmark Denmark

Egypt Egypt

Estonia Estonia

Finland Finland

France France

Germany Germany

Ghana Ghana

2014 SAP AG or an SAP affiliate company. All rights reserved. 72

Slider

Enabled Disabled

2014 SAP AG or an SAP affiliate company. All rights reserved. 73

Switch

Enabled Disabled
ON OFF ON OFF

I O I O

2014 SAP AG or an SAP affiliate company. All rights reserved. 74

TextArea

Standard
Add note Lorem ipsum dolor sit amet, consectetuer
adipiscing elit. Aenean commodo ligula eget
dolor. Aenean massa. Cum sociis natoque
penatibus et magnis.

Inactive
Lorem ipsum dolor sit amet, consectetuer
adipiscing elit. Aenean commodo ligula eget
dolor. Aenean massa. Cum sociis natoque
penatibus et magnis.

Semantic
Lorem ipsum dolor sit amet, consectetuer
adipiscing elit. Aenean commodo ligula eget
dolor. Aenean massa. Cum sociis natoque
penatibus et magnis.
Lorem ipsum dolor sit amet, consectetuer Lorem ipsum dolor sit amet, consectetuer
adipiscing elit. Aenean commodo ligula eget adipiscing elit. Aenean commodo ligula eget
dolor. Aenean massa. Cum sociis natoque dolor. Aenean massa. Cum sociis natoque
penatibus et magnis. penatibus et magnis.

2014 SAP AG or an SAP affiliate company. All rights reserved. 75

Date picker

01/01/14

01/01/14
November 2013

Sun Mon Tue Wed Thu Fri Sat

27 28 29 30 31 1 2 3

28 4 5 6 6 8 9 10

29 11 12 13 14 15 16 17

30 18 19 20 21 22 23 24

31 25 26 27 28 29 30 1

32 2 3 4 5 6 7 8

2014 SAP AG or an SAP affiliate company. All rights reserved. 76

Sharing

Lorem Ipsum
Phone
Search

Tony Stark 100 Mio

USD

1 Item Today

Emmett 3,762,199.90
iPad & Desktop USD
Brown
3 Items 1 day ago
Send Email
On behalf of Marty McFly

Send Email Save as Tile

Bill Lumbergh 6,450.00
Save as Tile USD Share in SAP Jam
10 Items 6 days ago
Share in SAP Jam open in <app type>

Milton Waddams
open in <app type> 1.99
USD
100 Items Cancel
Last week

2014 SAP AG or an SAP affiliate company. All rights reserved. 77

IconTabBar

Container can be filled

with any content

1701 32

Container can be filled

with any content

2014 SAP AG or an SAP affiliate company. All rights reserved. 78

IconTabBar

The use of
Info Notes Approvals Attachments Lorem Ipsum Babies Doner Kebab
labels is
optional. Please
Container can be filled mind to either
with any content use labels for
ALL or NONE of
the tabs.

2014 SAP AG or an SAP affiliate company. All rights reserved. 79

IconTabBar

42 of 42 19 of 42 23 of 42
Ordered
Shipped
Delivered

Container can be filled

with any content

8 4 7

19 Products
Type A Type B Type C

Container can be filled

with any content

2014 SAP AG or an SAP affiliate company. All rights reserved. 80

IconTabBar

Lorem Ipsum Dolor Sit Amet Consectetuer

Container can be filled

with any content

2014 SAP AG or an SAP affiliate company. All rights reserved. 81

 Phone

Request

On behalf of Name 2

Name 1 3,762,199.90
USD

1 day ago
32

Label Lorem Ipsum:

Description dolor sit

Consectetuer:
Eget dolor Aenean massa

Adipiscing elit Aenean:

Cum sociis natoque

Commodo ligula:
Penatibus et magnis dis parturient
TabContainer

ITEMS (3)

Input

Prompt Text |

Lorem ipsum Lorem ipsum|

Lorem ipsum

Error

Warning

Success

2014 SAP AG or an SAP affiliate company. All rights reserved. 83

Table

Pricing Details (3)

Role Valid from Valid to Project Price/ h

Senior Consultant 01/01/14 12/31/14 95.00 USD

Junior Consultant 01/01/14 12/31/14 66.50 USD

Project Manager 01/01/14 12/31/14 99.00 USD

2014 SAP AG or an SAP affiliate company. All rights reserved. 84

 Phone

Customer

Pricing Details

Role Project Price/h

Senior Consultant 95.00 USD

Valid from:
01/01/14
Valid to:
12/31/14

Junior Consultant 66.50 USD

Valid from:
01/01/14
Valid to:
12/31/14

Senior Consultant 99.00 USD

Analytical Table (ALV)- NOT RESPONSIVE

Items (1234)
Document No. Description PK Posting Date Offset Account

90000201 Laptops Brand1 40 01.14.2014 660200

90000213 HANA Servers 40 01.14.2014 700000

90000183 Tablet 40 01.14.2014 2 Accounts

90000623 Printers 40 01.14.2014 660200

90000871 3D Printers 40 01.14.2014 550000

90007211 Smartphone 40 01.14.2014 660200

90002121 HANA Servers 40 01.14.2014 700000

90000231 Chair 40 01.14.2014 660200

90000231 Printers 40 01.14.2014 700000

90381122 3D Printers 40 01.14.2014 2 Accounts

92192911 Laptops 40 01.14.2014 660200

90000371 Tablet 40 01.14.2014 550000

90000812 HANA Servers 40 01.14.2014 660200

90007211 Smartphone 40 01.14.2014 700000

2014 SAP AG or an SAP affiliate company. All rights reserved. 86

Timeline

Name 2 added a note.

Today at 11:32 AM

Lorem ipsum dolor sit amet, consectetuer

adipiscing elit. Aenean commodo ligula
eget dolor. Aenean massa. Sociis.

Name 3 completed a call.

Today at 12:56 AM

Called Name1 to discuss Lorem ipsum

dolor sit amet, consectetuer adipiscing elit.

Name 2 added an invoice.

Yesterday at 11:14 PM

Invoice 199,00
USD
(421999)
Open

Name1 increased the probability from 20%

to 30%.
Two days ago at 03:36 PM

Name1 completed a call.

Two days ago at 12:56 AM

Called Name3 to clarify the details on the

latest Nulla consequat massa quis enim.
Donec pede justo.

2014 SAP AG or an SAP affiliate company. All rights reserved. 87

Tokenizer

Enabled

Token1 Field Text

Enabled Hover

Token1

Enabled Selected

Token1 Token2

2014 SAP AG or an SAP affiliate company. All rights reserved. 88

Panel / Tray Expand

Group1 Header Title

Group1 Header Title

Lorem ipsum dolor sit amet, consectetuer adipiscing elit commodo ligula eget dolor.
Aenean massa

2014 SAP AG or an SAP affiliate company. All rights reserved. 89

Tree Table (Not Responsive)

Name Description

item1

Sub item1-1

Sub item1-1-1

Sub item1-1-2

Sub item1-2

item2

2014 SAP AG or an SAP affiliate company. All rights reserved. 90

Backgrounds
For tablet and phone designs
Use this background to create Launchpad for tablets and PCs
Use this background to create apps for tablets and PCs
Use this background for smart phone apps
 2014 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 AG 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 AG (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 AG and its distributors contain proprietary software components of other software vendors.

National product specifications may vary.

These materials are provided by SAP AG or an SAP affiliate company for informational purposes only, without representation or warranty of any kind,
and SAP AG or its affiliated companies shall not be liable for errors or omissions with respect to the materials. The only warranties for SAP AG 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 AG 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 AGs 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 AG 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.

2014 SAP AG or an SAP affiliate company. All rights reserved. 95

 2014 SAP SE oder ein SAP-Konzernunternehmen.
Alle Rechte vorbehalten.

Weitergabe und Vervielfltigung dieser Publikation oder von Teilen daraus sind, zu welchem Zweck und in welcher Form auch immer, ohne die
ausdrckliche schriftliche Genehmigung durch SAP AG oder ein SAP-Konzernunternehmen nicht gestattet.

SAP und andere in diesem Dokument erwhnte Produkte und Dienstleistungen von SAP sowie die dazugehrigen Logos sind Marken oder
eingetragene Marken der
SAP AG (oder von einem SAP-Konzernunternehmen) in Deutschland und verschiedenen anderen Lndern weltweit. Weitere Hinweise und
Informationen zum Markenrecht finden Sie unter http://global.sap.com/corporate-de/legal/copyright/index.epx.

Die von SAP AG oder deren Vertriebsfirmen angebotenen Softwareprodukte knnen Softwarekomponenten auch anderer Softwarehersteller
enthalten.

Produkte knnen lnderspezifische Unterschiede aufweisen.

Die vorliegenden Unterlagen werden von der SAP AG oder einem SAP-Konzernunternehmen bereitgestellt und dienen ausschlielich zu
Informationszwecken.
Die SAP AG oder ihre Konzernunternehmen bernehmen keinerlei Haftung oder Gewhrleistung fr Fehler oder Unvollstndigkeiten in dieser
Publikation. Die SAP AG
oder ein SAP-Konzernunternehmen steht lediglich fr Produkte und Dienstleistungen nach der Magabe ein, die in der Vereinbarung ber die
jeweiligen Produkte und Dienstleistungen ausdrcklich geregelt ist. Keine der hierin enthaltenen Informationen ist als zustzliche Garantie zu
interpretieren.

Insbesondere sind die SAP AG oder ihre Konzernunternehmen in keiner Weise verpflichtet, in dieser Publikation oder einer zugehrigen Prsentation
dargestellte Geschftsablufe zu verfolgen oder hierin wiedergegebene Funktionen zu entwickeln oder zu verffentlichen. Diese Publikation oder eine
zugehrige Prsentation,
die Strategie und etwaige knftige Entwicklungen, Produkte und/oder Plattformen der SAP AG oder ihrer Konzernunternehmen knnen von der SAP
AG oder ihren Konzernunternehmen jederzeit und ohne Angabe von Grnden unangekndigt gendert werden.
Die in dieser Publikation enthaltenen Informationen stellen keine Zusage, kein Versprechen und keine rechtliche Verpflichtung zur Lieferung von
Material, Code oder Funktionen dar. Smtliche vorausschauenden Aussagen unterliegen unterschiedlichen Risiken und Unsicherheiten, durch die die
tatschlichen Ergebnisse von den Erwartungen abweichen knnen. Die vorausschauenden Aussagen geben die Sicht zu dem Zeitpunkt wieder, zu
dem sie gettigt wurden. Dem Leser wird empfohlen, diesen Aussagen kein bertriebenes Vertrauen zu schenken und sich bei Kaufentscheidungen
nicht auf sie zu sttzen.

2014 SAP AG or an SAP affiliate company. All rights reserved. 96