Prototyping Kit SAP Fiori.

Name: Prototyping Kit SAP Fiori.
Uploaded: 2017-06-29T01:44:23+00:00
Duration: PTH1M10S1
Channel: Sky Walburn
Description: Prototyping Kit SAP Fiori.

Prototyping Kit SAP Fiori

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 List Master/Detail

  User Name  Name 4 1.99 USD Last week 100 Items Name 3 6,450.00 6 days ago 10 Items Name 1 100 Mio Today 1 Item  Search  Requests (42) Request  Name 5 84 Items Name 2 3,762,199.90 1 day ago 3 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, USD Item 2 15 250, USD 3,750, USD Item 3 199,90 USD 3   Name1

With Letter Boxing   User Name  Name 4 1.99 USD Last week 100 Items Name 3 6,450.00 6 days ago 10 Items Name 1 100 Mio Today 1 Item  Search  Requests (42) Request  Name 5 84 Items Name 2 3,762,199.90 1 day ago 3 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, USD Item 2 15 250, USD 3,750, USD Item 3 199,90 USD 3   Name2

Work List Full Screen

      Application Title  User Name  Status Customer
Company Code Open  ACME  Customer 1   Reset Search Items (223) Customer Description Status Company Code Offset Account Customer 1 Open 660200 700000 2 Accounts 550000

Store List         Stores User Name  Company (All)
Store (All) City (All) Store List Stores Name Address Details Department Store A Company XX 100 Some Street City 1 2 Buildings 560 Shops Department Store B Company XX 998 Some Street City 1 1 Building 254 Shops   Department Store C Company YY 1001 Some Street City 2 3 Buildings 780 Shops  Department Store D Company YY 60 Some Street City 3 2 Buildings 400 Shops  Department Store E Company ZZ 88 Some Street City 3 2 Buildings 360 Shops 

List Reporting Filtered List Report

Variant Name       Application Title  User Name  Status
 Status Customer Company Code Open  ACME  Customer 1   Reset Search Items (223) Customer Description Status Company Code Offset Account Customer 1 Open 660200 700000 2 Accounts 550000

List Reporting Categorized List Report

       Application Title User Name  12 31 45 45 Open
In Progress Sent Completed Open (12) Customer Description Status Company Code Offset Account Customer 1 Open 660200 700000 2 Accounts 550000

Object Pages Object View

2 821,06  Invoice 90035638 3K   3K 3K          90035638
User Name   Contacts(5) Contact Search   Invoice 2 821,06 Invoice EUR 3K Bill To: Name1 Some Street 36,City 2,13467, Country 2 Unpaid Invoice Date: EUR PO SO 38089 Due on Unpaid   Invoice Purchase Order: Sales Order: Ref. Invoice: Payment Terms: Carrier: Incoterms: 38089 Customer Invoices Unlimited Some Express Shipping CPT sss 3K EUR PO SO 38084 Due on Unpaid Invoice Items (1) 3K EUR Description Quantity Unit Price Subtotal PO SO 38071 Due on Unpaid Laptop 1 HT-1010 2 431, 95 EUR 2 431, 95 EUR  A    

Create Forms Create Form

Communication Information
   User Name   Contacts(5) New Contact Search  Personal Information A J L P Name 1 Company 3 Name 2 Company 4 Name 3 Company 5 Name 4 Company 6 Name 5 First Name: * Last Name: Job Title: Department: * Company: Communication Information Telephone: Telephone Extension: Mobile Phone: Fax: Fax Extension:  Save Cancel    

Create Forms Multi-Step Create Form

         Delivery Schedules  User Name  Cart Customer:
Requested Delivery: 06/19/214  Items (1) Description Product No. Requested Quantity Requested Delivery  Notebook Professional 15 HT-1010 3 Item 06/19/214    Checkout  

Analytics Smart Business

348.2 M Forecast in 7 Days (USD) 18,385 M       User Name 
Liquidity Forecast 18,385 M Forecast in 7 Days (USD) Subheader USD Gross Revenue Global – Year to Date 348.2 M USD, Actual Culmulative Totals Expenses (M EUR) Actual and Target 125 75 This is the Headline This is the Subheadline June 1 0 M 80 M June 30 USD Cash Flow by Location  -200M -100M -50M 50M 100M 150M 200M Asia -94M 117M Australia -34M 42M -172M 193M Europe Inflow in Display Currency Outflow in Display Currency  Open in

Financial Close Progress
   User Name    Financial Close Progress All Closing Phase All Closing Milestone All Status of Closing Task All Closing Template All Closing Task is Delayed Completion Rate Month-End Company Name By Region  100 80 60 40 20 120 Region 1 24 Region 2 50 8 18 Region 3 15 89 12  Open in

348.2 M Forecast in 7 Days (USD) 18,385 M       User Name 
Liquidity Forecast 18,385 M Forecast in 7 Days (USD) Subheader USD Gross Revenue Global – Year to Date 348.2 M USD, Actual Culmulative Totals Expenses (M EUR) Actual and Target 125 75 This is the Headline This is the Subheadline June 1 0 M 80 M June 30 USD Forecast by Date  2.0 B 1.0 B -3.0 B -1.0 B -2.0 B 3.0 B .3B -.5B -1B .9B -.8B 1.5B 2.6B 1B .7B 1.4B 2.4B 1.6B Net Cash Flow Balance  Open in

348.2 M Unused Contracts 84.585.546,7       User Name 
Gross Revenue Global – Year to Date 348.2 M USD, Actual Culmulative Totals Expenses (M EUR) Actual and Target 125 75 Comparative Annual Totals USD, By Region Country 1 234 M Country 2 97 M Country 3 197 M By Supplier  3.5 3 2.5 2 1.5 1 No. of Pur. Contr. Older than Specfd No. of Days  Open in

348.2 M Unused Contracts 84.585.546,7       User Name 
Gross Revenue Global – Year to Date 348.2 M USD, Actual Culmulative Totals Expenses (M EUR) Actual and Target 125 75 Comparative Annual Totals USD, By Region Country 1 234 M Country 2 97 M Country 3 197 M By Supplier  50M 100M 200M 150M 250M 201302 201303 201304 201305 Current Account Notice Deposit Other Short Term Investment 75M 170M 125M 175M 225M Amount in Display Currency  Open in

Processing Process App

Order from Requisitions
  User Name   Order from Requisitions  50  43  19  23    Approved PRs Assigned PRs Simulated POs Created POs Pricing Details  Approved PRs PR Item Description Release Date Delivery Value 95.00 USD Lorem ipsum dolor sit amet 01/01/14 12/31/14 66.50 USD Lorem ipsum dolor sit amet 01/01/14 12/31/14 99.00 USD Lorem ipsum dolor sit amet 01/01/14 12/31/14 01/01/14 12/31/14 66.50 USD Lorem ipsum dolor sit amet 66.50 USD 01/01/14 12/31/14 Lorem ipsum dolor sit amet 66.50 USD 01/01/14 12/31/14 Lorem ipsum dolor sit amet Assign Supplier 

Patterns & Components

   User Name  My Home Net Order Value is at 21,5 v % Relative Imporvement Comparative Annual Totals USD, By Region Country 1 234 M Country 2 97 M Country 3 197 M Approve Travel Request 1 Request  48.2 M Gross Revenue Global – Year to Date USD, Actual  48.2 M Gross Revenue under Target Global – Year to Date USD, Absolute Deviation  SAP Unveils Powerful New Player Comparison Tool Exclusively on SAP.com SAP News December 06, 2013 45.2 M This is the Headline This is the Subheadline This is the value definition  Fiori Launchpad This is the Headline This is the Subheadline USD  June 1 0 M 80 M June 30 Culmulative Totals Expenses USD, Actual and Target 125 M 75 M This is value definition This is the Headline Still Headline Subheadline I am a short title ! 0 Days running without b… This shows a StaticTile wit… 

BusyIndicator  3     Approve Reject Request  Control Example

Button Content Header Footer Content Pressed Default Action
    Action1 Action2  Content Pressed Default Action (First and most frequently used action in footer) Approve / Reject     Action1 Action2  Action1 Action1 Approve Approve Reject Reject

Checkbox Enabled Disabled  Option 1  Option 1  Option 2  Option 2

Container can be filled with any content
Dialog Lorem ipsum Dolor Sit Container can be filled with any content Quick Entry OK Cancel Lorem ipsum dolor sit amet? Add note 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.

FileUploader

  User Name   Requests (42) Request   Search Name1 3,762,199.90 USD 1 day ago Name 1 100 Mio USD Today 1 Item   3  5 Name 2 3,762,199.90 USD 1 day ago 3 Items Attachments (5)   SomeTextFile.txt by Marty McFly   Name 3 6,450.00 USD 6 days ago 10 Items  SomeWordDocumentWithRatherLongTitle.doc by Marty McFly   Name 4 1.99 USD Last week 100 Items Photo_of_my_TIMEMACHINE.jpg by Emmett Brown   Blue-Prints_for_Flux-Capacitor.jpg by Emmett Brown   Name 5 USD Last week 84 Items  Shopping-list_Parts-you-need-for-a-time-machine.xls by Emmett Brown   

FilterBar

Variant Name       Application Title  User Name  Status
 Status Customer Company Code Open  ACME  Customer 1   Reset Search Items (223) Customer Description Status Company Code Offset Account Customer 1 Open 660200 700000 2 Accounts 550000

FacetFilter

Table or chart or other content
 Request    Suppliers (All) Items (All) All Business Partners (All) Orders (All) Variant Name 10 Items  Table or chart or other content Suggest solution 

 Request    Suppliers (All) Items (All) All Business Partners (All) Orders (All)  Search Search  Variant Name 10 Items   All Orders All Table or chart or other content Order 1 Order 2 Order 3 Order 4 Suggest solution 

 Request  Filtered by Order (Order 2, Order 3, Order 4)  Variant Name 10 Items  Table or chart or other content Suggest solution 

Contextual Filter  Filtered by: variant 1 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  Filtered by: Variant 2

Phone 100 Mio 3,762,199.90 6,450.00 1.99      Name 1 Name 2
Sales Orders (42)   Select Customer  Filtered by: Variant 2  Search Name 1 100 Mio USD Today 1 Item Customer 1 (500098) Department: Sales Name 2 3,762,199.90 USD 1 day ago 3 Items Lorem Ipsum Customer 2 (300973) Department: Sales Name 3 6,450.00 USD 6 days ago 10 Items Customer 3 (300700) Department: Sales Name 4 1.99 USD Last week 100 Items Customer 4 (Name 1) (509999) Department: Sales  Approve Reject

SimpleForm  Label 000 Qoutation Details Some Example Form
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 Some Example Form Label 001: Label 002 / Lable 003. : Label 004 / Label 005: Label 006: :  abcdefghijklmno abcdefghojkl 12345 123456 abcdefghijklm Lorem Ipsum Label 000 Purchase Order: Valid Form: ZIP Code/City: 09/06/2014 12:00 1000 EUR Qoutation Details

FeedListItem Firstname Lastname: Hi Boss,
my wife will be on sabbatical in the month of December and we have 5 kids. Best Firstname 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 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

FeedListItem 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 Firstname2 Lastname2: This FeedListItem comes without an image and has a very long info text 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

 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 you press this item) Nov 01, 2012

MessageToast 100 Mio 3,762,199.90 6,450.00 1.99 Control Example   
Name4 1.99 USD Last week 100 Items Name 3 6,450.00 6 days ago 10 Items Name 2 3,762,199.90 1 day ago 3 Items Name 1 100 Mio Today 1 Item  Search On behalf of Marty McFox Requests (42)  Your request has been approved  Control Example Your request has been approved

ObjectHeader Name2 3,762,199.90 USD 1 day ago The following slides show multiple examples and variations of the ObjectHeader control….

ObjectHeader 3.624 999.999.123.624,00 Example Object Header Text
Forwarded by Name2 First Attribute Second Attribute Positive Text 3.624 Euro Status Info Added by Name3 Negative Text About Something That Is Extremely Negative ,00 Euro Example Object Header Text That Is Rather Long – It Is Even So Long That It has to Wrap Twice

ObjectHeader 3.624 3.624 Example Object Header Text
First Attribute Positive Text 3.624 Euro Status Info Second Attribute with a very long descriptive text that will wrap around because it is sooo long Example Object Header Text First Attribute Positive Text 3.624 Euro Status Info

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 ,00 Euro

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 ,00 Euro Example Object Header Text That Is Rather Long That It has to Wrap Once

Bar     Footer [Tablet/Desktop]
Footer [Tablet/Desktop with default action] Footer [Phone] Footer [Phone with default action]  Approve Reject  Cancel Save  Approve Reject  Cancel Save

 Popover Quick Overview  Contact Details Contact Details Company
Action 1 Action 2 Employee Profile Firstname LastName Sales Assistant Contact Details Mobile: Work: Company Name: Company A Address: 8716 Street, Country Open in Jam  Hiro Protagonist Senior Deliverator Contact Details Mobile: Work:  Company Name: Company Name Send

Popover Example without icon Contact Details Company Contact Details
Quick Overview Person Firstname Lastname Senior Deliverator Contact Details Mobile: Work: Company Name: Company B Quick Overview Company Company B Department C Contact Details Phone: Address: Some street 3 City Main Contact Name: Fistname Name Mobile: Quick Overview Generic Company B Department C Mobile: Phone: Company Name: This is a status info and can have semantic colors Send

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 0.99GB of 1TB 25% 25% 50% 50%

RadioButton Enabled/disabled All disabled Option 1 Option 2 Option 3

RatingIndicator

SearchField Initial State Active/Typing Search complete     Search
Lorem Ips|   Lorem Ipsum 

SegmentedButton Content Header Footer       Action1

Select Used in Content Area Footer        Vacation Price
Leave 1/2 Day Sick Leave Educational Leave  Price Item Scheduling  

Value Help Dialog     Company 1 Company 2 Company 3 Company 4
Status  Status Com|  Company 1 Company 2 Company 3 Company 4 Status Company |  

  Select “Company”  Search  Advanced Search Company Code::
Currency Code:: Company Name:: Items (1234) Company Code Company Name City Currency Code Company A City 1 EUR Selected Items (1) Company A  Excluded Items (1) Company A  OK Cancel

ComboBox    Choose your country |Choose your country
Algeria Argentina Australia Austria Bahrain Belgium Bosnia Herzegovina Brazil Bulgaria Canada

Multi ComboBox       Choose your country |Choose your country
Croatia Cuba Czech Republic Denmark Egypt Estonia Finland France Germany Ghana |Choose your country Germany |   Croatia Cuba Czech Republic Denmark Egypt Estonia Finland France Germany Ghana  

Slider Enabled Disabled

Switch Enabled Disabled ON OFF ON OFF I O I O    

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.

Date picker  01/01/14  01/01/14  November  Sun Mon Tue Wed Thu Fri Sat 27 28 29 30 31 1 2 3 28 4 5 6 6 8 9 10 29 11 12 13 14 15 16 17 30 18 19 20 21 22 23 24 31 25 26 27 28 29 30 1 32 2 3 4 5 6 7 8

Sharing 100 Mio 3,762,199.90 6,450.00 1.99 Phone iPad & Desktop   
Lorem Ipsum  Phone iPad & Desktop  Search 100 Mio Tony Stark USD 1 Item Today 3,762,199.90 Emmett Brown USD Send open in <app type> Share in SAP Jam Save as Tile  3 Items On behalf of Marty McFly 1 day ago Send open in <app type> Share in SAP Jam Save as Tile   6,450.00 Bill Lumbergh   USD  10 Items 6 days ago 1.99 Milton Waddams  USD  Cancel 100 Items Last week

IconTabBar Container can be filled with any content
   Container can be filled with any content  1701    32 Container can be filled with any content

IconTabBar        The use of labels is optional. Please mind to either use labels for ALL or NONE of the tabs. Info Notes Approvals Attachments Lorem Ipsum Babies Doner Kebab Container can be filled with any content

IconTabBar 19 Container can be filled with any content
 Ordered 42 of 42   Shipped 19 of 42  Delivered 23 of 42 Container can be filled with any content  8  4  7 19 Products Type A Type B Type C Container can be filled with any content

IconTabBar Lorem Ipsum Dolor Sit Amet Consectetuer Container can be filled with any content

Phone 3,762,199.90 Name 1      Request TabContainer
USD 1 day ago On behalf of Name 2 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   TabContainer  ITEMS (3)

Input | Prompt Text Lorem ipsum Lorem ipsum | Lorem ipsum Error
Warning Success

Table       Pricing Details (3) Role Valid from Valid to
Project Price/ h   95.00 USD Senior Consultant 01/01/14 12/31/14   66.50 USD Junior Consultant 01/01/14 12/31/14   99.00 USD Project Manager 01/01/14 12/31/14

Phone  Customer Pricing Details Role Project Price/h 95.00
USD Senior Consultant Valid from: 01/01/14  Valid to: 12/31/14  66.50 USD Junior Consultant Valid from: 01/01/14  Valid to: 12/31/14  99.00 USD Senior Consultant

Analytical Table (ALV)- NOT RESPONSIVE
Items (1234)       Document No. Description PK Posting Date Offset Account Laptops Brand1 40 660200 HANA Servers 700000 Tablet 2 Accounts Printers 3D Printers 550000 Smartphone Chair Laptops

Timeline      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 3 completed a call. Today at 12:56 AM Called Name1 to discuss Lorem ipsum dolor sit amet, consectetuer adipiscing elit.  Name 2 added an invoice. Yesterday at 11:14 PM Invoice (421999) 199,00 USD 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.

Tokenizer Enabled Enabled Hover Enabled Selected     Token1 Token1
Field Text Token1  Token1  Token2 

Panel / Tray – Expand  Group1 Header Title  Group1 Header Title Lorem ipsum dolor sit amet, consectetuer adipiscing elit commodo ligula eget dolor. Aenean massa

Tree Table (Not Responsive)
Name Description  item1  Sub item1-1 Sub item1-1-1 Sub item1-1-2  Sub item1-2  item2

Backgrounds For 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

Prototyping Kit SAP Fiori.

Similar presentations

Presentation on theme: "Prototyping Kit SAP Fiori."— Presentation transcript:

Similar presentations

About project

Feedback

Log in

Auth with social network:

Prototyping Kit SAP Fiori.

Similar presentations

Presentation on theme: "Prototyping Kit SAP Fiori."— Presentation transcript:

Similar presentations

About project

Feedback