How the University of Mississippi Improved User Experience...
Transcript of How the University of Mississippi Improved User Experience...
HowtheUniversityofMississippiImprovedUserExperienceinSAPPortalApplications
usingCurrentWebTechniques
TheUniversityofMississippiChrisReichley,DirectorofApplicationDevelopmentandIntegration
ErrolSayre,SoftwareDeveloperIV
HERUG2016SessionU-2
polls.olemiss.edu/14Takeabriefsurveyforus.
ImprovingUXatUM
• Manydisparatetechnologies• TomcatJSP,WebDynpro ABAP,LAMP,EPP,BSP
• Manydisparatedevices• Students,Faculty,Staffalluseavarietyofdesktops,laptops,tablets,andphones• 19KstudentsatOxfordcampus• 4Kfaculty/staff• 33KWiFi devices;27Karephones/tablets
Desktop70%
Mobile26%
Tablet4%
UMWebsiteVisitors
Whatisresponsivedesign/UX
• Applicationthatseamlesslyscales/adaptstovaryingscreensizes• StandardHTML+CSStechniques• CSSmediaqueries• Allclient-side
Responsivepagedesign
• Desktopfirst• “Gracefuldegradation”• Adapttomobilesizes/factors• Hides/moves/removesfunctionalityonmobile
• Mobilefirst• “Progressiveenhancement”• Inherentlymobilefriendly• EitheraddsfunctionalityondesktoporlivesatLowestCommonDenominator
• Per-projectbutourdefaultis“Desktopfirst”
API-firstdevelopment
• BuildandtestAPI• Follow-upwithappsforvariousplatforms(web,iOS,etc.)• SAPFiori method(Gatewayservice=>UI)• UMin-housemethod“BSP+JSON”
UM’sBSP+JSONmethod
• buildcontrollertoprovideinterfacetoanRFC,FM,etc.• SimilartoGateway,butprovidessupportformultiplepayloads
• buildappasHTML+JavaScript toconsumethatoutput• SimilartoUI5butbasedonsemanticHTML+standardizedUMCSS
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)
UMTemplater ExampleAdmissionsselectionschange(year,term,major,campus)• in-portal,popped-outminimal,popped-outfulltheme
attedance.olemiss.eduExampleofGatewayJSONAjaxPHPappwithHighCharts
CourseFavoritesandBookingsExampleofBSP+JSONAjaxPortalappwithUMTemplater andHighCharts
StudentActivityReportExampleofBSP+JSONAjaxPortalappwithDataTables
SAPObjectRelationshipGraphBSPapplicationreadingHRP1001withGraphViz JS
catalog.olemiss.eduExampleofPHPappintegratedwithSAPdataviaBSP+JSONandGatewayservices
UMCatalog
• SAPdata+LAMPdisplayapplication• SystemintegrationusingBSP+JSONandGateway
• BSP+JSON• ProvidesbetterperformancefordatacomingoutofRFCsdealingwithSAPSLcM AcademicStructure• SingleservicewithmultiplepayloadsfromRFCvsindividualGatewayserviceforeachtableintheRFC
• URLasUI• Considerinterfaceatthelowestlevel(theURL)• prettyURLs+multi-formatresponses• .htmlvs.json vs.md
catalog.olemiss.eduExampleofPHPappintegratedwithSAPdataviaBSP+JSONandGatewayservices