Transcript Short Presentation Title

Prototyping Kit
SAP Fiori
March, 2014
Information
To view the following slides correctly, please make sure you have the latest version
of SAP’s icon font (SAP-Icons) installed. It comes with the Open UI5 SDK.
Link to Fiori Guidelines
© 2014 SAP AG or an SAP affiliate company. All rights reserved.
Public
2
Launchpad (Tiles)
Example
Search
My Home
Name
Comparative Annual
Totals
Employee
By Regions (M EUR)
3
Leave Requests
Gross Revenue
Approve Travel
Request
Global - Year to Date
Global - Year to Date
Continent 1
234 M
Continent 2
97 M
Continent 3
197 M
1
348.2
Request
USD, Actual
USD. Absolute Deviation
Headline
Headline
Cumulative Totals
Subheadline
Subheadline
Expenses ( M EUR)
16 M
News Headline
345.2
SAP News
December 06, 2013
Headline over two
lines
Headline over two
lines
Subheadline
Subheadline
0
0
Value definition
Value definition
Gross Revenue under
Target
Value definition
125 M
78
M
M
56 M
M
125
75
Jan 1
Jan 31
Actual and Target
Working Space
Headline
Headline
© 2014 SAP AG or an SAP affiliate company. All rights reserved.
4
Phone
Search
Search
My Home
My Home
Name
Comparative Annual
Total
Name
Comparative Annual
Total
Employee
By Regions (M EUR)
Employee
By Regions (M EUR)
3
Leave Requests
Approve Travel
Request
Continent 1
234 M
Continent 2
97 M
Continent 3
197 M
Gross Revenue
3
Leave Requests
Global – Year to Date
Approve Travel
Request
1
348.2 M
1
Request
USD, Actual
Request
Continent 1
234 M
Continent 2
97 M
Continent 3
197 M
Working Space
News Headline
SAP News
Headline
Cumulative Totals
Subheadline
Expenses (M EUR)
16 M
125 M
56 M
125
December 06, 2013
75
Headline
© 2014 SAP AG or an SAP affiliate company. All rights reserved.
Jan 1
Jan 31
Actual and Target
5
Approval Scenario
Exemplary App
Requests (42)
Request
Search
Name
On behalf of supervisor name
100 M
3,75 M
Name
USD
USD
1 day ago
1 Item
Today
3
On behalf of supervisor name
Name
3,75 M
USD
3 Items
Name
1 day ago
6,450.00
Label:
Label text
Label:
Label text
Label:
Label text
Label:
Label text
USD
10 Items
6 days ago
ITEMS (3)
Name
1.99
USD
100 Items
Name
Description
Quantity
Price
Total
Last week
Product A
1
12,000.00 USD
12,000.00 USD
1771.00
Product B
15
250,000.00 USD
3,75 M USD
Product C
1
199.90 USD
199.90 USD
USD
84 Items
Last week
Name
23 Mio
USD
© 2014 SAP AG or an SAP affiliate company. All rights reserved.
Approve
Reject
7
Requests (42)
Item 1 of 3
Search
Name
100 M
USD
1 Item
Today
USD
1 Piece(s)
12,000.00 USD per 1 piece(s)
On behalf of supervisor name
Name
12,000.00
Item Name
Information
3,75 M
Material: 10261985
USD
Material Group: (1955)
3 Items
Name
1 day ago
6,450.00
Delivery on September 20, 2013
Plant: Plant name
USD
Address: Address
10 Items
6 days ago
Name
1.99
USD
Notes
Note text
Item Text
100 Items
Name
Last week
1771.00
USD
84 Items
Name
Account Assignment
Category
Description
G/L Account
Total
Cost Center
Corporate Services
(1000)
Lorem Ipsum
dolor sit amet
consectetuer
(890000)
100%
Last week
23 M
USD
© 2014 SAP AG or an SAP affiliate company. All rights reserved.
8
Requests (42)
Request
Search
Name
100 M
100,000.00
Name
USD
USD
1 Item
Today
Today
3
On behalf of supervisor name
Name
3,75 M
USD
1 day ago
3 Items
Name
6,450.00
Label:
Label text
Label:
Label text
Label:
Label text
Label:
Label text
USD
10 Items
6 days ago
ITEMS (3)
Name
1.99
USD
1 Item
Name
Description
Quantity
Price
Total
Last week
Product A
1
12,000.00 USD
12,000.00 USD
1771.00
Product B
15
250,000.00 USD
3,75 M USD
Product C
1
199.90 USD
199.90 USD
USD
84 Items
Last week
Name
23 M
USD
Reject
Approve
© 2014 SAP AG or
an SAP affiliate company.
All rights reserved.
9
Phone
Requests (42)
Requests (42)
Search
Search
100 M
Name
Name
USD
1 Item
Today
On behalf of supervisor
100 M
USD
1 Item
Today
On behalf of supervisor
3,8 M
Name
Name
USD
3 Items
1 day ago
3,8 M
USD
3 Items
1 day ago
6,450.00
Name
10 Items
6 days ago
10 Items
6 days ago
Name
1.99
Name
1.99
Name
USD
USD
USD
100 Items
© 2014 SAP AG or an SAP affiliate company. All rights reserved.
Last week
6,450.00
USD
100 Items
Last week
10
Phone
Request
Request
On behalf of supervisor
3,8 M
Name
USD
1 day ago
3
3
Label:
Description dolor sit
Label:
Eget dolor Aenean massa
Label:
Cum sociis natoque
Label:
Penatibus et magnis dis parturient
Approve
© 2014 SAP AG or an SAP affiliate company. All rights reserved.
ITEMS (3)
Approve
11
Phone
Request
Request
Cum sociis natoque
Cum sociis natoque
Label:
Label:
Penatibus et magnis dis parturient
Penatibus et magnis dis parturient
ITEMS (3)
ITEMS (3)
Description
Description
Product A
Product A
Quantity:
1
Quantity:
1
Price:
12,000.00 USD
Price:
12,000.00 USD
Total:
12,000.00 USD
Total:
12,000.00 USD
Product B
Product B
Quantity:
15
Quantity:
15
Price
Approve
© 2014 SAP AG or an SAP affiliate company. All rights reserved.
Price
Approve
12
Phone
1 of 3
Product A
Address
Address
1 of 3
12,000.00
USD
Notes
1 Piece(s)
12,000.00 USD per 1
piece(s)
Information
Lorem ipsum dolor sit amet, consectetuer
adipiscing elit.
Item Text
Account Assignment
Material:
10261985
Category
Material Group:
Lorem Ipsum (1955)
Cost Center
Total
100%
Description:
Corporate Services (1000)
Delivery on September 20, 2013
Plant:
Plant Name
Address:
Address
G/L Account:
Lorem Ipsum dolor sit amet
consectetuer (890000)
Pricing Conditions
Description
© 2014 SAP AG or an SAP affiliate company. All rights reserved.
13
Leave Request Create
Exemplary App
Request Leave
?
Vacation
November 2013
December 2013
MON
TUE
WED
THU
FRI
SAT
28
29
30
31
1
2
4
5
6
6
8
11
12
13
14
18
19
20
25
26
2
3
MON
TUE
WED
THU
3
25
26
27
28
29
30
1
9
10
2
3
4
5
6
7
8
15
16
17
9
10
11
12
13
14
15
21
22
23
24
16
17
18
19
20
21
22
27
28
29
30
1
23
24
25
26
27
28
29
4
5
6
7
8
30
31
1
2
3
4
5
Workday
SUN
Non-Workday
Approved Leave
© 2014 SAP AG or an SAP affiliate company. All rights reserved.
FRI
SAT
Pending Approval
SUN
22 Days
25 Days
used
available
Note
Public Holiday
Today
Send
Selected Day(s)
Cancel
15
Request Leave
Vacation
Vacation
November 2013
December 2013
Leave 1/2 Day
MON
TUE
WED
THU
FRI
SAT
28
29
30
31
1
2
3
4
5
6
6
8
9
10
11
12
13
14
15
16
18
19
20
21
22
25
26
27
28
2
3
4
5
Workday
SUN
MON
TUE
WED
Sick 26
Leave27
25
THU
SAT
SUN
29
30
1
2Educational
3
4 Leave
5
6
7
8
17
9
10
11
12
13
14
15
23
24
16
17
18
19
20
21
22
29
30
1
23
24
25
26
27
28
29
6
7
8
30
31
1
2
3
4
5
Non-Workday
Approved Leave
© 2014 SAP AG or an SAP affiliate company. All rights reserved.
28
FRI
Pending Approval
22 Days
25 Days
used
available
Note
Public Holiday
Today
Send
Selected Day(s)
Cancel
16
Phone
Request Leave
Request Leave
25
26
27
28
29
30
1
?
Vacation
November 2013
22 Days
25 Days
used
available
Note
MON
TUE
WED
THU
FRI
SAT
SUN
28
29
30
31
1
2
3
4
5
6
6
8
9
10
11
12
13
14
15
16
17
Workday
Non-Workday
18
19
20
21
22
23
24
Approved Leave
Pending Approval
25
26
27
28
29
30
1
Public Holiday
Today
22 Days
25 Days
used
available
Note
Send
Cancel
© 2014 SAP AG or an SAP affiliate company. All rights reserved.
Selected Day(s)
Send
Cancel
17
SAP UI5 Controls
Sap.m.ActionSheet
Phone
Tablet
Settings
About Fiori
Action One
Login Details
Action Two
Logout
Action One
Action Two
Cancel
© 2014 SAP AG or an SAP affiliate company. All rights reserved.
Public
19
Phone
Requests (42)
Requests (42)
Search
Search
100 M
Name
100 M
Name
USD
1 Item
Today
Name
USD
1 Item
3,8 M
Name
1 day ago
3 Items
Today
3,8 M
USD
3 Items
On behalf of supervisor name
Name
USD
1 day ago
On behalf of supervisor name
6,450.00
USD
10 Items
6 days ago
Settings
6,450.00
Bill Lambert
USD
About Fiori
10 Items
6 days ago
Login Details
Name
1.99
USD
100 Items
© 2014 SAP AG or an SAP affiliate company. All rights reserved.
Last week
1.99
Milton Addams
Logout
100 Items
USD
Cancel
Last week
20
Sap.m.Bar
Header (for apps using a Master/Detail template)
Tablet/Desktop
Plural (amount)
Singular
Requests (42)
Request
Requests (42)
Request
Phone
Header (for apps with a Full Screen template)
Requests (42)
Tablet/Desktop
© 2014 SAP AG or an SAP affiliate company. All rights reserved.
Public
21
Sap.m.Bar
Footer (Tablet/Desktop)
Approve
Reject
Action 1
Action 2
Footer (Tablet/Desktop with default action)
© 2014 SAP AG or an SAP affiliate company. All rights reserved.
Public
22
Sap.m.Bar
Footer (Phone)
Reject
Action 3
Cancel
Approve
Footer (Phone with default action)
Action 2
Action 3
Action 1
© 2014 SAP AG or an SAP affiliate company. All rights reserved.
Cancel
Public
23
Sap.m.BusyIndicator
Request
Control
Example
3
Approve
© 2014 SAP AG or an SAP affiliate company. All rights reserved.
Public
24
Sap.m.Button
Content
Header
Footer
Regular
Action 1
Pressed
Action 1
Default Action
(First and most frequently used action in footer)
Action 1
Action 1
Approve
Approve
Reject
Reject
Approve/Reject
© 2014 SAP AG or an SAP affiliate company. All rights reserved.
Public
25
Sap.m.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.
Public
26
Sap.m.DateTimeInput
11/06/2015
11/06/2015
November 2013
MON
TUE
WED
THU
FRI
SAT
SUN
28
29
30
31
1
2
3
4
5
6
6
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
1
11/06/2015|
+ numeric keyboard
© 2014 SAP AG or an SAP affiliate company. All rights reserved.
Public
27
Sap.m.Dialog
Message Header
Message Header
Container can be
filled with any
content
Dolor
Sit
© 2014 SAP AG or an SAP affiliate company. All rights reserved.
Label
Add Note
OK
Cancel
Public
28
Sap.m.FeedListItem
Employee: Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo
ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis
parturient.
2013-06-09
Supervisor: Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean
commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et
magnis a,
2013-06-08
Employee: Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
Rejected · Dec 04, 2012
© 2014 SAP AG or an SAP affiliate company. All rights reserved.
Public
29
Sap.m.FeedListItem
Employee: Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo
ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient
Waiting for Approval · Dec 02, 2012
© 2014 SAP AG or an SAP affiliate company. All rights reserved.
Public
30
Sap.m.FeedListItem
Employee:
Lorem ipsum dolor sit amet, consectetuer
New
Employee:
Lorem ipsum dolor sit amet, consectetuer
Nov 01, 2012
Employee:
Lorem ipsum dolor sit amet, consectetuer
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.
Public
31
Phone
Header Title
Header Title
waiting and waiting and waiting and waiting and
Employee: Lorem ipsum dolor sit
Lorem IpsumAenean commodo ligula eget
dolor. Aenean massa. Cum sociis natoque
penatibus et magnis dis parturient montes,
waiting and waiting · Nov 23, 2012
2013-06-09
New
Supervisor: Lorem ipsum dolor sit
Lorem IpsumAenean commodo ligula eget
dolor. Aenean massa. Cum sociis natoque
penatibus et magnis dis parturient montes
Employee:Lorem Ipsum
info
Employee:Lorem Ipsum
Nov 01, 2012
2013-06-08
Emplyee: Lorem Ipsum
Employee: Lorem ipsum dolor sit
Lorem IpsumAenean commodo ligula eget
posuere metus sed tepus. Mauris
euismod, dui sit amet molestie volutpat,
ipsum est viverra velit, id ultricies ante dolor
et ligula.
This one has no sender but active/inactve
icons (check out the icon's color, when you
press this item)
Nov 01, 2012
Rejected · Dec 04, 2012
Employee: This FeedListItem comes with
senderActive = false and iconActive =
false. In hac habitasse platea dictumst.
© 2014 SAP AG or an SAP affiliate company. All rights reserved.
32
Sap.m.IconTabBar
Container can be filled
with any content
1701
33
Container can be filled
with any content
© 2014 SAP AG or an SAP affiliate company. All rights reserved.
Public
33
Sap.m.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.
The use of labels
is optional.
Please mind to
either use them
for ALL or NONE
of the tabs.
Public
34
Phone
Header Title
On behalf of supervisor name
Name
3,8 M
USD
1 day ago
3
Label:
Description dolor sit
Label:
Eget dolor Aenean massa
Label:
Cum sociis natoque
Label:
Penatibus et magnis dis parturient
TabContainer
© 2014 SAP AG or an SAP affiliate company. All rights reserved.
35
Sap.m.Input
Prompt Text
|
Lorem ipsum
Lorem ipsum |
Lorem ipsum
Error
Warning
Success
© 2014 SAP AG or an SAP affiliate company. All rights reserved.
Public
36
Phone
Header Title
* Label:
Header Title
Group Title
* Label:
* Label:
* Label:
Label:
Label 1 / Label 2:
Label 1 / Label 2:
Group Title
Label:
Label 1 / Label 2:
© 2014 SAP AG or an SAP affiliate company. All rights reserved.
37
Sap.m.List
Group 1 Header Title
Item Label Regular
Error Message
Item Label Bold
Warning Message
Another Item With Long Label
Success Message
Group 2 Header Title
Item with small Icon
Info Message
Item with small Icon
List Footer
© 2014 SAP AG or an SAP affiliate company. All rights reserved.
Public
38
Phone
Header Title
Group 1 Header Title
Item Label Regular Error Message
Item Label Bold Warning Message
Item with…
Success Message
Group 2 Header Title
Item with small Icon
Info Message
tem with small Icon
List Footer
© 2014 SAP AG or an SAP affiliate company. All rights reserved.
39
Sap.m.List
Standard List Icon
TRAVEL LIST
Travel Expend
Access the travel expend workflow
123
Error message
Travel and Expense Report
Access the travel expend workflow
4
Warning Message
Travel Request
Access the travel expend workflow
Success message
Work Accidents
Report your work accidents
Travel Settings
Change your travel workflow settings
We strongly advise you to keep your luggage with you at all times. Any unattended luggage in the t…
© 2014 SAP AG or an SAP affiliate company. All rights reserved.
Public
40
Phone
Header Title
TRAVEL LIST
Travel Expend
Access th...
123
Error message
Travel Expend
Access th...
4
Warning Message
Travel Expend
Access the t...
Success message
Work Accidents
Report your work accidents
Travel Settings
Change your travel workflow settings
We strongly advice you to keep your lugg...
© 2014 SAP AG or an SAP affiliate company. All rights reserved.
41
Sap.m.List
Standard List No Image
List Header
Item Name 1
Description text
Item Name 2 bold
Description text bold
Item Name 3
Description text
Item Name 4
Description text
Item Name 5
Description text
Table Footer Text
© 2014 SAP AG or an SAP affiliate company. All rights reserved.
Public
42
Phone
Header Title
Subheader Title
Label
Maecenas tempus, tellus eget condime…
Label bold
Nam quam nunc, blandit vel
Label
Luctus pulvinar, hendrerit id, lorem
Label
Maecenas nec odio et ante tincidunt
Label
Donec vitae sapien ut libero venenatis
Lorem ipsum dolor sit amet, consectetuer…
© 2014 SAP AG or an SAP affiliate company. All rights reserved.
43
Sap.m.ListAsTable
ITEMS (3)
Description
Quantity
Price
Total
Product A
1
12,000.00 USD
12,000.00 USD
Product B
15
250,000.00 USD
3,75 M USD
Product C
1
199.90 USD
199.90 USD
© 2014 SAP AG or an SAP affiliate company. All rights reserved.
Public
44
Sap.m.MessageBox
Error
Warning
Information
Lorem ipsum dolor sit.
Amet consectetuer?
Lorem ipsum dolor sit.
Amet consectetuer?
Lorem ipsum dolor sit.
Amet consectetuer?
OK
OK
OK
© 2014 SAP AG or an SAP affiliate company. All rights reserved.
Public
45
Sap.m.MessageToast
Requests (42)
Control
Example
Search
Your request has been
approved
100 M
Name
USD
1 Item
Today
On behalf of supervisor name
3,8 M
Name
USD
3 Items
Name
1 day ago
6,450.00
USD
10 Items
Name
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
Public
46
Sap.m.ObjectHeader
On behalf of Name
Name
3,8 M
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.
Public
47
Sap.m.ObjectHeader
Object Header Text
3.624
Euro
Forwarded by Name
First Attribute
Second Attribute
Positive Text
Status Info
Object Header
(Second Line)
(Third Line)
999.9 B
Euro
Added by Name
© 2014 SAP AG or an SAP affiliate company. All rights reserved.
Negative Text
Public
48
Sap.m.ObjectHeader
Object Header Text
3.624
Euro
First Attribute
Positive Text
Second Attribute
(over two lines)
Status Info
Object Header Text
3.624
Euro
First Attribute
Positive Text
Status Info
© 2014 SAP AG or an SAP affiliate company. All rights reserved.
Public
49
Sap.m.ObjectHeader
Object Header Text
(Second Line)
(Third Line)
(Fourth Line)
(Fifth Line)
999.9 Euro
B
Added by Name
First Attribute
Second Attribute
(two lines)
© 2014 SAP AG or an SAP affiliate company. All rights reserved.
Negative Text
Status Info
Public
50
Sap.m.ObjectHeader
Object Header Text
(Second Line)
Added by name
Positive Text
Object Header Text
(Second Line)
999.9 B
Euro
Added by name
First Attribute
Second Attribute
(Second Line)
© 2014 SAP AG or an SAP affiliate company. All rights reserved.
Negative Text
Status Info
Public
51
Phone
Request
On behalf of supervisor
3,7 M
Name
USD
1 day ago
ObjectHeader
3
Label:
Description dolor sit
Label:
Eget dolor Aenean massa
Label:
Cum sociis natoque
Label:
Penatibus et magnis dis parturient
ITEMS (3)
© 2014 SAP AG or an SAP affiliate company. All rights reserved.
52
Sap.m.ObjectListItem
Regular
Name
3,7 M
USD
3 Items
1 day ago
Second Attribute
Pressed
Name
3,7 M
USD
3 Items
1 day ago
Second Attribute
Selected
Name
3,7 M
USD
3 Items
1 day ago
Second Attribute
© 2014 SAP AG or an SAP affiliate company. All rights reserved.
Public
53
Sap.m.ObjectListItem (Edit Mode)
Checked
Name
100 M
USD
1 Item
Unchecked
Name
Today
1771.00
USD
84 Items
© 2014 SAP AG or an SAP affiliate company. All rights reserved.
Last week
Public
54
Sap.m.ObjectListItem
Further Examples
Product A
100 M
USD
1 Item
Product B
Positive Text
99,9 B
USD
First Attribute
Negative Text
Second Attribute
Third Attribute
Product C
10,000.00
USD
1 Item
© 2014 SAP AG or an SAP affiliate company. All rights reserved.
Public
55
Sap.m.Popover
Quick Overview
Label
Employee
Name
Position
Contact Details
Mobile:
0000-000000
Work:
0000-000000
OK
Cancel
Email:
[email protected]
Company
Name:
Company name
Send Message
© 2014 SAP AG or an SAP affiliate company. All rights reserved.
Public
56
Sap.m.ProgressIndicator
Enabled
Disabled
Negative without text
Negative without text
Positive with text
Positive with text
0.99GB of 1TB
Critical, 25% with text
0.99GB of 1TB
Critical, 25% with text
25%
Neutral with text
Neutral with text
50%
© 2014 SAP AG or an SAP affiliate company. All rights reserved.
Public
57
Sap.m.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.
Public
58
Sap.m.RatingIndicator
This control can make use of the icon font (e.g. SAP-Icons) to represent the rating.
© 2014 SAP AG or an SAP affiliate company. All rights reserved.
Public
59
Sap.m.SearchField
Initial State
Search
Active/Typing
text|
Search complete
Search Text
© 2014 SAP AG or an SAP affiliate company. All rights reserved.
Public
60
Sap.m.SegmentedButton
Content
Action 1
Action 2
Action 3
Action 1
Action 2
Action 3
Action 1
Action 2
Action 3
Header
Footer
© 2014 SAP AG or an SAP affiliate company. All rights reserved.
Public
61
Sap.m.Select
Used in Content Area
Vacation
Vacation
Vacation
Leave 1/2 Day
Sick Leave
Educational Leave
© 2014 SAP AG or an SAP affiliate company. All rights reserved.
Public
62
Sap.m.Select
Header
Footer
Header Title
Action
Header Title
Action
Action
Action One
Action One
Action Two
Action Two
Action Three
Action Three
Action Four
Action Four
© 2014 SAP AG or an SAP affiliate company. All rights reserved.
Action
Public
63
Phone (Header)
Header Title
Header Title
Action
Action
ActionSearch…
One
Search
100 M
Name
Action
Two
Tommy
Stark
USD
100 Mio
USD
Action Three
1 Item
Today
3,7 M
Name
1 Item
Action Four
Name
USD
3 Items
1 day ago
On behalf of supervisor
Today
3,7 M
USD
3 Items
1 day ago
On behalf of supervisor
6,450.00
Name
10 Items
6 days ago
10 Items
6 days ago
Name
1.99
Name
1.99
Name
USD
USD
USD
100 Items
© 2014 SAP AG or an SAP affiliate company. All rights reserved.
Last week
6,450.00
USD
100 Items
Last week
64
Phone (Footer)
Header Title
Header Title
Action
Search
Search
100 M
Name
Name
USD
1 Item
Today
Name
USD
1 Item
3,7 M
name
1 day ago
3 Items
USD
3 Items
On behalf of supervisor
Name
Today
3,7 M
USD
1 day ago
On behalf of superviosr
6,450.00
USD
10 Items
6 days ago
Name
1.99
Action One
Bill Lambert
Action Two
10 Items
Action Three
Milton Addams
Action Four
USD
100 Items
100 M
Action
Last week
© 2014 SAP AG or an SAP affiliate company. All rights reserved.
6,450.00
USD
6 days ago
1.99
USD
100 Items
Action
Last week
65
Sap.m.Slider
Enabled
Disabled
© 2014 SAP AG or an SAP affiliate company. All rights reserved.
Public
66
Sap.m.Switch
Enabled
ON
I
Disabled
OFF
O
ON
I
© 2014 SAP AG or an SAP affiliate company. All rights reserved.
OFF
O
Public
67
Sap.m.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
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.
Public
68
Sap.me.Calendar
November 2013
December 2013
MON
TUE
WED
THU
FRI
SAT
28
29
30
31
1
2
4
5
6
6
8
11
12
13
14
18
19
20
25
26
2
3
SUN
MON
TUE
WED
THU
3
25
26
27
28
29
30
1
9
10
2
3
4
5
6
7
8
15
16
17
9
10
11
12
13
14
15
21
22
23
24
16
17
18
19
20
21
22
27
28
29
30
1
23
24
25
26
27
28
29
4
5
6
7
8
30
31
1
2
3
4
5
© 2014 SAP AG or an SAP affiliate company. All rights reserved.
FRI
SAT
SUN
Public
69
Sap.me.Calendar
November 2013
December 2013
MON
TUE
WED
THU
FRI
SAT
28
29
30
31
1
2
4
5
6
6
8
11
12
13
14
18
19
20
25
26
2
3
SUN
MON
TUE
WED
THU
3
25
26
27
28
29
30
9
10
2
3
4
5
6
15
16
17
9
10
11
12
21
22
23
24
16
17
18
27
28
29
30
1
23
24
4
5
6
7
8
30
31
© 2014 SAP AG or an SAP affiliate company. All rights reserved.
FRI
January 2014
SAT
SUN
MON
TUE
1
30
31
7
8
6
13
14
15
19
20
21
25
26
27
1
2
3
WED
THU
FRI
SAT
SUN
1
2
3
4
5
7
8
9
10
11
12
13
14
15
16
17
18
19
22
20
21
22
23
24
25
26
28
29
27
28
29
30
1
2
3
4
5
4
5
6
7
8
9
10
Public
70
Phone
Requests Leave
?
Vacation
November 2013
MON
TUE
WED
THU
FRI
SAT
SUN
28
29
30
31
1
2
3
4
5
6
6
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
1
Calendar
22 Days
25 Days
used
available
Note
© 2014 SAP AG or an SAP affiliate company. All rights reserved.
Send
Cancel
71
Sap.me.CalendarLegend
Horizontal Version (usually used on tablet or desktop)
Workday
Non-Workday
Approved Leave
Pending Approval
Public Holiday
Today
Selected Day(s)
Vertical Version (usually used on phones)
Workday
Non-Workday
Approved Leave
Pending Approval
Public Holiday
Today
Selected Day(s)
© 2014 SAP AG or an SAP affiliate company. All rights reserved.
Public
72
Phone
Request Leave
25
26
27
28
29
Request Leave
30
1
25
26
27
28
29
30
1
22 Days
25 Days
22 Days
25 Days
used
available
used
available
Note
Note
Send
Cancel
© 2014 SAP AG or an SAP affiliate company. All rights reserved.
Send
Cancel
73
Phone
Request Leave
25
26
27
28
29
Request Leave
30
1
25
26
27
28
29
30
1
22 Days
25 Days
22 Days
25 Days
used
available
used
available
Note
Note
Workday
Workday
Non-Workday
Non-Workday
Approved Leave
Approved Leave
Pending Approval
Pending Approval
Public Holiday
Public Holiday
Today
Today
Selected Day(s)
Selected Day(s)
Send
Cancel
Send
Cancel
Calendar Legend
© 2014 SAP AG or an SAP affiliate company. All rights reserved.
74
Sap.ui.commons.form.SimpleForm
Label:
Example description text
Label:
Example description text
Label:
Example description text
Label:
Example description text
© 2014 SAP AG or an SAP affiliate company. All rights reserved.
Public
75
Complex Controls
Facet Filter
© 2014 SAP AG or an SAP affiliate company. All rights reserved.
Public
77
Header Title
All Suppliers
All Items
All Business Partners
All Orders
Variant Name
10
Items
Table or chart or other content
© 2014 SAP AG or an SAP affiliate company. All rights reserved.
Suggest Solution
78
Header Title
All Suppliers
All Items
All Orders
All Business Partners
Search
Search
Variant Name
10
All Orders
Items
Order 1
Order 2
Order 3
Order 4
Table or chart or other content
© 2014 SAP AG or an SAP affiliate company. All rights reserved.
Suggest Solution
79
Header Title
Filtered by Supplier (Supplier 2, Supplier 4, Supplier 5)
Variant Name
10
Items
Table or chart or other content
© 2014 SAP AG or an SAP affiliate company. All rights reserved.
Suggest Solution
80
Contextual Filter
Filtered by Name
Filtered by Name
© 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
Public
81
Phone
Sales Orders (42)
Select Customer
Filtered by Name
Search
100 M
Name
Company Name (500098)
USD
1 Item
Today
Sales Area:
Name of Location
3,7 M
Name
USD
1 day ago
3 Items
Company Name (300973)
Sales Area:
Name of Location
Name
6,450.00
USD
10 Items
Name
6 days ago
1.99
USD
100 Items
Last week
Company Name (300700)
Sales Area:
Name of Location
Company name (Name 1) (509999)
Sales Area:
Location
© 2014 SAP AG or an SAP affiliate company. All rights reserved.
82
Additional Assets
Pointers
Pointers: Hand
You can use these pointers to indicate taps or swipe gestures:
© 2014 SAP AG or an SAP affiliate company. All rights reserved.
Public
85
Pointers: Hand
Alternatively, you can use these pointers if the mockup behind the pointer
needs to be visible:
© 2014 SAP AG or an SAP affiliate company. All rights reserved.
Public
86
Pointers: Arrow
You can use these pointers to indicate clicks:
© 2014 SAP AG or an SAP affiliate company. All rights reserved.
Public
87
Backgrounds
For desktop, tablet and phone designs
Use this background to create apps for tablets and desktop designs
© 2014 SAP AG or an SAP affiliate company. All rights reserved.
89
Use this background for phone designs
© 2014 SAP AG or an SAP affiliate company. All rights reserved.
90
On-Screen Keyboards
For tablet and phone designs
Keyboard (input, alphabetic) for tablets
Q
W
A
E
S
Z
R
D
X
T
F
C
.?123
© 2014 SAP AG or an SAP affiliate company. All rights reserved.
Y
G
V
U
H
B
I
J
N
O
K
M
P
L
return
@
.
_
Public
92
Keyboard (input, numeric) for tablets
1
2
`
#+=
3
|
undo
4
{
5
}
$
ABC
© 2014 SAP AG or an SAP affiliate company. All rights reserved.
6
%
&
7
^
~
8
*
#
9
/
=
0
´
return
+
.
!
?
Public
#+=
93
Keyboard (input, additional characters) for tablets
[
]
\
123
{
|
redo
‹
}
/
<
€
ABC
© 2014 SAP AG or an SAP affiliate company. All rights reserved.
›
>
&
^
$
~
£
#
”
*
•
¥
=
,
return
+
.
!
?
Public
123
94
Keyboard (search, alphabetic) for tablets
Q
W
A
E
S
Z
R
D
X
T
F
C
.?123
© 2014 SAP AG or an SAP affiliate company. All rights reserved.
Y
G
V
U
H
B
I
J
N
O
K
M
P
L
search
!
,
?
.
.?123
Public
95
Keyboard (search, numeric) for tablets
1
2
-
#+=
3
/
undo
4
:
5
;
.
ABC
© 2014 SAP AG or an SAP affiliate company. All rights reserved.
6
(
,
7
€
)
?
8
!
9
&
´
0
@
search
”
#+=
ABC
Public
96
Keyboard (search, additional characters) for tablets
[
]
_
123
{
\
redo
}
|
#
~
.
ABC
© 2014 SAP AG or an SAP affiliate company. All rights reserved.
%
<
,
^
>
?
*
$
!
+
£
´
=
¥
search
”
123
ABC
Public
97
Keyboard (input) for phones
Alphabetic
Q W E R T Y U
A S D F G H J
Numeric
I
O P
K L
Z X C V B N M
.?123
return
© 2014 SAP AG or an SAP affiliate company. All rights reserved.
1
2
3
4
5
6
7
-
/
:
;
(
)
$ & @ ”
#+=
ABC
.
,
?
!
8
9
0
´
return
Public
98
Keyboard (input) for phones
Additional Characters
[
]
{
}
# % ^
*
+
=
_
\
|
~
<
€
£
¥
•
123
ABC
.
,
>
?
!
´
return
© 2014 SAP AG or an SAP affiliate company. All rights reserved.
Public
99