More Related Content
SAP FICO-RAO FINAL.pdfthe ppt is every format is same format Sap fico satyanarayana material Similar to sapdatapresentations for designing sol.ppt (20)
Data analysis report for fond rouge power point Architecture module overview CATS Approval process in MSS.pdf SAP FI Configuration guide and enduser manual SAP FI Configuration guide and enduser manual 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 Recently uploaded (20)
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 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:
- 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
- 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
•