1 / 0

Prototyping Kit

Prototyping Kit. SAP Fiori March, 2014. Information. To view the following slides correctly, please make sure you have the latest version of SAP’s icon font ( SAP-Icons ) installed. It comes with the Open UI5 SDK . Link to Fiori Guidelines. Launchpad ( Tiles). Example. . Search. .

risa
Download Presentation

Prototyping Kit

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. Prototyping Kit SAP FioriMarch, 2014
  2. 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

  3. Launchpad (Tiles)

    Example
  4.  Search  My Home Gross Revenue under Headline over two Headline over two Name Approve Travel Comparative Annual Target lines lines Totals Request Subheadline Subheadline Employee Global - Year to Date By Regions (M EUR) Continent 2 97 M Continent 3 Continent 1 234 M 197 M 0 0 3 78 1  M USD. Absolute Deviation Request Value definition Leave Requests Value definition 16 M 125 M 56 M News Headline M SAP News December 06, 2013 Jan 31 Jan 1 Cumulative Totals Headline Headline Gross Revenue Global - Year to Date Subheadline Expenses ( M EUR) Subheadline 125 348.2 345.2 M 75 Actual and Target USD, Actual Value definition Working Space Headline Headline
  5. Phone   Search Search   16 M 125 M 56 M Continent 2 Continent 2 97 M 97 M My Home My Home Continent 1 Continent 1 234 M 234 M Continent 3 Continent 3 197 M 197 M Jan 31 Jan 1 Cumulative Totals Comparative Annual Gross Revenue Comparative Annual Approve Travel Name Name Headline Approve Travel Total Total Request Request Global – Year to Date Subheadline Expenses (M EUR) By Regions (M EUR) By Regions (M EUR) Employee Employee 1 3 3 1 Leave Requests Request Request Leave Requests News Headline 348.2   SAP News December 06, 2013 M USD, Actual Working Space 125 Actual and Target 75 Headline

  6. Approval Scenario

    Exemplary App
  7.   Request Requests (42)  Search 100 M 1.99 6,450.00 Name Name Name 3,75 M Name USD USD USD USD Today Last week 6 days ago 1 Item 10 Items 100 Items 3 1 day ago 3 Items    On behalf of supervisor name Label: Label: Label: Label: Label text Label text Label text Label text Onbehalfof supervisor name Name 3,75 M USD 1 day ago ITEMS (3) Description Quantity Price Total 1 12,000.00 USD 12,000.00 USD Product A 1771.00 15 250,000.00 USD 3,75 M USD Product B Name USD 1 199.90 USD 199.90 USD Product C Last week 84 Items 23 Mio Name Reject Approve USD  
  8.      Item 1 of 3 Requests (42)  Search 1.99 6,450.00 100 M Name Name Name 3,75 M Name USD USD USD USD Today 6 days ago Last week 100 Items 10 Items 1 Item 1 day ago 3 Items On behalf of supervisor name Information Material: 10261985 Material Group: (1955) Item Name 12,000.00 Delivery on September 20, 2013 USD Plant: Plant name 1 Piece(s) 12,000.00 USD per 1 piece(s) Address: Address Notes Note text Item Text Account Assignment 1771.00 Name Category Description G/L Account Total USD Last week 84 Items Corporate Services (1000) Lorem Ipsum dolor sit amet consectetuer (890000) 100% Cost Center 23 M Name USD  
  9.   Request Requests (42)  Search 100 M Name USD  Today 1 Item 3    On behalf of supervisor name 3,75 M Name USD  Label: Label: Label: Label: Label text Label text Label text Label text 1 day ago 3 Items Name 100,000.00 6,450.00 USD Name USD Today 6 days ago 10 Items ITEMS (3) 1.99 Name Description Quantity Price Total USD  Last week 1 Item 1 12,000.00 USD 12,000.00 USD Product A 1771.00 15 250,000.00 USD 3,75 M USD Product B Name USD 1 199.90 USD 199.90 USD Product C Last week 84 Items 23 M Name Reject Approve USD  
  10. Phone   Search Search 100 M 6,450.00 100 M 1.99 1.99 6,450.00   Requests (42) Requests (42) Name Name Name Name Name Name 3,8 M 3,8 M Name USD USD USD USD USD USD Name USD USD Today Today 6 days ago 6 days ago Last week Last week 100 Items 1 Item 100 Items 10 Items 10 Items 1 Item 3 Items 1 day ago 3 Items 1 day ago On behalf of supervisor On behalf of supervisor    
  11. Phone   Request Request Onbehalfofsupervisor Name 3,8 M USD 1 day ago 3 3       Label: Description dolor sitLabel: Eget dolor Aenean massaLabel: Cum sociis natoqueLabel: Penatibus et magnis dis parturient Approve Approve       ITEMS (3)
  12. Phone   Request Request Cum sociis natoqueLabel: Penatibuset magnis dis parturient Cum sociis natoqueLabel: Penatibus et magnis dis parturient ITEMS (3) ITEMS (3) Description Description Product AQuantity:1 Price:12,000.00 USD Total:12,000.00 USD Product A Quantity:1 Price:12,000.00 USD Total:12,000.00 USD Product BQuantity:15 Price Product BQuantity:15 Price Approve Approve      
  13. Phone       1 of 3 1 of 3 AddressAddress Notes Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Item Text Product A 12,000.00 Information USD Account Assignment Material:10261985 Material Group:Lorem Ipsum (1955) Category Total 1 Piece(s) 12,000.00 USD per 1 piece(s) 100% Cost Center Description:Corporate Services (1000) G/L Account:Lorem Ipsum dolor sit amet consectetuer (890000) Delivery on September 20, 2013 Plant:Plant Name Address:Address Pricing Conditions Description

  14. Leave Request Create

    Exemplary App
  15.  Request Leave Vacation ?  22 Days used 25 Days available   November 2013 December 2013 MON TUE WED THU FRI SAT SUN MON TUE WED THU FRI SAT SUN Note 28 29 30 31 1 2 3 25 26 27 28 29 30 1 4 5 6 6 8 9 10 2 3 4 5 6 7 8 11 12 13 14 15 16 17 9 10 11 12 13 14 15 18 19 20 21 22 23 24 16 17 18 19 20 21 22 25 26 27 28 29 30 1 23 24 25 26 27 28 29 2 3 4 5 6 7 8 30 31 1 2 3 4 5  Workday Non-Workday Approved Leave Pending Approval Public Holiday Today Selected Day(s) Send Cancel  
  16.  Request Leave Vacation  Vacation 22 Days used 25 Days available   November 2013 December 2013 Leave 1/2 Day MON TUE WED THU FRI SAT SUN MON TUE WED THU FRI SAT SUN Note 28 29 30 31 1 2 3 25 26 27 28 29 30 1 Sick Leave 4 5 6 6 8 9 10 2 3 4 5 6 7 8 Educational Leave 11 12 13 14 15 16 17 9 10 11 12 13 14 15 18 19 20 21 22 23 24 16 17 18 19 20 21 22 25 26 27 28 29 30 1 23 24 25 26 27 28 29 2 3 4 5 6 7 8 30 31 1 2 3 4 5  Workday Non-Workday Approved Leave Pending Approval Public Holiday Today Selected Day(s) Send Cancel  
  17. Phone   Request Leave Request Leave 25 26 27 28 29 30 1 22 Days used 22 Days used 25 Days available 25 Days available Note Note   November 2013 Vacation ?  MON TUE WED THU FRI SAT SUN 28 29 30 31 1 2 3 4 5 6 6 8 9 10  Workday 11 12 13 14 15 16 17 Non-Workday 18 19 20 21 22 23 24 Approved Leave Pending Approval 25 26 27 28 29 30 1 Public Holiday Today Selected Day(s) Send Send Cancel Cancel    

  18. SAP UI5 Controls

  19. Sap.m.ActionSheet PhoneTablet Action One Action Two Action One Action Two Cancel    Settings  About Fiori  Login Details  Logout 
  20. Phone   Search Search 3,8 M 3,8 M 100 M 1.99 6,450.00 6,450.00 1.99 100 M   Requests (42) Requests (42) Name Name Name Name Name Milton Addams Bill Lambert Name USD USD USD USD USD USD USD USD 6 days ago 1 day ago Last week 6 days ago 1 day ago Last week Today Today 100 Items 3 Items On behalf of supervisor name 100 Items 10 Items 1 Item 1 Item 10 Items 3 Items On behalf of supervisor name Settings About Fiori Login Details  Logout Cancel
  21.   Request Requests (42) Requests (42) Sap.m.Bar Header (for apps using a Master/Detail template) Header (for apps with a Full Screen template) Tablet/Desktop Plural (amount) Singular   Requests (42) Request Phone Tablet/Desktop
  22. Sap.m.Bar Footer (Tablet/Desktop) Footer (Tablet/Desktop with default action) Action 1 Action 2   Reject Approve  
  23. Sap.m.Bar Footer (Phone) Action 2 Reject Action 3 Action 3  Cancel Cancel Footer (Phone with default action)  Approve   Action 1  
  24. Sap.m.BusyIndicator  Request Control Example 3    Approve   
  25. Sap.m.Button ContentHeaderFooter Regular Pressed Default Action(First and most frequently used action in footer) Approve/Reject Action 1     Action 1     Action 1 Action 1     Approve Approve Reject Reject
  26. Sap.m.Checkbox EnabledDisabled   Option 1 Option 1   Option 2 Option 2 Option 3 Option 3   Option 4 Option 4 Option 5 Option 5
  27. Sap.m.DateTimeInput   November 2013 MON TUE WED THU FRI SAT SUN 28 29 30 31 1 2 3 + numeric keyboard 11/06/2015 11/06/2015 11/06/2015|    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
  28. Sap.m.Dialog Message Header Message Header Label Container can be filled with any content Add Note OK Dolor Cancel Sit
  29. Sap.m.FeedListItem Employee: Loremipsumdolorsitamet, consectetueradipiscingelit. Aenean commodo ligulaegetdolor. Aeneanmassa. Cum sociisnatoquepenatibus et magnisdisparturient. 2013-06-09 Supervisor: Loremipsumdolorsitamet, consectetueradipiscingelit. Aeneancommodo ligulaegetdolor. Aeneanmassa. Cum sociisnatoquepenatibus et magnis a,  2013-06-08 Employee: Loremipsumdolorsitamet, consectetueradipiscingelit. Rejected · Dec 04, 2012
  30. Sap.m.FeedListItem Employee:Loremipsumdolorsitamet, consectetueradipiscingelit. Aenean commodo ligulaegetdolor. Aeneanmassa. Cum sociisnatoquepenatibus et magnisdisparturient Waiting for Approval · Dec 02, 2012
  31. Sap.m.FeedListItem Employee: Loremipsumdolorsitamet, consectetuer New Employee: Loremipsumdolorsitamet, consectetuer Nov 01, 2012 Employee: Loremipsumdolorsitamet, consectetuer This onehasnosender but active/inactveicons (check out theicon'scolor, whenyou  pressthis item) Nov 01, 2012
  32. Phone Employee: Loremipsumdolorsit LoremIpsumAeneancommodo ligula eget dolor. Aeneanmassa. Cum sociisnatoque penatibuset magnis dis parturient montes,   Header Title Header Title waiting and waiting and waiting and waiting and 2013-06-09 waiting and waiting · Nov 23, 2012 Supervisor: Loremipsum dolor sit LoremIpsumAeneancommodo ligula eget dolor. Aeneanmassa. Cum sociisnatoque penatibus et magnis dis parturient montes 2013-06-08 Employee: LoremIpsum New Employee: Loremipsum dolor sit LoremIpsumAeneancommodo ligula eget Employee: LoremIpsum posueremetussedtepus. Mauris info euismod, dui sit amet molestie volutpat, ipsumestviverravelit, id ultricies ante dolor Nov 01, 2012 et ligula. Rejected · Dec 04, 2012 Emplyee: LoremIpsum Employee: This FeedListItem comes with This onehasnosender but active/inactve senderActive = false and iconActive = icons (check out theicon'scolor, whenyou false. In hac habitasse platea dictumst. press this item) Nov 01, 2012    
  33. Sap.m.IconTabBar    Container can be filled with any content 1701 33     Container can be filled with any content
  34. Sap.m.IconTabBar      The use of labels is optional. Please mind to either use them for ALL or NONE of the tabs. Info Notes Approvals Attachments Lorem Ipsum Container can be filled with any content
  35. Phone  Header Title Onbehalfofsupervisor name 3,8 M Name USD 1 day ago 3    Label: Description dolor sitLabel: Eget dolor AeneanmassaLabel: Cum sociis natoqueLabel: Penatibus et magnis dis parturient TabContainer  
  36. Sap.m.Input Prompt Text | Lorem ipsum | Lorem ipsum Lorem ipsum Error Warning Success
  37. Phone   Header Title Header Title Group Title * Label: * Label: * Label: * Label: Label: Label1 / Label 2: Label1 / Label 2: Group Title Label: Label 1 / Label 2:    
  38. Sap.m.List Group 1 Header Title Group 2 Header Title Item Label Regular Error Message Item Label Bold Warning Message  Another Item With Long Label Success Message  Item with small Icon Info Message  Item with small Icon List Footer
  39. Phone  Header Title Group 1 Header Title Item Label Regular Error Message Item Label Bold Warning Message  Item with… Success Message Group 2 Header Title  Item with small Icon Info Message  tem with small Icon List Footer  
  40. Sap.m.List Standard List Icon TRAVEL LIST Travel Expend 123 Access the travel expend workflow Error message Travel and Expense Report 4 Access the travel expend workflow Warning Message Travel Request  Access the travel expend workflow Success message Work Accidents  Report your work accidents Travel Settings  Change your travel workflow settings We strongly advise you to keep your luggage with you at all times. Any unattended luggage in the t…
  41. Phone  Header Title TRAVEL LIST Travel Expend 123 Access th... Error message Travel Expend 4 Access th... Warning Message Travel Expend  Access the t... Success message Work Accidents  Report your work accidents Travel Settings  Change yourtravelworkflowsettings We strongly advice you to keep your lugg...  
  42. Sap.m.List Standard List No Image List Header Item Name 1  Description text Item Name 2 bold  Description text bold Item Name 3  Description text Item Name 4  Descriptiontext Item Name 5  Description text Table Footer Text
  43. Phone  Header Title Subheader Title Label  Maecenas tempus, tellus eget condime… Label bold  Nam quam nunc, blandit vel Label  Luctus pulvinar, hendrerit id, lorem Label  Maecenas nec odio et ante tincidunt Label  Donec vitae sapien ut libero venenatis Lorem ipsum dolor sit amet, consectetuer…  
  44. Sap.m.ListAsTable ITEMS (3) Description Quantity Price Total 1 12,000.00 USD 12,000.00 USD Product A 15 250,000.00 USD 3,75 M USD Product B 1 199.90 USD 199.90 USD Product C
  45. Sap.m.MessageBox  Error  Warning  Information Lorem ipsum dolor sit. Ametconsectetuer? Lorem ipsum dolor sit. Ametconsectetuer? Lorem ipsum dolor sit. Ametconsectetuer? OK OK OK
  46. Sap.m.MessageToast  Search 1.99 6,450.00 100 M  Requests (42) Name Name Name 3,8 M Name USD USD USD USD 6 days ago Today Last week 10 Items 100 Items 1 Item Control Example 3 Items 1 day ago Your request has been approved On behalf of supervisor name Your request has been approved  
  47. Sap.m.ObjectHeader The following slides show multiple examples and variations of the ObjectHeader control…. OnbehalfofName Name 3,8 M USD 1 day ago
  48. Sap.m.ObjectHeader 3.624 Object Header Text Euro Forwarded by Name First Attribute Positive Text Second Attribute Status Info Object Header (Second Line) (Third Line) 999.9 B Euro Added by Name Negative Text
  49. Sap.m.ObjectHeader 3.624 Object Header Text Euro First Attribute Positive Text Second Attribute (over two lines) Status Info 3.624 Object Header Text Euro First Attribute Positive Text Status Info
  50. Sap.m.ObjectHeader Object Header Text (Second Line) (Third Line) (Fourth Line) (Fifth Line) 999.9 B Euro Addedby Name First Attribute Negative Text Second Attribute (two lines) Status Info
  51. Sap.m.ObjectHeader Object Header Text (Second Line) Addedby name Positive Text Object Header Text (Second Line) 999.9 B Euro Addedby name First Attribute Negative Text Second Attribute (Second Line) Status Info
  52. Phone  Request Onbehalfofsupervisor Name 3,7 M USD 1 day ago ObjectHeader 3    Label: Description dolor sitLabel: Eget dolor Aenean massaLabel: Cum sociis natoqueLabel: Penatibus et magnis dis parturient    ITEMS (3)
  53. Sap.m.ObjectListItem 3,7 M Name USD 1 day ago 3 Items Second Attribute RegularPressedSelected 3,7 M 3,7 M Name Name USD USD 1 day ago 1 day ago 3 Items Second Attribute 3 Items Second Attribute
  54. Sap.m.ObjectListItem (Edit Mode) 100 M Name USD  Today 1 Item CheckedUnchecked 1771.00 Name USD Last week 84 Items
  55. Sap.m.ObjectListItem Further Examples 100 M Product A USD Positive Text 1 Item 99,9 B Product B USD Negative Text First Attribute Second Attribute Third Attribute 10,000.00 Product C USD  1 Item
  56. Sap.m.Popover Quick Overview Employee Name Position  Label Contact Details Mobile: 0000-000000 Work: 0000-000000 Email: example@sap.com Company Name: Company name OK Cancel Send Message
  57. 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 0.99GB of 1TB 25% 25% 50% 50%
  58. Sap.m.RadioButton Enabled/disabled All disabled Option 1 Option 1 Option 2 Option 2 Option 3 Option 4
  59. Sap.m.RatingIndicator This control can make use of the icon font (e.g. SAP-Icons) to represent the rating.
  60. Sap.m.SearchField   Search Search Text Initial State Active/Typing Search complete  text|
  61. Sap.m.SegmentedButton Content Header Footer    Action 1 Action 2 Action 3 Action 1 Action 3 Action 2    Action 1 Action 3 Action 2   
  62. Sap.m.Select Used in Content Area Vacation  Vacation  Vacation Leave 1/2 Day Sick Leave Educational Leave
  63. Sap.m.Select  Header Title Action Header Footer  Header Title Action Action One Action One Action Two Action Two Action Three Action Three Action Four Action Four Action Action    
  64.  Phone (Header) Search…  Search 3,7 M 3,7 M 6,450.00 1.99 100 Mio 100 M 6,450.00 1.99   Header Title Header Title Action Name Name Name Name Name Tommy Stark Name Name Action USD USD USD USD USD USD USD USD Today 6 days ago Last week Today Last week 1 day ago 1 day ago 6 days ago 1 Item 10 Items 100 Items 10 Items 100 Items 1 Item 3 Items On behalf of supervisor 3 Items On behalf of supervisor Action One Action Two Action Three Action Four    
  65. Phone (Footer)   Search Search 3,7 M 3,7 M 100 M 1.99 100 M 6,450.00 1.99 6,450.00   Header Title Header Title Name Name Name Bill Lambert name Milton Addams Name Name Action USD USD USD USD USD USD USD USD 6 days ago 6 days ago Last week Last week 1 day ago 1 day ago Today Today 1 Item 10 Items 10 Items 3 Items On behalf of supervisor 100 Items 1 Item 100 Items 3 Items On behalf of superviosr Action One Action Two Action Three Action Four Action Action    
  66. Sap.m.Slider EnabledDisabled
  67. Sap.m.Switch Enabled Disabled ON I ON I OFF O   OFF O  
  68. Sap.m.TextArea Standard Inactive Semantic 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. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis.
  69. Sap.me.Calendar   November 2013 December 2013 MON TUE WED THU FRI SAT SUN MON TUE WED THU FRI SAT SUN 28 29 30 31 1 2 3 25 26 27 28 29 30 1 4 5 6 6 8 9 10 2 3 4 5 6 7 8 11 12 13 14 15 16 17 9 10 11 12 13 14 15 18 19 20 21 22 23 24 16 17 18 19 20 21 22 25 26 27 28 29 30 1 23 24 25 26 27 28 29 2 3 4 5 6 7 8 30 31 1 2 3 4 5
  70. Sap.me.Calendar   November 2013 December 2013 January 2014 MON TUE WED THU FRI SAT SUN MON TUE WED THU FRI SAT SUN MON TUE WED THU FRI SAT SUN 28 29 30 31 1 2 3 25 26 27 28 29 30 1 30 31 1 2 3 4 5 4 5 6 6 8 9 10 2 3 4 5 6 7 8 6 7 8 9 10 11 12 11 12 13 14 15 16 17 9 10 11 12 13 14 15 13 14 15 16 17 18 19 18 19 20 21 22 23 24 16 17 18 19 20 21 22 20 21 22 23 24 25 26 25 26 27 28 29 30 1 23 24 25 26 27 28 29 27 28 29 30 1 2 3 2 3 4 5 6 7 8 30 31 1 2 3 4 5 4 5 6 7 8 9 10
  71. Phone  Requests Leave 22 Days used 25 Days available Note   November 2013 Vacation ?  MON TUE WED THU FRI SAT SUN 28 29 30 31 1 2 3 4 5 6 6 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 1 Calendar Send Cancel  
  72. 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  Workday Non-Workday Approved Leave Pending Approval Public Holiday Today Selected Day(s) Selected Day(s)
  73. Phone   Request Leave Request Leave 25 25 26 26 27 27 28 28 29 29 30 30 1 1 22 Days used 22 Days used 25 Days available 25 Days available Note Note   Send Send Cancel Cancel    
  74. Phone   Request Leave Request Leave 25 25 26 26 27 27 28 28 29 29 30 30 1 1 22 Days used 22 Days used 25 Days available 25 Days available Note Note   Workday Workday Non-Workday Non-Workday Approved Leave Approved Leave Pending Approval Pending Approval Public Holiday Public Holiday Today Today Selected Day(s) Selected Day(s) Send Send Cancel Cancel     Calendar Legend
  75. Sap.ui.commons.form.SimpleForm Label: Label: Label: Label: Example description text Example description text Example description text Example description text

  76. Complex Controls

  77. Facet Filter
  78.   Header Title   All Suppliers All Items All Business Partners All Orders Variant Name 10 Items  Table or chart or other content Suggest Solution   
  79.   Header Title   All Suppliers All Items All Business Partners All Orders  Search Search  Variant Name 10 Items  All Orders  Order 1 Table or chart or other content Order 2 Order 3 Order 4 Suggest Solution  
  80.   Header Title  Filtered by Supplier (Supplier 2, Supplier 4, Supplier 5) Variant Name 10 Items  Table or chart or other content Suggest Solution Suggest Solution    
  81.   Filtered by Name Filtered by Name Contextual Filter 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.  Filtered by Name Phone Company Name (500098) Sales Area: Name of Location Company Name (300973) Sales Area: Name of Location Company Name (300700)Sales Area: Name of Location 3,7 M 100 M 6,450.00    Sales Orders (42) Select Customer Name Name Name USD USD USD  3 Items Search 1 day ago Today 6 days ago 1 Item 10 Items 1.99 Name USD Company name (Name 1) (509999)Sales Area: Location Last week 100 Items    
  83. Additional Assets

  84. Pointers

  85. Pointers: Hand You can use these pointers to indicate taps or swipe gestures:
  86. Pointers: Hand Alternatively, you can use these pointers if the mockup behind the pointer needs to be visible:
  87. Pointers: Arrow You can use these pointers to indicate clicks:

  88. Backgrounds

    For desktop, tablet and phone designs
  89. Use this background to create apps for tablets and desktop designs
  90. Use this background for phone designs

  91. On-Screen Keyboards

    For tablet and phone designs
  92. 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. Keyboard (input, numeric) for tablets  1 2 3 4 5 6 7 8 9 0 ` | { } % ^ * / ´ return #+= undo $ & ~ # = + . #+= ABC  ! ?
  94. Keyboard (input, additional characters) for tablets  [ ] { } ‹ › ^ * ” , \ | / < > $ £ ¥ • return 123 redo € & ~ # = + . 123 ABC  ! ?
  95. 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. Keyboard (search, numeric) for tablets  1 2 3 4 5 6 7 8 9 0 - / : ; ( ) € & @ search #+= undo . , ? ! ´ ” #+= ABC  ABC
  97. Keyboard (search, additional characters) for tablets  [ ] { } # % ^ * + = _ \ | ~ < > $ £ ¥ search 123 redo . , ? ! ´ ” 123 ABC  ABC
  98. Keyboard (input) for phones Alphabetic Numeric Q W E R T Y U I O P 1 2 3 4 5 6 7 8 9 0 A S D F G H J K L - / : ; ( ) $ & @ ”  Z X C V B N M #+= .?123 return ABC return . , ? ! ´
  99. Keyboard (input) for phones Additional Characters [ ] { } # % ^ * + = _ \ | ~ < > € £ ¥ • . , ? ! 123 ´ ABC return
More Related