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

More Related Content

PDF
Master guide cdmc
PDF
Master guide cdmc
PDF
SAP FICO-RAO FINAL.pdfthe ppt is every format is same format
PDF
Sap fico satyanarayana material
PDF
Satyanarayana fi notes
PDF
Sap-fi Material
PDF
Fico material
PDF
Sap basis made easy
Master guide cdmc
Master guide cdmc
SAP FICO-RAO FINAL.pdfthe ppt is every format is same format
Sap fico satyanarayana material
Satyanarayana fi notes
Sap-fi Material
Fico material
Sap basis made easy

Similar to sapdatapresentations for designing sol.ppt (20)

PPTX
Data analysis report for fond rouge power point
PPT
SAP - ERP
PPT
Architecture overview
PPT
Architecture module overview
PDF
CATS Approval process in MSS.pdf
PDF
Pswfl
PDF
Sap fico-fi-notes
DOC
SAP FI Configuration guide and enduser manual
DOC
SAP FI Configuration guide and enduser manual
PDF
SAP Workflow in S4HANA
PPT
Cin overview
PPTX
AccessControlMgmt_EKT_1709_FPS01_version1pptx
PDF
Sap basis made_easy321761331053730
PDF
Sap basis administration handbook
PPT
Software Application Program
PDF
PDF
SAP Developer Center - March 2016 update
PDF
SAP MM Online Training Course | Webinar's Presentation
PDF
SAP Data and IDEA
PPTX
Managing SAP Custom Code
Data analysis report for fond rouge power point
SAP - ERP
Architecture overview
Architecture module overview
CATS Approval process in MSS.pdf
Pswfl
Sap fico-fi-notes
SAP FI Configuration guide and enduser manual
SAP FI Configuration guide and enduser manual
SAP Workflow in S4HANA
Cin overview
AccessControlMgmt_EKT_1709_FPS01_version1pptx
Sap basis made_easy321761331053730
Sap basis administration handbook
Software Application Program
SAP Developer Center - March 2016 update
SAP MM Online Training Course | Webinar's Presentation
SAP Data and IDEA
Managing SAP Custom Code
Ad

Recently uploaded (20)

PDF
Tetra Pak Index 2023 - The future of health and nutrition - Full report.pdf
PDF
Global Data and Analytics Market Outlook Report
PPTX
Business_Capability_Map_Collection__pptx
PDF
Optimise Shopper Experiences with a Strong Data Estate.pdf
PPT
Image processing and pattern recognition 2.ppt
PPTX
Copy of 16 Timeline & Flowchart Templates – HubSpot.pptx
PPT
DU, AIS, Big Data and Data Analytics.ppt
PPTX
QUANTUM_COMPUTING_AND_ITS_POTENTIAL_APPLICATIONS[2].pptx
PPTX
CYBER SECURITY the Next Warefare Tactics
PPT
statistic analysis for study - data collection
PPTX
chrmotography.pptx food anaylysis techni
PPT
Predictive modeling basics in data cleaning process
PPTX
SET 1 Compulsory MNH machine learning intro
PPTX
DS-40-Pre-Engagement and Kickoff deck - v8.0.pptx
PDF
[EN] Industrial Machine Downtime Prediction
PDF
Introduction to Data Science and Data Analysis
PDF
Votre score augmente si vous choisissez une catégorie et que vous rédigez une...
PPTX
(Ali Hamza) Roll No: (F24-BSCS-1103).pptx
PPTX
A Complete Guide to Streamlining Business Processes
PDF
Systems Analysis and Design, 12th Edition by Scott Tilley Test Bank.pdf
Tetra Pak Index 2023 - The future of health and nutrition - Full report.pdf
Global Data and Analytics Market Outlook Report
Business_Capability_Map_Collection__pptx
Optimise Shopper Experiences with a Strong Data Estate.pdf
Image processing and pattern recognition 2.ppt
Copy of 16 Timeline & Flowchart Templates – HubSpot.pptx
DU, AIS, Big Data and Data Analytics.ppt
QUANTUM_COMPUTING_AND_ITS_POTENTIAL_APPLICATIONS[2].pptx
CYBER SECURITY the Next Warefare Tactics
statistic analysis for study - data collection
chrmotography.pptx food anaylysis techni
Predictive modeling basics in data cleaning process
SET 1 Compulsory MNH machine learning intro
DS-40-Pre-Engagement and Kickoff deck - v8.0.pptx
[EN] Industrial Machine Downtime Prediction
Introduction to Data Science and Data Analysis
Votre score augmente si vous choisissez une catégorie et que vous rédigez une...
(Ali Hamza) Roll No: (F24-BSCS-1103).pptx
A Complete Guide to Streamlining Business Processes
Systems Analysis and Design, 12th Edition by Scott Tilley Test Bank.pdf
Ad

sapdatapresentations for designing sol.ppt

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