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

ContactChrisReichleyDirectorADI

reichley@olemiss.educhrisreichleychrisreichley

ErrolSayreSoftwareDeveloperIV

esayre@olemiss.eduErrolSayreerrolsayre