Page 1
HowtheUniversityofMississippiImprovedUserExperienceinSAPPortalApplications
usingCurrentWebTechniques
TheUniversityofMississippiChrisReichley,DirectorofApplicationDevelopmentandIntegration
ErrolSayre,SoftwareDeveloperIV
HERUG2016SessionU-2
Page 2
polls.olemiss.edu/14Takeabriefsurveyforus.
Page 3
ImprovingUXatUM
• Manydisparatetechnologies• TomcatJSP,WebDynpro ABAP,LAMP,EPP,BSP
• Manydisparatedevices• Students,Faculty,Staffalluseavarietyofdesktops,laptops,tablets,andphones• 19KstudentsatOxfordcampus• 4Kfaculty/staff• 33KWiFi devices;27Karephones/tablets
Page 4
Desktop70%
Mobile26%
Tablet4%
UMWebsiteVisitors
Page 5
Whatisresponsivedesign/UX
• Applicationthatseamlesslyscales/adaptstovaryingscreensizes• StandardHTML+CSStechniques• CSSmediaqueries• Allclient-side
Page 6
Responsivepagedesign
• Desktopfirst• “Gracefuldegradation”• Adapttomobilesizes/factors• Hides/moves/removesfunctionalityonmobile
• Mobilefirst• “Progressiveenhancement”• Inherentlymobilefriendly• EitheraddsfunctionalityondesktoporlivesatLowestCommonDenominator
• Per-projectbutourdefaultis“Desktopfirst”
Page 7
API-firstdevelopment
• BuildandtestAPI• Follow-upwithappsforvariousplatforms(web,iOS,etc.)• SAPFiori method(Gatewayservice=>UI)• UMin-housemethod“BSP+JSON”
Page 8
UM’sBSP+JSONmethod
• buildcontrollertoprovideinterfacetoanRFC,FM,etc.• SimilartoGateway,butprovidessupportformultiplepayloads
• buildappasHTML+JavaScript toconsumethatoutput• SimilartoUI5butbasedonsemanticHTML+standardizedUMCSS
Page 9
UMCommon
• Centralizedrepositorylikegstatic.com• Sharedcache-pointforCSS,jQuery,HighCharts,DataTables,SweetAlert,etc.
• Styleinventory• Helpsdevelopersmakeuseofcommonmotifs,elements• Upgradesstandard,semanticHTMLtoUMlook&feel
• UMTemplater• StandardscriptincludedinallappstobootstrapCSSetc.• StandardizesemergencynotificationsacrossentireUMsite• Bridgesthegapforoldappstonewdesign• Adaptsforin-portal(EP)ordirect-accessapps(e.g.BSP)
Page 10
UMTemplater ExampleAdmissionsselectionschange(year,term,major,campus)• in-portal,popped-outminimal,popped-outfulltheme
Page 15
attedance.olemiss.eduExampleofGatewayJSONAjaxPHPappwithHighCharts
Page 20
CourseFavoritesandBookingsExampleofBSP+JSONAjaxPortalappwithUMTemplater andHighCharts
Page 22
StudentActivityReportExampleofBSP+JSONAjaxPortalappwithDataTables
Page 26
SAPObjectRelationshipGraphBSPapplicationreadingHRP1001withGraphViz JS
Page 28
catalog.olemiss.eduExampleofPHPappintegratedwithSAPdataviaBSP+JSONandGatewayservices
Page 29
UMCatalog
• SAPdata+LAMPdisplayapplication• SystemintegrationusingBSP+JSONandGateway
• BSP+JSON• ProvidesbetterperformancefordatacomingoutofRFCsdealingwithSAPSLcM AcademicStructure• SingleservicewithmultiplepayloadsfromRFCvsindividualGatewayserviceforeachtableintheRFC
• URLasUI• Considerinterfaceatthelowestlevel(theURL)• prettyURLs+multi-formatresponses• .htmlvs.json vs.md
Page 30
catalog.olemiss.eduExampleofPHPappintegratedwithSAPdataviaBSP+JSONandGatewayservices
Page 37
ContactChrisReichleyDirectorADI
[email protected]
ErrolSayreSoftwareDeveloperIV
[email protected]