Prototyping Kit SAP Fiori
Dec 14, 2015
Prototyping Kit
SAP Fiori
PREFACEINTRODUCTION
To allow for creating quick mock-ups, SAP Fiori provides a kit for Microsoft PowerPoint which includes all important UI elements. By using this prototyping kit, you can easily create mock-ups and create links between pages using PowerPoint's functionalities. When designing your prototype, keep the design principles in mind.
SAP Icon Font
To view the following slides correctly, please make sure you have the latest version of the SAP’s icon font (file: SAP-Icons.ttf) installed. It comes with the Open UI5 SDK. For example for windows 7 installation, simply search the open UI5 library for string “.ttf”. In the search results right-click on the sap-icons.ttf file and select install. You can then change and insert icons in Microsoft PowerPoint via “Insert-> Symbol” and selecting font: “SAP-Icons”.
After the installation on Mac, you can open the font Book application and select the “user” from the navigation menu. Then choose the SAP-Icons to view all the icons. From here you can highlight any icon and copy it to your Microsoft PowerPoint slides.
Please address your design-related questions to [email protected] .
App Type Index• Work List : Master/Detail• Work List: Full Screen• List Reporting: Filtered List Report• List Reporting: Categorized List Report• Object Pages: Object View• Create Forms: Create Form• Create Froms: Multi-Step Create From• Analytics: Smart Business• Processing: Processing App
Components Index• Home & Tile• Busy Indicator• Button• Checkbox• Dialog• Edit• File Upload• Filtering• Form• List• Login • Message Toast• Object Header
Components Index• Popover• Selection Controls• Progress Indicator• Radio Button• Rating Indicator• Search Filed• Segmented Button• Sharing• Tab Container• Input• Tables• Timeline• Tokenizer
Components Index• Toolbar• Tray/Panel• Tree• Background
Application Types
Work ListMaster/Detail
Name 4 1.99USD
Last week100 Items
Name 3 6,450.00USD
6 days ago10 Items
Name 1 100 MioUSD
Today1 Item
Search
Requests (42) Request
Name 5 1771.00USD
Last week84 Items
Name 2 3,762,199.90USD
1 day ago3 Items
Approve Reject
Label Lorem Ipsum:
Consectetuer:
Adipiscing elit Aenean:
Commodo ligula:
Description dolor sit
Eget dolor Aenean massa
Cum sociis natoque
Penatibus et magnis dis parturient
ITEMS (3)
Item 1
Description Quantity Price Total
1 12,000.00 USD 12,000.00 USD
Item 2 15 250,000.00 USD 3,750,000.00 USD
Item 3 1 199,90 USD 199,90 USD
3
Name1 3,762,199.90USD
1 day ago
User Name
© 2014 SAP AG or an SAP affiliate company. All rights reserved. 10
Name 4 1.99USD
Last week100 Items
Name 3 6,450.00USD
6 days ago10 Items
Name 1 100 MioUSD
Today1 Item
Search
Requests (42) Request
Name 5 1771.00USD
Last week84 Items
Name 2 3,762,199.90USD
1 day ago3 Items
Approve Reject
Label Lorem Ipsum:
Consectetuer:
Adipiscing elit Aenean:
Commodo ligula:
Description dolor sit
Eget dolor Aenean massa
Cum sociis natoque
Penatibus et magnis dis parturient
ITEMS (3)
Item 1
Description Quantity Price Total
1 12,000.00 USD 12,000.00 USD
Item 2 15 250,000.00 USD 3,750,000.00 USD
Item 3 1 199,90 USD 199,90 USD
3
Name2 3,762,199.90USD
1 day ago
With Letter Boxing User Name
Work ListFull Screen
© 2014 SAP AG or an SAP affiliate company. All rights reserved. 12
Application Title
Status
Open
Customer
ACME
Company Code
Customer 1
Customer Description Status Company Code Offset Account
90000201 Customer 1 Open 100450003 660200
90000213 Customer 1 Open 200776544 700000
90000183 Customer 1 Open 000678332 2 Accounts
90000623 Customer 1 Open 000322235 660200
90000871 Customer 1 Open 000678332 550000
90007211 Customer 1 Open 000678323 660200
90002121 Customer 1 Open 000678388 700000
90000231 Customer 1 Open 000678755 660200
90000231 Customer 1 Open 000678324 700000
90381122 Customer 1 Open 000678231 2 Accounts
92192911 Customer 1 Open 000678365 660200
90000371 Customer 1 Open 000678764 550000
90000812 Customer 1 Open 000678388 660200
90007211 Customer 1 Open 000678399 700000
Items (223)
SearchReset
User Name
© 2014 SAP AG or an SAP affiliate company. All rights reserved. 13
Store List
Company (All) Store (All) City (All)
2 Buildings
560 Shops
Department Store A
Company XX
100 Some Street
City 1
1 Building
254 Shops
Department Store B
Company XX
998 Some Street
City 1
3 Buildings
780 Shops
Department Store C
Company YY
1001 Some Street
City 2
2 Buildings
400 Shops
Department Store D
Company YY
60 Some Street
City 3
2 Buildings
360 Shops
Department Store E
Company ZZ
88 Some Street
City 3
Stores
Name Address Details
User Name
List ReportingFiltered List Report
© 2014 SAP AG or an SAP affiliate company. All rights reserved. 15
Application Title
Variant Name
Status
Open
Customer
ACME
Company Code
Customer 1 SearchReset
Customer Description Status Company Code Offset Account
90000201 Customer 1 Open 100450003 660200
90000213 Customer 1 Open 200776544 700000
90000183 Customer 1 Open 000678332 2 Accounts
90000623 Customer 1 Open 000322235 660200
90000871 Customer 1 Open 000678332 550000
90007211 Customer 1 Open 000678323 660200
90002121 Customer 1 Open 000678388 700000
90000231 Customer 1 Open 000678755 660200
90000231 Customer 1 Open 000678324 700000
90381122 Customer 1 Open 000678231 2 Accounts
92192911 Customer 1 Open 000678365 660200
90000371 Customer 1 Open 000678764 550000
Items (223)
User Name
List ReportingCategorized List Report
© 2014 SAP AG or an SAP affiliate company. All rights reserved. 17
Application Title
Customer Description Status Company Code Offset Account
90000201 Customer 1 Open 100450003 660200
90000213 Customer 1 Open 200776544 700000
90000183 Customer 1 Open 000678332 2 Accounts
90000623 Customer 1 Open 000322235 660200
90000871 Customer 1 Open 000678332 550000
90007211 Customer 1 Open 000678323 660200
90002121 Customer 1 Open 000678388 700000
90000231 Customer 1 Open 000678755 660200
90000231 Customer 1 Open 000678324 700000
90381122 Customer 1 Open 000678231 2 Accounts
92192911 Customer 1 Open 000678365 660200
90000371 Customer 1 Open 000678764 550000
Open (12)
12
Open
31
In Progress
45
Sent
45
Completed
User Name
Object PagesObject View
© 2014 SAP AG or an SAP affiliate company. All rights reserved. 1919
Contacts(5) Contact
A
Search
Invoice 90035638
90035638
Invoice
3KEUR
UnpaidPO
SO 38089
Due on 2017.02.22
90035637
Invoice
3KEUR
UnpaidPO
SO 38084
Due on 2017.02.20
90035633
Invoice
3KEUR
UnpaidPO
SO 38071
Due on 2017.02.19
Bill To: Name1
Some Street 36,City 2,13467, Country 2
Unpaid
Invoice Date: 2014.05.29
2 821,06EUR
Purchase Order:
Sales Order:
Ref. Invoice:
Payment Terms:
Carrier:
Incoterms:
38089
0090035638
Customer Invoices Unlimited
Some Express Shipping
CPT sss
Items (1)
Description Quantity Unit Price Subtotal
Laptop 1 HT-1010 2 431, 95 EUR 2 431, 95 EUR
User Name
Create FormsCreate Form
Contacts(5) New Contact
AA
J
L
P
Name 1
Company 3
Name 2
Company 4
Name 3
Company 5
Name 4
Company 6
Name 5
A
Search
Personal Information
First Name:
* Last Name:
Job Title:
Department:
* Company:
Communication Information
Telephone:
Telephone Extension:
Mobile Phone:
Fax:
Fax Extension:
Email:
Save Cancel
User Name
Create FormsMulti-Step Create Form
Cart
Delivery Schedules
Checkout
Customer 1Customer:
Requested Delivery:
Items (1)
Description Product No. Requested Quantity Requested Delivery
Notebook Professional 15
HT-1010 06/19/214
06/19/214
3 Item
User Name
AnalyticsSmart Business
Inflow in Display Currency
Outflow in Display Currency
-200M -100M -100M -50M 0 50M 100M 150M 200M
Asia
-94M
117M
Australia
-34M
42M
-172M
193M
Europe
Cash Flow by Location
This is the HeadlineThis is the Subheadline
June 1
0 M 80 M
June 30
USD
Culmulative TotalsExpenses (M EUR)
Actual and Target
125
75
Gross RevenueGlobal – Year to Date
348.2 M
USD, Actual
18,385 MForecast in 7 Days (USD) Subheader
USD
Liquidity Forecast
Open in
User Name
100
80
0
60
40
20
120
Region 1
24
Region 2
50
8
18
Region 3
15
89
12
By Region
Month-End Company Name
Completion Rate
All Closing Phase All Closing Milestone All Status of Closing Task All Closing Template All Closing Task is Delayed
Financial Close Progress
Open in
User Name
Net Cash Flow
Balance
20140129 20140130 20140131 20140201 20140202 20140203 20140203
2.0 B
1.0 B
-3.0 B
0
-1.0 B
-2.0 B
3.0 B
.3B
-.5B
.3B
-1B
.9B
-.8B
1.5B
2.6B
1B.7B
1B
1.4B
2.4B
1.6B
Forecast by Date
This is the HeadlineThis is the Subheadline
June 1
0 M 80 M
June 30
USD
Culmulative TotalsExpenses (M EUR)
Actual and Target
125
75
Gross RevenueGlobal – Year to Date
348.2 M
USD, Actual
18,385 MForecast in 7 Days (USD) Subheader
USD
Liquidity Forecast
Open in
User Name
No. of Pur. Contr. Older than Specfd No. of Days3.5
3
2.5
2
1.5
1
20140129 20140130 20140131 20140201 20140202 20140203
By Supplier
Comparative Annual Totals
USD, By Region
Country 1 234 M
Country 2 97 M
Country 3 197 M
Culmulative TotalsExpenses (M EUR)
Actual and Target
125
75
Gross RevenueGlobal – Year to Date
348.2 M
USD, Actual
84.585.546,7Unused Contracts
Unused Contracts
Open in
User Name
Amount in Display Currency
0 50M 100M 200M150M 250M
201302
201303
201304
201305
Current Account
Notice Deposit
Current Account
Notice Deposit
Current Account
Notice Deposit
Other Short Term Investment
Current Account
Notice Deposit
75M
170M
200M
250M
100M
125M
170M
175M
225M
By Supplier
Comparative Annual Totals
USD, By Region
Country 1 234 M
Country 2 97 M
Country 3 197 M
Culmulative TotalsExpenses (M EUR)
Actual and Target
125
75
Gross RevenueGlobal – Year to Date
348.2 M
USD, Actual
84.585.546,7Unused Contracts
Unused Contracts
Open in
User Name
Amount in Display Currency
0 50M 100M 200M150M 250M
201302
201303
201304
201305
Current Account
Notice Deposit
Current Account
Notice Deposit
Current Account
Notice Deposit
Other Short Term Investment
Current Account
Notice Deposit
75M
170M
200M
250M
100M
125M
170M
175M
225M
By Supplier
Comparative Annual Totals
USD, By Region
Country 1 234 M
Country 2 97 M
Country 3 197 M
Culmulative TotalsExpenses (M EUR)
Actual and Target
125
75
Gross RevenueGlobal – Year to Date
348.2 M
USD, Actual
84.585.546,7Unused Contracts
Unused Contracts
Open in
User Name
ProcessingProcess App
Order from Requisitions
Assign Supplier
Pricing Details
10014284-10
10014285-10
10014286-10
PR Item Value
95.0001/01/14
01/01/14
01/01/14
12/31/14
12/31/14
12/31/14
Release Date Delivery
66.50
99.00
USD
USD
USD
10014287-10
10014288-10
10014289-10
66.50 USD
66.50 USD
66.50 USD
01/01/14
01/01/14
01/01/14
12/31/14
12/31/14
12/31/14
Approved PRs
Assigned PRs
43
Simulated POs
19
Created POs
23
Approved PRs
50
Lorem ipsum dolor sit amet
Lorem ipsum dolor sit amet
Lorem ipsum dolor sit amet
Description
Lorem ipsum dolor sit amet
Lorem ipsum dolor sit amet
Lorem ipsum dolor sit amet
User Name
Patterns & Components
© 2014 SAP AG or an SAP affiliate company. All rights reserved. 34
0This is value definition
This is the Headline Still HeadlineSubheadline
Culmulative TotalsExpenses
USD, Actual and Target
125 M
75 M
This is the HeadlineThis is the Subheadline
USD
June 1
0 M 80 M
June 30
48.2 M
Gross Revenue under TargetGlobal – Year to Date
USD, Absolute Deviation
45.2 M
This is the HeadlineThis is the Subheadline
This is the value definition
SAP Unveils Powerful New Player Comparison Tool Exclusively on SAP.com
SAP News
December 06, 2013
48.2 M
Gross RevenueGlobal – Year to Date
USD, Actual
Approve Travel Request
1Request
Comparative Annual Totals
USD, By Region
Country 1 234 M
Country 2 97 M
Country 3 197 M
My Home
User Name
I am a short title !
0 Days running without b…
This shows a StaticTile wit…
Net Order Value is at
21,5 v%
Relative Imporvement
© 2014 SAP AG or an SAP affiliate company. All rights reserved. 35
BusyIndicator
Control Example
3
Approve Reject
Request
© 2014 SAP AG or an SAP affiliate company. All rights reserved. 36
Button
Action1
Action1 Action2
Approve
Reject
Action2
Approve
Reject
Action1 Action1
Content Header Footer
Content
Pressed
Default Action(First and most frequently used action in footer)
Approve / Reject
© 2014 SAP AG or an SAP affiliate company. All rights reserved. 37
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. 38
Dialog
Quick Entry
OK Cancel
Lorem ipsum dolor sit amet?
Add note
Lorem ipsum
Dolor Sit
Container can be filled with any
content
Alert
OK Cancel
Lorem ipsum dolor st amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores.
© 2014 SAP AG or an SAP affiliate company. All rights reserved. 39
FileUploader
Name 4 1.99USD
Last week100 Items
Name 3 6,450.00USD
6 days ago10 Items
Name 1 100 MioUSD
Today1 Item
Search
Requests (42) Request
Name 5 1771.00USD
Last week84 Items
Name 2 3,762,199.90USD
1 day ago3 Items
Name1 3,762,199.90USD
1 day ago
3
5
SomeTextFile.txt
28.11.2013 by Marty McFly
SomeWordDocumentWithRatherLongTitle.doc
28.11.2013 by Marty McFly
Photo_of_my_TIMEMACHINE.jpg
21.10.2013 by Emmett Brown
Blue-Prints_for_Flux-Capacitor.jpg
21.10.2013 by Emmett Brown
Shopping-list_Parts-you-need-for-a-time-machine.xls
21.10.2013 by Emmett Brown
Attachments (5)
User Name
© 2014 SAP AG or an SAP affiliate company. All rights reserved. 41
FilterBar
© 2014 SAP AG or an SAP affiliate company. All rights reserved. 42
Application Title
Variant Name
Status
Open
Customer
ACME
Company Code
Customer 1 SearchReset
Customer Description Status Company Code Offset Account
90000201 Customer 1 Open 100450003 660200
90000213 Customer 1 Open 200776544 700000
90000183 Customer 1 Open 000678332 2 Accounts
90000623 Customer 1 Open 000322235 660200
90000871 Customer 1 Open 000678332 550000
90007211 Customer 1 Open 000678323 660200
90002121 Customer 1 Open 000678388 700000
90000231 Customer 1 Open 000678755 660200
90000231 Customer 1 Open 000678324 700000
90381122 Customer 1 Open 000678231 2 Accounts
92192911 Customer 1 Open 000678365 660200
90000371 Customer 1 Open 000678764 550000
Items (223)
User Name
© 2014 SAP AG or an SAP affiliate company. All rights reserved. 43
FacetFilter
Variant Name 10Items
Table or chart or other content
Suppliers (All) Items (All) All Business Partners (All) Orders (All)
Suggest solution
Request
Variant Name 10Items
Table or chart or other content
Suppliers (All) Items (All) All Business Partners (All) Orders (All)
Suggest solution
Request
Search
All Orders
Order 1
Order 2
Order 3
Order 4
Search
All
Variant Name 10Items
Table or chart or other content
Filtered by Order (Order 2, Order 3, Order 4)
Suggest solution
Request
© 2014 SAP AG or an SAP affiliate company. All rights reserved. 47
Contextual Filter
Filtered by: variant 1
Filtered by: Variant 2 If there is only one filter criterion which the user can select an instance from, the icon should be changed to match said criterion. In this
case: Customer
Phone
Name 4 1.99USD
Last week100 Items
Name 3 6,450.00USD
6 days ago10 Items
Name 2 3,762,199.90USD
1 day ago3 Items
Lorem Ipsum
Name 1 100 MioUSD
Today1 Item
Customer 4 (Name 1) (509999)
Department:
Sales
Customer 3 (300700)
Department:
Sales
Customer 2 (300973)
Department:
Sales
Customer 1 (500098)
Department:
Sales
Sales Orders (42)
Search
Select Customer
Filtered by: Variant 2
Approve Reject
© 2014 SAP AG or an SAP affiliate company. All rights reserved. 49
SimpleForm
Example Label:
Another Example:
Label Example:
Yet Another Label:
This is an example description
Description example
Another example for a description
Next description goes here
Label 001:
Label 002 / Lable 003. :
Label 004 / Label 005:
Label 006: :
abcdefghijklmno
abcdefghojkl 12345
123456 abcdefghijklm
Lorem Ipsum
Label 000
Some Example Form
Purchase Order:
Valid Form:
ZIP Code/City:
123456789123
09/06/2014 12:00
1000 EUR
Qoutation Details
© 2014 SAP AG or an SAP affiliate company. All rights reserved. 50
FeedListItem
Firstname3 Lastname3: This FeedListItem displays an ImagePool image. Cras congue posuere metus sed tempus. Mauris euismod, dui sit amet molestie volutpat, ipsum est viverra velit, id ultricies ante dolor et ligula.
Rejected · Dec 04, 2012
Firstname2 Lastname2: Hi Firstname,Hmmmmmm. I am not so sure yet. You know we have so much work open for the current project. regards Firstname2
2013-06-08
Firstname Lastname: Hi Boss,my wife will be on sabbatical in the month of December and we have 5 kids. Best Firstname
2013-06-09
© 2014 SAP AG or an SAP affiliate company. All rights reserved. 51
FeedListItem
Waiting for Approval and waiting and waiting and waiting and waiting and waiting and waiting
and waiting and waiting and waiting and waiting and waiting and waiting and waiting and
waiting and waiting and waiting and waiting and waiting and waiting and waiting · Nov 23,
2012
Firstname2 Lastname2: This FeedListItem comes without an image and has a very long info text
Firstname Lastname: This FeedListItem comes with senderActive = false and iconActive = This FeedListItem comes with senderActive = false and iconActive = interdum eget sollicitudin acc, blandit a ante.
Waiting for Approval · Dec 02, 2012
© 2014 SAP AG or an SAP affiliate company. All rights reserved. 52
FeedListItem
Firstname1 Lastname1:This one has no date
New
Firstname2 Lastname2:And this one does without info
Nov 01, 2012
Firstname3 Lastname3:OPEN (No decision yet)
This one has no sender but active/inactve icons (check out the icon's color, when youpress this item)
Nov 01, 2012
© 2014 SAP AG or an SAP affiliate company. All rights reserved. 53
Login
© 2014 SAP AG or an SAP affiliate company. All rights reserved. 54
MessageToast
Control Example
Your request has been approved
Name4 1.99USD
Last week100 Items
Name 3 6,450.00USD
6 days ago10 Items
Name 2 3,762,199.90USD
1 day ago3 Items
Name 1 100 MioUSD
Today1 Item
Search
On behalf of Marty McFox
Requests (42)
Your request has been approved
© 2014 SAP AG or an SAP affiliate company. All rights reserved. 55
ObjectHeader
The following slides show multiple examples and variations of the ObjectHeader control….
Name2 3,762,199.90USD
1 day ago
© 2014 SAP AG or an SAP affiliate company. All rights reserved. 56
ObjectHeader
Example Object Header Text
Forwarded by Name2
First Attribute
Second Attribute
Positive Text
3.624Euro
Status Info
Added by Name3
Negative Text About Something That Is Extremely Negative
999.999.123.624,00Euro
Example Object Header Text That
Is Rather Long – It Is Even So Long
That It has to Wrap Twice
© 2014 SAP AG or an SAP affiliate company. All rights reserved. 57
ObjectHeader
Example Object Header Text
First Attribute Positive Text
3.624Euro
Status Info
Example Object Header Text
First Attribute Positive Text
3.624Euro
Status InfoSecond Attribute with a very long descriptive text that will wrap around because it is sooo long
© 2014 SAP AG or an SAP affiliate company. All rights reserved. 58
ObjectHeader
Example Object Header Text That Is Sooo Long That
It has To Wrap Several Times Before We Reach The
End. That Is How Long This Text Is – Can You Even
Begin To Believe Just How Long This Text Actually Is
Or Do You Fail To Believe It?
Added by Name5
First Attribute
Second Attribute with a very long descriptive text that will wrap around because it is sooo long
Negative Text
Status Info
xxx.999.999.123.624,00Euro
© 2014 SAP AG or an SAP affiliate company. All rights reserved. 59
ObjectHeader
Added by Name5 Positive Text
Example Object Header Text That Is Sooo Long That It has to Wrap Once
Added by Name5
First Attribute
Second Attribute with a very long descriptive text that will wrap around because it is sooo long
Negative Text
Status Info
xxx.999.999.123.624,00Euro
Example Object Header Text That Is Rather Long That It has to Wrap Once
© 2014 SAP AG or an SAP affiliate company. All rights reserved. 60
Footer [Tablet/Desktop]
Footer [Tablet/Desktop with default action]
Footer [Phone]
Footer [Phone with default action]
Bar
Cancel
Cancel
Save
Approve Reject
Approve Reject
Save
© 2014 SAP AG or an SAP affiliate company. All rights reserved. 61
Popover
Popover
Action 1 Action 2
Employee
Hiro ProtagonistSenior Deliverator
Contact DetailsMobile:
0132-76541234
Work:
0468-75312468
Email:
CompanyName:
Company Name
Quick Overview
Profile
Firstname LastNameSales Assistant
Contact DetailsMobile:
0132-76541234
Work:
0468-75312468
Email:
CompanyName:
Company AAddress:
8716 Street, Country
Open in JamSend Email
© 2014 SAP AG or an SAP affiliate company. All rights reserved. 62
Popover
Quick Overview Person
Firstname LastnameSenior Deliverator
Contact DetailsMobile:
0132-76541234
Work:
0468-75312468
Email:
CompanyName:
Company B
Quick Overview Company
Company BDepartment C
Contact DetailsPhone:
0468-75312468
Address:
Some street 3
1111111 City
Main Contact
Name:
Fistname Name
Mobile:
0132-76541234
Email:
Example without icon
Quick Overview Generic
Company BDepartment C
Mobile:
0132-76541234
Phone:
0468-75312468
Email:
CompanyName:
Company B
This is a status info and can have semantic colors like @NegativeText or @CriticalText or @PositiveText.
Send Email
© 2014 SAP AG or an SAP affiliate company. All rights reserved. 63
Progress Indicator
Enabled Disabled
Negative without text Negative without text
Positive with text Positive with text
Critical, 50% with text Critical, 50% 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. 64
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. 65
RatingIndicator
© 2014 SAP AG or an SAP affiliate company. All rights reserved. 66
Initial State
Active/Typing
Search complete
Lorem Ips|
SearchField
Search
Lorem Ipsum
© 2014 SAP AG or an SAP affiliate company. All rights reserved. 67
SegmentedButton
Content
Header
Footer
Action1 Action2 Action3
Action1 Action2 Action3
Action1 Action2 Action3
© 2014 SAP AG or an SAP affiliate company. All rights reserved. 68
Select
Used in Content Area
Vacation
Vacation
Vacation
Leave 1/2 Day
Sick Leave
Educational Leave
Footer
Price
Item
Price
Scheduling
© 2014 SAP AG or an SAP affiliate company. All rights reserved. 69
Value Help Dialog
Status
Status
Com|
Company 1
Company 2
Company 3
Company 4
Status
Company 1 |
© 2014 SAP AG or an SAP affiliate company. All rights reserved. 70
Select “Company”
Search
Advanced Search
Company Code::
Company Name::
Currency Code::
Company Code Company Name City Currency Code
90000201 Company A City 1 EUR
90000213 Company A City 1 EUR
90000183 Company A City 1 EUR
90000623 Company A City 1 EUR
90000871 Company A City 1 EUR
Items (1234)
Selected Items (1)
Excluded Items (1)
OK Cancel
Company A
Company A
© 2014 SAP AG or an SAP affiliate company. All rights reserved. 71
ComboBox
|Choose your country
Algeria
Argentina
Australia
Austria
Bahrain
Belgium
Bosnia Herzegovina
Brazil
Bulgaria
Canada
|Choose your country
Choose your country
© 2014 SAP AG or an SAP affiliate company. All rights reserved. 72
Multi ComboBox
Croatia
Cuba
Czech Republic
Denmark
Egypt
Estonia
Finland
France
Germany
Ghana
|Choose your country
Croatia
Cuba
Czech Republic
Denmark
Egypt
Estonia
Finland
France
Germany
Ghana
Germany |
|Choose your countryChoose your country
© 2014 SAP AG or an SAP affiliate company. All rights reserved. 73
Slider
Enabled Disabled
© 2014 SAP AG or an SAP affiliate company. All rights reserved. 74
Switch
Enabled Disabled
ON OFF
I O
ON OFF
I O
© 2014 SAP AG or an SAP affiliate company. All rights reserved. 75
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. 76
Date picker
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
Sun Mon Tue Wed Thu Fri Sat
November 2013
27
28
29
30
31
32
01/01/14
01/01/14
© 2014 SAP AG or an SAP affiliate company. All rights reserved. 77
Sharing
Send Email
open in <app type>
Share in SAP Jam
Save as Tile
Last week100 Items
EmmettBrown
3,762,199.90USD
1 day ago3 Items
On behalf of Marty McFly
Tony Stark 100 MioUSD
Today1 Item
Search
Lorem Ipsum
Milton Waddams 1.99USD
Bill Lumbergh 6,450.00USD
6 days ago10 Items
Send Email
open in <app type>
Share in SAP Jam
Save as Tile
Cancel
Phone
iPad & Desktop
© 2014 SAP AG or an SAP affiliate company. All rights reserved. 78
IconTabBar
Container can be filled with any content
Container can be filled with any content
1701
32
© 2014 SAP AG or an SAP affiliate company. All rights reserved. 79
IconTabBar
Info Notes Approvals Attachments
Lorem Ipsum Babies Doner KebabThe use of labels is
optional. Please mind to either use labels for
ALL or NONE of the tabs.
Container can be filled with any content
© 2014 SAP AG or an SAP affiliate company. All rights reserved. 80
IconTabBar
Ordered
42 of 42
Shipped
19 of 42
Delivered
23 of 42
4
7
19 Products
Type A Type B Type C
8
Container can be filled with any content
Container can be filled with any content
© 2014 SAP AG or an SAP affiliate company. All rights reserved. 81
IconTabBar
Lorem Ipsum Dolor Sit Amet Consectetuer
Container can be filled with any content
Request
Name 1 3,762,199.90USD
1 day ago
On behalf of Name 2
ITEMS (3)
Label Lorem Ipsum:
Description dolor sit
Consectetuer:
Eget dolor Aenean massa
Adipiscing elit Aenean:
Cum sociis natoque
Commodo ligula:
Penatibus et magnis dis parturient
32
Phone
TabContainer
© 2014 SAP AG or an SAP affiliate company. All rights reserved. 83
Input
Prompt Text
Lorem ipsum
Lorem ipsum
Lorem ipsum |
|
Error
Warning
Success
© 2014 SAP AG or an SAP affiliate company. All rights reserved. 84
Table
Pricing Details (3)
Senior Consultant
Junior Consultant
Project Manager
Role Project Price/ h
95.0001/01/14
01/01/14
01/01/14
12/31/14
12/31/14
12/31/14
Valid from Valid to
66.50
99.00
USD
USD
USD
Phone
Customer
Role
Pricing Details
Project Price/h
95.00 USD
01/01/14
12/31/14
66.50 USD
99.00 USD
Senior Consultant
Junior Consultant
Senior Consultant
Valid from:
Valid to:
Valid from:
Valid to:
01/01/14
12/31/14
© 2014 SAP AG or an SAP affiliate company. All rights reserved. 86
Analytical Table (ALV)- NOT RESPONSIVE
Document No. Description PK Posting Date Offset Account
90000201 Laptops Brand1 40 01.14.2014 660200
90000213 HANA Servers 40 01.14.2014 700000
90000183 Tablet 40 01.14.2014 2 Accounts
90000623 Printers 40 01.14.2014 660200
90000871 3D Printers 40 01.14.2014 550000
90007211 Smartphone 40 01.14.2014 660200
90002121 HANA Servers 40 01.14.2014 700000
90000231 Chair 40 01.14.2014 660200
90000231 Printers 40 01.14.2014 700000
90381122 3D Printers 40 01.14.2014 2 Accounts
92192911 Laptops 40 01.14.2014 660200
90000371 Tablet 40 01.14.2014 550000
90000812 HANA Servers 40 01.14.2014 660200
90007211 Smartphone 40 01.14.2014 700000
Items (1234)
© 2014 SAP AG or an SAP affiliate company. All rights reserved. 87
Timeline
Name 3 completed a call.Today at 12:56 AM
Called Name1 to discuss Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
Name 2 added a note.Today at 11:32 AM
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Sociis.
Name 2 added an invoice.Yesterday at 11:14 PM
Invoice(421999)
199,00USD
Open
Name1 increased the probability from 20% to 30%.Two days ago at 03:36 PM
Name1 completed a call.Two days ago at 12:56 AM
Called Name3 to clarify the details on the latest Nulla consequat massa quis enim. Donec pede justo.
© 2014 SAP AG or an SAP affiliate company. All rights reserved. 88
Tokenizer
Enabled
Enabled Hover
Enabled Selected
Token1 Field Text
Token1
Token1 Token2
© 2014 SAP AG or an SAP affiliate company. All rights reserved. 89
Panel / Tray – Expand
Group1 Header Title
Group1 Header Title
Lorem ipsum dolor sit amet, consectetuer adipiscing elit commodo ligula eget dolor. Aenean massa
© 2014 SAP AG or an SAP affiliate company. All rights reserved. 90
Tree Table (Not Responsive)
Name Description
item1
Sub item1-1
Sub item1-1-1
Sub item1-1-2
Sub item1-2
item2
BackgroundsFor tablet and phone designs
Use this background to create Launchpad for tablets and PCs
Use this background to create apps for tablets and PCs
Use this background for smart phone apps
© 2014 SAP AG or an SAP affiliate company. All rights reserved. 95
© 2014 SAP SE or an SAP affiliate company. All rights reserved.
No part of this publication may be reproduced or transmitted in any form or for any purpose without the express permission of SAP AG or an SAP affiliate company.
SAP and other SAP products and services mentioned herein as well as their respective logos are trademarks or registered trademarks of SAP AG (or an SAP affiliate company) in Germany and other countries. Please see http://global12.sap.com/corporate-en/legal/copyright/index.epx for additional trademark information and notices.
Some software products marketed by SAP AG and its distributors contain proprietary software components of other software vendors.
National product specifications may vary.
These materials are provided by SAP AG or an SAP affiliate company for informational purposes only, without representation or warranty of any kind, and SAP AG or its affiliated companies shall not be liable for errors or omissions with respect to the materials. The only warranties for SAP AG or SAP affiliate company products and services are those that are set forth in the express warranty statements accompanying such products and services, if any. Nothing herein should be construed as constituting an additional warranty.
In particular, SAP AG or its affiliated companies have no obligation to pursue any course of business outlined in this document or any related presentation, or to develop or release any functionality mentioned therein. This document, or any related presentation, and SAP AG’s or its affiliated companies’ strategy and possible future developments, products, and/or platform directions and functionality are all subject to change and may be changed by SAP AG or its affiliated companies at any time for any reason without notice. The information in this document is not a commitment, promise, or legal obligation to deliver any material, code, or functionality. All forward-looking statements are subject to various risks and uncertainties that could cause actual results to differ materially from expectations. Readers are cautioned not to place undue reliance on these forward-looking statements, which speak only as of their dates, and they should not be relied upon in making purchasing decisions.
© 2014 SAP AG or an SAP affiliate company. All rights reserved. 96
© 2014 SAP SE oder ein SAP-Konzernunternehmen. Alle Rechte vorbehalten.
Weitergabe und Vervielfältigung dieser Publikation oder von Teilen daraus sind, zu welchem Zweck und in welcher Form auch immer, ohne die ausdrückliche schriftliche Genehmigung durch SAP AG oder ein SAP-Konzernunternehmen nicht gestattet.
SAP und andere in diesem Dokument erwähnte Produkte und Dienstleistungen von SAP sowie die dazugehörigen Logos sind Marken oder eingetragene Marken der SAP AG (oder von einem SAP-Konzernunternehmen) in Deutschland und verschiedenen anderen Ländern weltweit. Weitere Hinweise und Informationen zum Markenrecht finden Sie unter http://global.sap.com/corporate-de/legal/copyright/index.epx.
Die von SAP AG oder deren Vertriebsfirmen angebotenen Softwareprodukte können Softwarekomponenten auch anderer Softwarehersteller enthalten.
Produkte können länderspezifische Unterschiede aufweisen.
Die vorliegenden Unterlagen werden von der SAP AG oder einem SAP-Konzernunternehmen bereitgestellt und dienen ausschließlich zu Informationszwecken. Die SAP AG oder ihre Konzernunternehmen übernehmen keinerlei Haftung oder Gewährleistung für Fehler oder Unvollständigkeiten in dieser Publikation. Die SAP AG oder ein SAP-Konzernunternehmen steht lediglich für Produkte und Dienstleistungen nach der Maßgabe ein, die in der Vereinbarung über die jeweiligen Produkte und Dienstleistungen ausdrücklich geregelt ist. Keine der hierin enthaltenen Informationen ist als zusätzliche Garantie zu interpretieren.
Insbesondere sind die SAP AG oder ihre Konzernunternehmen in keiner Weise verpflichtet, in dieser Publikation oder einer zugehörigen Präsentation dargestellte Geschäftsabläufe zu verfolgen oder hierin wiedergegebene Funktionen zu entwickeln oder zu veröffentlichen. Diese Publikation oder eine zugehörige Präsentation, die Strategie und etwaige künftige Entwicklungen, Produkte und/oder Plattformen der SAP AG oder ihrer Konzernunternehmen können von der SAP AG oder ihren Konzernunternehmen jederzeit und ohne Angabe von Gründen unangekündigt geändert werden. Die in dieser Publikation enthaltenen Informationen stellen keine Zusage, kein Versprechen und keine rechtliche Verpflichtung zur Lieferung von Material, Code oder Funktionen dar. Sämtliche vorausschauenden Aussagen unterliegen unterschiedlichen Risiken und Unsicherheiten, durch die die tatsächlichen Ergebnisse von den Erwartungen abweichen können. Die vorausschauenden Aussagen geben die Sicht zu dem Zeitpunkt wieder, zu dem sie getätigt wurden. Dem Leser wird empfohlen, diesen Aussagen kein übertriebenes Vertrauen zu schenken und sich bei Kaufentscheidungen nicht auf sie zu stützen.