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