U55NW731BBConfigGuideENXX.docx

U55NW731BBConfigGuideENXX.docx

《U55NW731BBConfigGuideENXX.docx》由会员分享，可在线阅读，更多相关《U55NW731BBConfigGuideENXX.docx（32页珍藏版）》请在冰豆网上搜索。

U55NW731BBConfigGuideENXX

SAPNetWeaver7.31

July2014August2000August2000

EnglishEnglish

SAPFioriDesign

（U55）

SAPAG

Dietmar-Hopp-Allee16

69190Walldorf

Germany

BuildingBlockConfigurationGuide

Copyright

©2014SAPAGoranSAPaffiliatecompany.Allrightsreserved.

NopartofthispublicationmaybereproducedortransmittedinanyformorforanypurposewithouttheexpresspermissionofSAPAG.Theinformationcontainedhereinmaybechangedwithoutpriornotice.

SomesoftwareproductsmarketedbySAPAGanditsdistributorscontainproprietarysoftwarecomponentsofothersoftwarevendors.

Nationalproductspecificationsmayvary.

ThesematerialsareprovidedbySAPAGanditsaffiliatedcompanies（"SAPGroup"）forinformationalpurposesonly,withoutrepresentationorwarrantyofanykind,andSAPGroupshallnotbeliableforerrorsoromissionswithrespecttothematerials.TheonlywarrantiesforSAPGroupproductsandservicesarethosethataresetforthintheexpresswarrantystatementsaccompanyingsuchproductsandservices,ifany.Nothinghereinshouldbeconstruedasconstitutinganadditionalwarranty.

SAPandotherSAPproductsandservicesmentionedhereinaswellastheirrespectivelogosaretrademarksorregisteredtrademarksofSAPAGinGermanyandothercountries.Pleaseseeforadditionaltrademarkinformationandnotices.

Icons

Icon

Meaning

Caution

Example

Note

Recommendation

Syntax

TypographicConventions

TypeStyle

Description

Exampletext

Wordsorcharactersthatappearonthescreen.Theseincludefieldnames,screentitles,pushbuttonsaswellasmenunames,pathsandoptions.

Cross-referencestootherdocumentation.

Exampletext

Emphasizedwordsorphrasesinbodytext,titlesofgraphicsandtables.

EXAMPLETEXT

Namesofelementsinthesystem.Theseincludereportnames,programnames,transactioncodes,tablenames,andindividualkeywordsofaprogramminglanguage,whensurroundedbybodytext,forexample,SELECTandINCLUDE.

Exampletext

Screenoutput.Thisincludesfileanddirectorynamesandtheirpaths,messages,sourcecode,namesofvariablesandparametersaswellasnamesofinstallation,upgradeanddatabasetools.

EXAMPLETEXT

Keysonthekeyboard,forexample,functionkeys（suchasF2）ortheENTERkey.

Exampletext

Exactuserentry.Thesearewordsorcharactersthatyouenterinthesystemexactlyastheyappearinthedocumentation.

Variableuserentry.Pointedbracketsindicatethatyoureplacethesewordsandcharacterswithappropriateentries.

Content

Figures

SAPFioriDesign:

ConfigurationGuide

1Purpose

Thepurposeofthisdocumentistodescribethebestpracticesintheuserexperience（UX）accordingtoSAPFioridesign.Youcanusethesebestpracticestodesignanddevelopyourownuserinterfacesincorporatingthelook-and-feelofSAPFiori.Thisdocumentoutlinesthe

∙basicprinciplesoftheSAPFioriuserexperience;

∙frameworkfortheSAPFiorilayout;

∙layoutofselectedapptypesbasedupontheSAPFioriprinciples;

∙controlsandpatternsthatareusedintheseapptypes.

ThisdocumentisaimedequallyatUXdesignersaswellasdevelopersofuserinterfaces.

ForacompletechecklistofitemsrelevantforSAPFiorirefertotheconfigurationguideSAPFioriChecklist（buildingblockU58）.ThischecklistcanbeusedasareferencesourceduringUXdesignanddevelopmentandasaverificationtoolduringthesign-offprocess.

Thisdocumentconcentratesonusecasesfortransactionalapptypesthatcanberunusinganydatabase.ThismaybeonSAPNetWeaver7.31orSAPNetWeaver7.4（withanSAPHANAdatabaseoranotherdatabase）.ThisdocumentdoesnotprovideanyguidanceonusecasesthatspecificallyrequireanSAPHANAdatabase.

SAPFioriGuidelinesprovidescomprehensiveinformationfordesigninganddevelopingSAPFiori–designedapps.

2Preparation

Prerequisites

Beforeworkingwiththisdocument,youshouldbefamiliarwithtopicscoveredinprecedingbuildingblocks.TheprecedingbuildingblocksarelistedinthesectionSolutionOverviewoftheConfigurationGuidetoImplementingSAPFioriDesignRapid-DeploymentSolutionV2.

ThisguideprovidesbestpracticesfordesigninganddevelopinguserinterfacesaccordingtoSAPFioriprinciples.Assuchthisdocumentdoesnothavespecificpre-requisites.However,SAPFioriuserinterfacesarebuiltusingtheSAPUIDevelopmentToolkitforHTML5（alsoreferredtoasSAPUI5）.ThereforedevelopersshouldcertainlybefamiliarwiththeSAPUI5toolkit.ThisiscoveredintheconfigurationguideSAPUI5GeneralConfiguration（buildingblockU50）.ThisdocumentalsoincludeslinkstofurtherSAPUI5documentation.

TechnicaldocumentationforSAPUI5isavailableintheUIdevelopmenttoolkitforHTML5–DemoKit.

3SAPFioriDesign

Thefollowingsectionsprovidein-depthinformationonthefollowingtopics:

∙SAPFioriPrinciples

ThisdescribestheprinciplesthathavebeenidentifiedascentraltotheUXforSAPFioriandthatareincludedineveryuserinterfacethatisdevelopedaccordingtoSAPFiori.

∙AppFramework

ThisdescribesthesetofuserinterfacepatternsthathavebeenspecifiedforSAPFiori.ThesepatternsembodytheprinciplesfortheSAPFioriUXandcanbeusedasatemplatefordevelopingfurtheruserinterfaces.

∙ApplicationTypes

ThisdescribesselectedtypesofappsforSAPFioridesign,accordingtospecificusecases.

∙Controls

Thissectiondescribesselectedcontrolsthatarewithinthemostcommonlyusedapptypes.

∙Patterns

Thissectiondescribesselectedpatternsthatarewithinthemostcommonlyusedapptypes.

AdditionallytheAppendixprovidesdetailedinformationonspecificationsfortopicssuchastypography,colors,andicons.

SAPFioriPrinciples

PeopleCentricDesign

SAPFiori-designedappsarenotstructuredalongthetransactionsthatuserscarryout.Instead,theSAPFioriparadigmfocusesonpeopleandtheirgoalswhenusingtheapps.Thisrequiresaverydifferentapproachtodesign,whichisfullydescribedinFromTransactionstoApps.

FiveCorePrinciples

SAPFiorihasfivecoreprinciples.EachuserinterfacemustincludeallofthefollowingprinciplesinordertoberegardedasdesignedaccordingtoSAPFiori:

∙Role-based

∙Responsive

∙Simple

∙Coherent

∙Delightful

Figure1:

SAPFioriUXDesignPrinciples

FioriDesignPrinciplesillustratesthemainaspectsoftheseprinciples,whichareexplainedinmoredepthinthefollowingsections.

Role-based

Theuserinterfacescoverthemostfrequentlyusedactivitiesthatausercarriesout.Theuserinterfacesaredesignedtomatchhowpeoplework,ratherthanforcingpeopletochangethewaytheyworktofittheuserinterface.

Responsive

Theuserinterfaceisdesignedanddevelopedforaconsistentexperienceonmanydevices.

Aresponsiveuserinterfacecatersfor

∙Multipleformfactors,forsmartphone,tabletanddesktop;

∙Multipleinteractionstyles,fortouchorkeyboard;

∙Multipletechnologies,foriOS,Android,Windows,Mac,orPC;

Moreoverthisisachievedwithasinglecode-line.

Simple

Theuserinterfaceisfocusedonuserexperience.Thisismoreimportantthanincludingmultiplefeaturesandfunctions.

Asimpleuserinterfacecoversoneusecaseforoneuserwithamaximumofthreescreens.Thismakestheimportantaspectsofeachusecasereallyeasytolearnanduse.

Coverageofallormostofthetasksthatauserhastocarryoutisachievedbymanyuserinterfacesforindividualusecases,notonecomplicateduserinterfacethatattemptstocoverallfunctions.

Coherent

Userinterfacesprovidethesameuserexperienceacrossallusecases.Thisisachievedbyidentifyingbestpracticesandincorporatingtheseinalluserinterfaces.

Delightful

Userinterfacesofferlowbarrierstoadoption.Userinterfaceswhicharedelightfulare

∙Easytoadopt:

theuserinterfacescanberunonthereleaseswithlargestinstalledbasewithnoupgrade;

∙Easytoadapt:

theuserinterfacescanbethemed,personalized,andextended;

∙Easytodeploy:

theuserinterfacehasnofootprintandrequireslittleadministration;

∙Easytointroduce:

theuserinterfacerequiresnotraining;

∙Easytogrow:

theportfolioofuserinterfacescanbeaddedtobySAPandpartners.

AppFramework

ThedesignprinciplesforSAPFiorihavebeentakenbySAPtodeterminebestpracticesforuserinterfacelayoutfordifferenttypesofusecasesusingSAPFiori.SAPFiorihasasimpleuserinterfacehierarchy.Thelaunchpadistheentrypointfortheuser,providingentrypointstotheusertotheirprocesses.

Theuserinterfacesforonebusinessprocessarereferredtoasanapp.Alltheuser’sappsarepresentedintheformoftilesontheHomepage,whichformstheheartoftheLaunchpad.Mostapps’designsarebasedononeofthetwobasictemplates:

∙Master/Detail;

∙FullScreen.

InthecontextofthisdocumentthetermappreferstotheuserinterfaceandtherelatedsoftwaretoconductaspecificbusinessprocesswithinanSAPsystem.Theseappsaremulti-channel,thereforealthoughtheycanberunonasmartphoneortablet,thisshouldnotbeconfusedwithanappdedicatedtobedownloadedontoandusedonamobiledevice.

Withineachapptheremaybeoneormorescreens（accordingtothesimpleprinciple,amaximumofthreescreens）.Foreachpattern

∙thelayoutofeachscreen

and

∙thescreenorder

isdefinedaccordingtothebestpracticesforSAPFiori.

FullScreen

ThefullscreentemplateaffordsmaximumflexibilitywhilestillprovidingthelookandfeelofSAPFiori.

Thetemplateforthefullscreendoesnotpresentapre-definedhierarchyofcontentand