Prototyping Kit - SAP User Experience Community

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 SAP’s 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 [email protected] .
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
3,762,199.90
Name1
Name 1
100 Mio
USD
USD
1 Item
1 day ago
Today
3
Name 2
3,762,199.90
USD
3 Items
Label Lorem Ipsum:
1 day ago
Consectetuer:
Name 3
6,450.00
Adipiscing elit Aenean:
Commodo ligula:
USD
10 Items
Name 4
Name 5
1.99
Cum sociis natoque
Penatibus et magnis dis parturient
ITEMS (3)
Quantity
Price
Total
Description
Item 1
1
12,000.00 USD
12,000.00 USD
1771.00
Item 2
15
250,000.00 USD
3,750,000.00 USD
Last week
Item 3
1
199,90 USD
199,90 USD
Last week
USD
84 Items
Eget dolor Aenean massa
6 days ago
USD
100 Items
Description dolor sit
Approve
Reject
With Letter Boxing
Requests (42)
U
Request
Search
3,762,199.90
Name2
Name 1
100 Mio
USD
USD
1 Item
1 day ago
Today
3
Name 2
3,762,199.90
USD
3 Items
Label Lorem Ipsum:
1 day ago
Consectetuer:
Name 3
6,450.00
Adipiscing elit Aenean:
Commodo ligula:
USD
10 Items
Name 4
Name 5
1.99
Cum sociis natoque
Penatibus et magnis dis parturient
ITEMS (3)
Quantity
Price
Total
Description
Item 1
1
12,000.00 USD
12,000.00 USD
1771.00
Item 2
15
250,000.00 USD
3,750,000.00 USD
Last week
Item 3
1
199,90 USD
199,90 USD
Last week
USD
84 Items
Eget dolor Aenean massa
6 days ago
USD
100 Items
Description dolor sit
© 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
Customer 1
ACME
Open
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
Open
000678399
700000
©90007211
2014 SAP AG or an SAP affiliate
company.
Customer
1 All rights reserved.
12
User Name
Company (All)
Store (All)
City (All)
Store List
Stores
Name
Department Store A
Company XX
Department Store B
Company XX
Department Store C
Company YY
Department Store D
Company YY
Department Store E
Company ZZ
© 2014 SAP AG or an SAP affiliate company. All rights reserved.
Address
Details
100 Some Street
2 Buildings
City 1
560 Shops
998 Some Street
1 Building
City 1
254 Shops
1001 Some Street
3 Buildings
City 2
780 Shops
60 Some Street
2 Buildings
City 3
400 Shops
88 Some Street
2 Buildings
City 3
360 Shops
13
List Reporting
Filtered List Report
User Name
Application Title
Variant Name
Status
Customer
Company Code
Customer 1
ACME
Open
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
Open
31
In Progress
45
Sent
45
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
2 821,06
Invoice 90035638
Invoice
90035638
EUR
3K
Bill To: Name1
EUR
Some Street 36,City 2,13467, Country 2
Unpaid
Invoice Date: 2014.05.29
Unpaid
PO
SO 38089
Due on 2017.02.22
Purchase Order:
Invoice
90035637
3K
EUR
Unpaid
PO
Ref. Invoice:
0090035638
Carrier:
Incoterms:
Due on 2017.02.20
Invoice
Customer Invoices Unlimited
Some Express Shipping
CPT sss
Items (1)
3K
EUR
Unpaid
PO
38089
Payment Terms:
SO 38084
90035633
Sales Order:
Description
Quantity
Unit Price
Subtotal
Laptop 1
HT-1010
2 431, 95 EUR
2 431, 95 EUR
SO 38071
Due on 2017.02.19
A
© 2014 SAP AG or an SAP affiliate company. All rights reserved.
19
19
Create Forms
Create Form
User Name
Contacts(5)
Search
A
A
Name 1
New Contact
Personal Information
First Name:
* Last Name:
Company 3
Job Title:
J
Name 2
Department:
* Company:
Company 4
Communication Information
Name 3
Company 5
Telephone:
Telephone Extension:
L
Mobile Phone:
Name 4
Company 6
Fax:
Fax Extension:
P
Name 5
A
Email:
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.
Notebook Professional
15
HT-1010
Requested Quantity
3
Item
Requested Delivery
06/19/214
Checkout
Analytics
Smart Business
User Name
Liquidity Forecast
18,385 M
Forecast in 7 Days (USD)
USD
Subheader
Gross Revenue
Culmulative Totals
This is the Headline
Global – Year to Date
Expenses (M EUR)
This is the Subheadline
125
348.2 M
USD, Actual
0M
75
Actual and Target
80 M
June 30
USD
June 1
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
18,385 M
Forecast in 7 Days (USD)
USD
Subheader
Gross Revenue
Culmulative Totals
This is the Headline
Global – Year to Date
Expenses (M EUR)
This is the Subheadline
125
348.2 M
75
Actual and Target
USD, Actual
0M
June 1
80 M
June 30
USD
Forecast by Date
3.0 B
2.6B
2.4
B
2.0 B
Balance
1.6B
1.4B
1.0 B
Net Cash Flow
1B
1B
.7B
1.5B
.9B
0
.3B
.3B
-.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
84.585.546,7
Unused Contracts
Gross Revenue
Culmulative Totals
Global – Year to Date
Expenses (M EUR)
125
348.2 M
75
Actual and Target
USD, Actual
Comparative
Annual Totals
Country 1
234 M
Country 2
97 M
Country 3
197 M
USD, By Region
By Supplier
3.5
No. of Pur. Contr. Older than Specfd No. of Days
3
2.5
2
1.5
1
20140129
20140130
20140131
20140201
20140202
20140203
Open in
User Name
Unused Contracts
84.585.546,7
Unused Contracts
Gross Revenue
Culmulative Totals
Global – Year to Date
Expenses (M EUR)
Comparative
Annual Totals
125
348.2 M
USD, Actual
75
Actual and Target
Country 1
234 M
Country 2
97 M
Country 3
197 M
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
201304
100M
Notice Deposit
125M
Other Short Term Investment
170M
Current Account
201305
175M
Notice Deposit
225M
0
50M
100M
150M
200M
250M
Open in
User Name
Unused Contracts
84.585.546,7
Unused Contracts
Gross Revenue
Culmulative Totals
Global – Year to Date
Expenses (M EUR)
Comparative
Annual Totals
125
348.2 M
USD, Actual
75
Actual and Target
Country 1
234 M
Country 2
97 M
Country 3
197 M
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
201304
100M
Notice Deposit
125M
Other Short Term Investment
170M
Current Account
201305
175M
Notice Deposit
225M
0
50M
100M
150M
200M
250M
Open in
Processing
Process App
User Name
Order from Requisitions
50
43
19
23
Approved PRs
Assigned PRs
Simulated POs
Created POs
Approved
PricingPRs
Details
Release Date
Delivery
Value
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
10014287-10
Lorem ipsum dolor sit amet
01/01/14
12/31/14
10014288-10
Lorem ipsum dolor sit amet
01/01/14
12/31/14
66.50 USD
10014289-10
Lorem ipsum dolor sit amet
01/01/14
12/31/14
66.50 USD
PR Item
Description
10014284-10
66.50 USD
Assign Supplier
Patterns & Components
User Name
My Home
Net Order Value is at
Comparative Annual
Totals
21,5 v
Country 1
234 M
Country 2
97 M
Country 3
197 M
Approve Travel
Request
Gross Revenue
Global – Year to Date
1
%
Relative Imporvement
USD, By Region
Request
48.2
M
USD, Actual
This is the Headline
Gross Revenue under
Target
This is the Subheadline
Global – Year to Date
48.2
SAP Unveils Powerful New Player Comparison Tool
Exclusively on SAP.com
M
45.2
December 06, 2013
USD, Absolute Deviation
SAP News
This is the Headline
Culmulative Totals
This is the Subheadline
Expenses
This is the Headline
Still Headline
M
This is the value definition
I am a short title !
This shows a StaticTile wit…
Subheadline
0M
June 1
125 M
80 M
June 30
USD
75 M
USD, Actual and Target
© 2014 SAP AG or an SAP affiliate company. All rights reserved.
0
This is value definition
0 Days running without b…
34
BusyIndicator
Control
Request
Example
3
Approve
© 2014 SAP AG or an SAP affiliate company. All rights reserved.
Reject
35
Button
Content
Header
Footer
Content
Action1
Action2
Pressed
Action1
Action2
Default Action
(First and most frequently used action in footer)
Action1
Action1
Approve / Reject
Approve
Approve
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 ipsum
Quick Entry
Container can be
filled with any
content
Dolor
Sit
© 2014 SAP AG or an SAP affiliate company. All rights reserved.
Alert
Lorem ipsum dolor st amet,
consetetur sadipscing elitr, sed
diam nonumy eirmod tempor
invidunt ut labore et dolore
magna aliquyam erat, sed diam
voluptua. At vero eos et accusam
et justo duo dolores.
Lorem ipsum dolor sit amet?
Add note
OK
Cancel
OK
Cancel
38
FileUploader
© 2014 SAP AG or an SAP affiliate company. All rights reserved.
39
User Name
Requests (42)
Request
Search
Name 1
USD
100 Mio
USD
1 Item
Name 2
3
5
Today
3,762,199.90
USD
3 Items
3,762,199.90
Name1
1 day ago
Attachments (5)
SomeTextFile.txt
28.11.2013 by Marty McFly
Name 3
6,450.00
USD
SomeWordDocumentWithRatherLongTitle.doc
28.11.2013 by Marty McFly
10 Items
Name 4
6 days ago
1.99
USD
100 Items
Name 5
Last week
1771.00
Photo_of_my_TIMEMACHINE.jpg
21.10.2013 by Emmett Brown
Blue-Prints_for_Flux-Capacitor.jpg
21.10.2013 by Emmett Brown
USD
Shopping-list_Parts-you-need-for-a-time-machine.xls
84 Items
Last week
21.10.2013 by Emmett Brown
1 day ago
FilterBar
© 2014 SAP AG or an SAP affiliate company. All rights reserved.
41
User Name
Application Title
Variant Name
Status
Customer
Company Code
Customer 1
ACME
Open
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)
Search
Search
Variant Name
All Orders
10
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
© 2014 SAP AG or an SAP affiliate company. All rights reserved.
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
47
Phone
Sales Orders (42)
Select Customer
Filtered by: Variant 2
Search
100 Mio
Name 1
USD
1 Item
Today
Customer 1 (500098)
Department:
Sales
3,762,199.90
Name 2
USD
3 Items
1 day ago
Lorem Ipsum
Department:
Sales
6,450.00
Name 3
Customer 2 (300973)
USD
10 Items
6 days ago
Customer 3 (300700)
Department:
Sales
1.99
Name 4
USD
100 Items
Approve
Reject
Last week
Customer 4 (Name 1) (509999)
Department:
Sales
SimpleForm
Example Label:
Another Example:
Label Example:
Yet Another Label:
This is an example description
Description example
Another example for a description
Next description goes here
Some Example Form
Label 000
Label 001:
Label 002 / Lable 003. :
Label 004 / Label 005:
Label 006: :
Qoutation Details
abcdefghijklmno
Purchase Order:
12345
abcdefghojkl
123456
abcdefghijklm
Valid Form:
ZIP Code/City:
123456789123
09/06/2014
12:00
1000 EUR
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
Control
Requests (42)
Example
Search
Your request has been
approved
100 Mio
Name 1
USD
1 Item
Today
On behalf of Marty McFox
Name 2
3,762,199.90
USD
3 Items
Name 3
1 day ago
6,450.00
USD
10 Items
Name4
6 days ago
Your request has been
approved
1.99
USD
100 Items
© 2014 SAP AG or an SAP affiliate company. All rights reserved.
Last week
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
3.624
Example Object Header Text
Euro
Forwarded by Name2
First Attribute
Positive Text
Second Attribute
Status Info
Example Object Header Text That
Is Rather Long – It Is Even So Long
999.999.123.624,00
Euro
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
wrap around because it is sooo long
Status Info
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
Second Attribute with a very long descriptive text that will
wrap around because it is sooo long
© 2014 SAP AG or an SAP affiliate company. All rights reserved.
Negative Text
Status Info
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
Second Attribute with a very long descriptive text that will
wrap around because it is sooo long
© 2014 SAP AG or an SAP affiliate company. All rights reserved.
Negative Text
Status Info
59
Bar
Footer [Tablet/Desktop]
Approve
Reject
Save
Cancel
Footer [Tablet/Desktop with default action]
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
Profile
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
Action 1
Action 2
Email:
Email:
[email protected]
[email protected]
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 Overview Person
Quick Overview Company
Quick Overview 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:
[email protected]
Company
[email protected]
Main Contact
Company
Name:
Name:
Name:
Company B
Fistname Name
Company B
Mobile:
Send Email
0132-76541234
Email:
[email protected]
© 2014 SAP AG or an SAP affiliate company. All rights reserved.
This is a status info and can have
semantic colors like
@NegativeText or @CriticalText
or @PositiveText.
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%
Neutral with text
Neutral with text
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
Action1
Action2
Action3
Action1
Action2
Action3
Header
Footer
© 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
70
Cancel
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
© 2014 SAP AG or an SAP affiliate company. All rights reserved.
Germany
|
Croatia
Croatia
Cuba
Cuba
Czech Republic
Czech Republic
Denmark
Denmark
Egypt
Egypt
Estonia
Estonia
Finland
Finland
France
France
Germany
Germany
Ghana
Ghana
72
Slider
Enabled
Disabled
© 2014 SAP AG or an SAP affiliate company. All rights reserved.
73
Switch
Enabled
ON
I
Disabled
OFF
O
ON
I
© 2014 SAP AG or an SAP affiliate company. All rights reserved.
OFF
O
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.
© 2014 SAP AG or an SAP affiliate company. All rights reserved.
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
adipiscing elit. Aenean commodo ligula eget
dolor. Aenean massa. Cum sociis natoque
penatibus et magnis.
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
100 Mio
Tony Stark
USD
1 Item
Today
3,762,199.90
Emmett
Brown
USD
3 Items
1 day ago
iPad & Desktop
Send Email
On behalf of Marty McFly
Save as Tile
Send Email
6,450.00
Bill Lumbergh
USD
Save as Tile
10 Items
Share in SAP Jam
Milton
Waddams
open in <app type>
6 days ago
Share in SAP Jam
open in <app type>
1.99
USD
100 Items
Cancel
© 2014 SAP AG or an SAP affiliate company. All rights reserved.
Last week
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
Info
Notes
Approvals
Attachments
Lorem Ipsum
Container can be filled
with any content
© 2014 SAP AG or an SAP affiliate company. All rights reserved.
Babies
Doner Kebab
The use of labels
is optional.
Please mind to
either use labels
for ALL or NONE
of the tabs.
79
IconTabBar
42 of 42
19 of 42
23 of 42
Ordered
Shipped
Delivered
Container can be filled
with any content
8
19
4
7
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
Senior Consultant
Project Price/h
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
(421999)
199,00
USD
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 AG’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 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 Vervielfältigung dieser Publikation oder von Teilen daraus sind, zu welchem Zweck und in welcher Form auch immer, ohne die
ausdrückliche schriftliche Genehmigung durch SAP AG oder ein SAP-Konzernunternehmen nicht gestattet.
SAP und andere in diesem Dokument erwähnte Produkte und Dienstleistungen von SAP sowie die dazugehörigen Logos sind Marken oder
eingetragene Marken der
SAP AG (oder von einem SAP-Konzernunternehmen) in Deutschland und verschiedenen anderen Ländern 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 können Softwarekomponenten auch anderer Softwarehersteller
enthalten.
Produkte können länderspezifische Unterschiede aufweisen.
Die vorliegenden Unterlagen werden von der SAP AG oder einem SAP-Konzernunternehmen bereitgestellt und dienen ausschließlich zu
Informationszwecken.
Die SAP AG oder ihre Konzernunternehmen übernehmen keinerlei Haftung oder Gewährleistung für Fehler oder Unvollständigkeiten in dieser
Publikation. Die SAP AG
oder ein SAP-Konzernunternehmen steht lediglich für Produkte und Dienstleistungen nach der Maßgabe ein, die in der Vereinbarung über die
jeweiligen Produkte und Dienstleistungen ausdrücklich geregelt ist. Keine der hierin enthaltenen Informationen ist als zusätzliche Garantie zu
interpretieren.
Insbesondere sind die SAP AG oder ihre Konzernunternehmen in keiner Weise verpflichtet, in dieser Publikation oder einer zugehörigen Präsentation
dargestellte Geschäftsabläufe zu verfolgen oder hierin wiedergegebene Funktionen zu entwickeln oder zu veröffentlichen. Diese Publikation oder eine
zugehörige Präsentation,
die Strategie und etwaige künftige Entwicklungen, Produkte und/oder Plattformen der SAP AG oder ihrer Konzernunternehmen können von der SAP
AG oder ihren Konzernunternehmen jederzeit und ohne Angabe von Gründen unangekündigt geändert werden.
Die in dieser Publikation enthaltenen Informationen stellen keine Zusage, kein Versprechen und keine rechtliche Verpflichtung zur Lieferung von
Material, Code oder Funktionen dar. Sämtliche vorausschauenden Aussagen unterliegen unterschiedlichen Risiken und Unsicherheiten, durch die die
tatsächlichen Ergebnisse von den Erwartungen abweichen können. Die vorausschauenden Aussagen geben die Sicht zu dem Zeitpunkt wieder, zu
dem sie getätigt wurden. Dem Leser wird empfohlen, diesen Aussagen kein übertriebenes Vertrauen zu schenken und sich bei Kaufentscheidungen
nicht auf sie zu stützen.
© 2014 SAP AG or an SAP affiliate company. All rights reserved.
96