Building SAP Fiori-like Uls with SAPUI5 Exercises / Solutions Thomas Marz, Frederic Berg, Bertram Ganz, Oliver Graeff / SAP AG DJ Adams / Bluefin Solutions January 2014 EyBullaing SAP Flore Wis with SAPUIS TABLE OF CONTENTS RELATED RESOURCES ence sete APPLIES T9.. SAPUIS PROJECT SOURCES... cen ‘SAP FIORLLIKE APPLICATION Ul. SAP FIORLLIKE APLICATION ARCHITECTURE ce ccnwenennrne ae EXERCISE 0 GETTING STARTED. EXERCISE 1 — RESOURCE MODEL coe snseenron EXERCISE 2— OBJECT CONTROL! * EXERCISE 3 — FORMATTER wsssursnesnnttintcutniiins rates BY EXERCISE 4- SEARCH ..... nn EXERCISE § — SPLIT APP & SHELL. cnnscnnnnrneenn EXERCISE 6 — ADDITIONAL DEVICE ADAPTATION... cocroneonmenmnennenn sentences 30 EXERCISE T- SUPPLIER TAB. Soke he EXERCISE £ — APPROVAL PROCESS coc .esesnrvsnreneennn EXERCISE 9 — LINE ITEM. EXERCISE 10 - GROUPING on ccceceser oneness octane ARELATED RESOURCES Building SAP Fiori-like Uts with SAPUIS * SCN Blog “Building SAP-Fior.ike Uls with SAPUIS in 10 exercises", Bertram Ganz, Jan 2014; teaser blog for this tutorial document with dawnload links ané corwmunity discussion ‘+ SCN Blog “Building SAP Fion-lke Uls with SAPUIS* by Du Adams, SAP Mentor, Oct 2093: links to screencasts that describe and showcase the Fion-lke SAPUIS application documented in this tutorial + YouTube video “SAPUISIFior - Exploration of an App" by Dy Adams, SAP Mentor + YouTube video “SAP CodeTalk SAPUIS & Fior Parts #1 ana #2 * by OJ Adams, SAP Mentor Ul development toolkit for HTMLS (SAPUI5) + SCN blog “Get to Know the Ul Development Toolkit for HTMLS (aks SAPUIS)', Bertram Ganz: Overview introduction to SAPUIS, links to related information at one place '* Ul development toolkit for HTMLS Developer Center on SCN + SAPUIS Demo Kit (Documentation, API-Reference. .)APPLIES TO ‘The exercises described in this document are based on the SAPUIS Runtime version 1.16.4 that is. ‘comprised in the following SAP platform releases: SAP NetWeaver AS ABAP 7.0/7 01/7 02:7 03/7 31: Ul add.on 4,0 for SAP NetWeaver SPS 06 SAP NetWeaver AS ABAP 7.40 SPS 6 SAP NetiVeaver AS Java 7.31 SPS 10 SAP HANA Platform SPS 07: SAP HANA Extended Application Services (SAP HANA XS) OpenUIS 1.18.7 (see httos/sap github iofopenuisi) Evaluation package for UI development toolkit for HTMLS 1.16.3 (available on UIS Dev Center on SCN) NOTE: You do not need any SAP backend to Dull and run the SAPUIS application samole described in this document, The Fiorske sample runs locally on a web server that is provided with the SAPUIS tools in Ecliose IDE. The application's business data is retrieved from a mock resource (via JSON mode!) so that no backend service is required. SAPUIS PROJECT SOURCES You can download all SAPUIS project sources that are described in this document on SCN here BuildingSAPFioridikeUlsWithSAPUIS Projects.zip ‘+ myFiori0: intial SAPUIS project you need as template to start exercise 0 + myFiorit-myFiori9: SAPUIS projects wih ‘incremental’ source code for exercises 1-9, + myFiori10: SAPUIS project with the final SAP Fiori-lke UIS application after completion of exercise 10. SAP FIORI-LIKE APPLICATION UI The User Interface of the final Fior-ke SAPUIS application described in this document looks like this: e seoacoas? 1822447 sree 12847), SS ees Zle soso 1168669 we oun seem astogy || — z SS sonmin gueye ae ee rosy) ase aaaBullding SAP Florislike Uls with SAPUIS acs Orter as Oe = ey 13224.47 sor 322447 ss nee sree SplitApp control to display master and detail seonnoosy 12493.73 oT ae views on same screen Jprorr wanaz | | “ous? hide/display ve se ee “detail view on eae i — mobile device * veces 400% SearchField control ObjectHeader = — with table filter logic control ObjectListitem control econer 18224.07 SS. IconTabBar control details ———O “$1eOEUR ie oman © 11666.69 Aséress en a 2002.94 adit rm rect ‘ ‘one 00 table grouping custom formatter verse | + 2) ColumnListitem controls | 0720 ==ememmmnnnhe noe | | inside table for product 20188829 SimpleForm control | footer button and popup dialog to trigger approval processBuilding SAP Florislike Uls with SAPUIS ‘SAP FIORI-LIKE APLICATION ARCHITECTURE Following the MVC design principle the Approve Sales Order application consists of the following main pieces: + Component,js: Acts as a root or component container of the whole application, Implements logic to create the application's root view (App view) and used mode! instances, ‘+ Views with related controllers: Apo. Master and Detail. Apo is our top-level view. containing the Master and Detail views. in the Apo view we use @ Spit4op control to contain the Master and Detail views via the App control's ‘pages’ aggregation, ‘+ Models: i78n for locale-cependant texts. JSON mocel with mock data (to be replaced with e.g. an OData ‘model in real applications, a device model for device specific data needed at runtime ‘App View & Controller Master View & Controller Detail View & Controller F a 1 1 1 Q 1322447 sooogcesy 1324.47 1249373 i Atfacts and package structure of the final SAP-Fiori like SAPUIS application, that we incrementally bull in the following 11 exercises, are displayed in this cisgram: stiagerswith SAPUIS ullding SAP Flortike EXERCISE 0 - GETTING STARTED Objective Set up the SAPUIS development environment: 41, Download and install the SAPUIS developer tools (Eclipse Java EE-based design time environment for the Ul Development Toolkit for HTMLS) from http=:tools nana ondemand comivsapui5 (via the SAP HANA Cloud 90 days tral license). Or follow SAP note 1763144 - UI development toolkit for HTMLS Eclipse Tools 1.6.4 that describes how to install the productive version of the SAPUIS developer tools. 2. Download the ZIP-tile containing all SAPUIS project sources that are need for this document: from SAP Community Network: BuildingSAPFiori-likeUlsWithSAPUIS Projects zip 3. Extract ZIP-fe to a local folder on your file system (in exercise step 8 on the inital SAPUIS project import this folder is named ), 4, Start your Eelipse IDE with the SAPUIS developer tools installed 5. Goto “Fi ">"New"->" Other...” to create a new SAPUIS Application.swith SAPUIS ullding SAP Flortike 6. Filter for Wizards including “UIS' and select “Application Project’. Click "Next" Om 7. Enter your project name MyFioriUIS, chose ‘mi ‘Create an Initial View? and click on Finish, WhspcsseeaBiNFiont] [Bowe] 8, Inanew Eclipse installation you might minimize the Eclipse Welcome page to see the Java EE perspective \with the Project Explorer that now contains the MyFioirUIS project. ‘9, Open the local folder where you extracted the SAPUIS projects in ZIP fie BuiloingSAPFior-ikeUIsWIthSAPUIS. Projects zip. 10.Open the folder “/myFiori0’, select (CTRL-A) and copy the contents (CTRL+ ohullding SAP Floritike Uls with SAPUIS ‘1 In Eclipse, select the folder ‘WebContent” of your SAPUIS Application project and paste the sample fles (CTRLV). Confirm with “Yes to All Re rrectegioes 1 © indecent: Bale ipocrre wm: > PWS Web Svies oe Neeta Netpgutin xn: compatthle” cotonte'temedge"> : ‘Select node WebContent and paste SAPUIS fies tom cipboard wth shoncut CTRL + V Terie <1" only toad the ncblde 14B “sap a" and the “sap mvt th “The imported SAPUI5 sources from the initial application template "My Fiot! 0 are displayed in the Project Explorer under node MyFioriUIS > Web Content Braco = OB e 4B Monts PB IRONS Wed Sevier » Ba DepeyrerDesenptor Mion © 8B inn Rescer ih eae source Oy nega Rens . cucrigt the"sap-ut-bootstrop . cscrige, erste ihe © Seoay cassensoputtody” tde"content> Soe cima 12. Right-click on the project node IMyFioirUIS and select context menu item "Run As”>"Web App Preview”.Bullaing SAP Floritike Uls with SAPUIS ‘Bow emote See vem | teas . ey inde WS ARanonsenes ASSN Ta + Ba Dita AKA | omer i > IE Savesgpteien aA Aen nc ia. yp a Prin oi 15. The application will be started andthe preview will appear in eclipse. Copy the application URL to the clipboard (Ctrl+C). Uraee® cele von re —— asterPage 300000097,ullding SAP Floritike Uls with SAPUIS 15. Press F412 to start the Chrome Developer Tools > CE localhost si088/ny Firs jincexte 300000004 300000005 evens Secuce ewe Seuee|Frdre Heise Cone oocm] Cnet Sapp +O abso Ser Pee i commen Ft rete open ae 16. Click on the settings button in the bottom right comer. —— 4. Ebi] wa mage > 50 btpors 2 Sete So oO 17. Under “Settings > General” chose the option “Disable cache (while the DevTools is open)” Settings General TW Onc cache hie DevFooh nope Tce ina Appearance ements IF Spt pant vray mtn ceed ght « i searenin content sens G traie sewer maps Bi Erbe CSS souce mers Bh Aatertne gered C55 Deindtinsertsbon Aspsces — [S]ullding SAP Floritike Uls with SAPUIS 18. Under Settings > Overrides: Mark check box "Enable". Set the User Agent to “iPhone 5°, set the Deviee metres to 320x480 and enable “Emulate touch events’ Close the "Settings" popup. Settings Overrides J ease 1 Ente ith te Fer ies natin Tarlgen Phone 085 [=] Mess (ene 20 7 D Tareas 18 Open the tab "Sources”, Press CTRL-O and enter ‘Master’ in the search field. Now the file “Master.controller,js”is selected and you press the Enter key. inne ace lta Twine Stee fies Cone ounces Contig, Sees Olah TEISyFOtB duces Dee marae AiConponet Oran eaa0s M/F Lor resources/s/w/Iibrory-eeiond Joan Bindesind farserte 2 a0 20. Set a breakpoint in line 4 by clicking an the line number untl itis highlighted in blue. Notice the listing of the breakpoint in the right panel. 1778 sonrcemanteptocebes aay iris vLewhascer controier Ss 12ullding SAP Floritike Uls with SAPUIS 21. Now elick on a line item in the running application, This causes the application to stop at the breakpoint. “Beverts Pewee avon [Seat Tvre Peer aute_Coate Terr Ger Sppets_ 5 [Meneses + Obotenene rear Seamer ‘Given Diopaortates pater + ot wpdceeBeretiinbiert eosenet Metacenoogs (wenn) seem A corps irrrnntince) bowen Sinn Iwamymeantncen) renee Collapse the pane! “Call Stack" and open “Scope Variables’. Investigate the event param ‘ight panel, With this you can understand the current state at runtime. 2 ‘ere nso Tense [Saute] ners oem Aa Cone 892) 0 teekcuwest 23. Click on the "Play" button (olue) to resume the anplication execution. Paused aw +¢ alwith SAF ullding SAP Flortike 24. The application now displays the DetailPage € ~DetailPage~ 300000097 1322447 2013-05-22722-00-00 EPM USER NOTE: Keep the Google Chrome browser open during all exercises, Test the results of your exercise procedures by reloading the My Fiori 0 page vie ‘Reload’ toolbar icon © or via keyboard shortcut FS: NOTE: Keep the preview in Eclipse open throughout tne session. If you close the preview you cannot test the application in Chrome anymore. if you have closed the preview you need fo reopen it one more time and COPY & PASTE THE NEW URL to the Chrame browser again, TREN ose ~~ 0 |e; . ois _—= ===] @ |B Doplcyrmert Descriptor MyFiceUtS — vasa ioe ean = — 14EXERCISE 1 - RESOURCE MODEL, Objective Sel proper ttes to master and detail pages by implementing a resource model (aka i18n model, /t8n stands {or internationalzation). Preview soonest seemener sonic: sweozscet soosenne: seemeose oor seems Before Aker: Description ‘What we're going to do in this exercise is to replace the hardcoded texts in the views with references to texts inva separate propertes fle. This is done via @ resource model, which is used as a wrapper for resource bundles and has a one-time binding mode, Once the texts are abstracted into separate files, they can then be ‘maintained, and translated, independently. ‘So we'll modify the Master and Detail views, and create the properties fle with the text contents, ‘Changes i18n/messageBundle properties (ADD NEW FOLDER i18n > ADD NEW FILE Formatter.js) + Create a new folder named *i18n’, ado new fle messageBundle.properties and put te above content there ‘+ Make sure the fle does NOT start with an empty line + Save the new message bundle fie with CTRL+8, ao Components ‘+ The message bundle is loaded with the help of a Resourcetfode! + The Resourcelifodel is made available as global model under the name “i18n* Trouletanien > Fonction) [ 11 create root view ver eview = sa id: "app", eattane type: “35") viewata : { component : this } view([ pul vamp mye Sore. VEEN. App". ye11 set date model on root view ‘var cfogal ~ mew s2p.ui.model.json,2S0Niodel(“wodel/ock.7s00") view, setHodel (oviosel) 11 done view/Master.view.xmt + This file & opened with the XML ecitor of Eclipse. Switch to the “Source” tab of the XML editor to change the souree code, + Switch the title to point to the “i48n° model and there to the text “MasterTitle” + Save the mocified Master.view.xmt file with keyboard shortcut CTRL#S. cunlrll ains=" sup. sndns=core="sap.ut.core” > ae view/Detail.view.xm! + Also adjust the tile ofthe detail view + Save the modified Detail.view.xml file with shortout CTRL+S. caren controllertianee"sop.vi.deno.ayF ior’. wiew. deta: wmine="so0.9" amine=rare. Sons CC: shentiaval fevoutton Google Chrome browser + Open the talready started) Google Chrome browser window and reload the index.htm! via toolbar icon © or keyboard shortcut FS.ullding SAP Floritike Uls with SAPUIS Fon US ieee + Component Concept: ips 'sapuSnetweaverondemand antigens ntl ‘+ Databinding: hos Js *Localzaton: os:sapu5.netwea ver onde mand convsdhi#docs/aude/I18Nin '* ResourceModel: https jIsapui5. netweaver.ondemand,com/sdki#docs/auide/ResourceModel.htmi 7ding SAP Fiori Uls with SAPUIS, EXERCISE 2 - OBJECT CONTROLS Objective ‘Make the Ul of the master list and the detail page more beautiful by using the SAPUIS controls, ‘Sap.m.ObjectListltem and sap.m.ObjectHeader. Preview souesos? sooner 322447 | Seseens sooecn01 1249873 omer ee ‘16689 sone a 1656123 oro sevrnnt 1251523 sore serie 260.03 serene 6146.49 Before: After: ¢ ‘Sales Order ¢ ‘Sales Order sorter reaue apisoszzrz2c000 1322447 ‘EPMUSER = , Before Aer: 181g SAP Florilike Uls with SAL Description In this exercise we will replace a couple of controls; one in the Master view and the other in the Detail view In the Master view. rather than the simple fit list item style presented by the StandardListitsm control that isin use currently. we'll resent the overview of the sales orders in a more readable ang useful way by using the ObjectLstiter control instead. In the Detail view, well make @ similar change, replacing the simple layout (currently afforded by the VBox centro) with a more readable display thanks to the OdjectHeader control Along the way welll add a few more properties from the data model, such as CurrencyCode, ‘Changes view/Master.view.xml + Replace the StandardListitem control with the more powerful ObjectListttem + Attbutes and statuses are defined by own objects, + Save the mosified Master. view.xml file with shortcut CTRL#S ree contrallertiane="s9p.uvi.dewo.ayF for’. wiewMaster™ sminee"sop. a amlnazrarre"sap.ai.core” > cage (iammasterritte)” > stews-"{/sotesardercol lect tons” > < eoreera> view/Detail.view.xml ‘© Replace the texts with the more beautiful ObjectHeader contol fwhich has almost the same API as the ObjectListitem control but uiizes the space in a different way) + Save the mosified Detall.view.xml fle with shortcut CTRL#S. caren cant ral Lertlane="sap.i.domo.ayBior’. view.botar amins="sup.9" mains icore="sap.ui.core” > see mm memes e ‘Sales Order e ‘Sales Order 300000097 13224.47 300000097 13224, AT sra00 ° pram a enivsen eouvsen aorsonzzt220000 rsonas Before: After: Description In this exercise we will introduce a couple of formatting functions and use them in the application. They are ‘custom functions so we put them in a module file ‘Formatter,s’ in a separate folder (in this case we've chosen the folder name ‘uti’). One of the functions uses an SAPUIS static class for date formatting so we specify that requirement (for sap.ui-core.format, DateFormat) before defining our functions. We then use the formatting functions in the Detail and Master views; in order to do this, we need to ‘require’ the new module in the respective controllers. To execute the formatting on the property paths from the data ‘model (such as ‘Created’ or ‘LifecycleStatus) we need a different binding syntax and for that we have to add a bindingSyntex parameter in the SAPUIS bootstrap. 21ullding SAP Flortike ‘Changes ‘118nimessageBundie properties + Add two new texts to the properties file that are used to display the status Devel TIL utiFormatters (ADD NEW FOLDER util > ADD NEW FILE Formatter.js) ‘+ This file contains functions to format dates. status text and status colors. rr ‘© Open the "index.htm!" with the HTML editor of eclisse by right clicking on the fle and chosing “Open ‘With > HTML Editor® + For the formatting we want to use the “complex” binding syntax of SAPUIS. This we enable in the bootstrap script tag “ 2dling SAP Flori.tike Uls with SAPUIS view/Detail view.xml ‘+ Use a complex binding with a formatter for the text fel. ‘+ Use a complex binding with a formatter for the text and state field (which controls the semantical color of the status text) [cores view controllertianse"s9p..ui.deno.ayr tort. view. derail” mins Lilies" finseopetarit shasdavtal tone" navuuttonPres: ‘ «(Pager j view/Detail.controlier js ‘+ Require the formatter file in the controller of the view Sap.ul controLler(" sap. ui.deno.syeLord slew Detats view/Master.view.xmt + Use a complex binding with a formatter for the text and state field (which controls the semantical color of the status text) 3° "Sop. ut demo. Ayr tort. view Master” senlns=" £99. amlnszcaree"sap.ui.core” «ist stews="{/sovesardercol tect ions” > cobjectt ist them runbar-"(crossisount)~ runberunit-"{Currencycode}” > attributes WebContent > view in the Project Exolorer (1). Click context menu "New > File”, enter file name Empty.view.xml in the ‘New File popup dialog (2) and press Finish 7dling SAP Flori.tike Uls with SAPUIS orm... | ferent 2D wacneet = sa = tie a one ue Femme Eapoaionat | " a aa em) ® ie view/hpp view je ‘+ Load the empty view instead of the detail view Sap.ul Jsvien("s2p-U1.ceno.yFtord. Knopf pelontrollertiane: function () ( return “sop.ul-deno.ayior vie. agp" ereatecontent: function (ocontreller) { {1 0 avoid scrol hars on desktop the root view must he sot ta hlack display ‘this sotnisplayklock(true); Hereste y 283.299 ~ ReSSREEAESBLENSIOS 17 rood the master pag for master = sapeatvapivien("Rester”, “sup.atadem-ayeiurd.oiee.nestee")5 ester-gettontroiler().nav = this.getcontredier(); ‘this.app.addPage(nester, true); index.htm! ‘+ Wrap the split app in a shell control using the tite defined before. © Why in the index.html? This is done outside of the component because if you would plug & component in the SAP Fiori Launchpad this already renders the shell “ + Inthe Chrome Dev Tools, remove flags for User Agent and Device Metrics overt. This will sisplay the SpltApp contro. soputgody” 1d-“content”> Settings Overrides 1 Finnie > Further Reading:EXERCISE 6 - ADDITIONAL DEVICE ADAPTATION ‘Objective ‘Adapt the controls to phoneitabletidesktop devices: ‘+ Show the back button in the detail page only on the phone. ‘+ Swileh the list to selection mode on the tablet and desktop. — Bete Sales Orders e ‘Sales Order ot Q 300000097 300000097 13224.47 1300 Prone | cAMUSER : _ ois.0528 300000001 12493.73 soe ew After a a Sales Order seereh Q ; 300000097 ae 13224.47 eur fp 1113.00 11119,00 InProcess f} cPu user _ J) 20130523 oe 12493.73 eu 10496.9¢ New Description Ifthe user can see both the master and detail section of the Spit4pp al the same time because, say, they're using @ tablet, there's not much point in showing a back button on the detail section — i's only really relevant ‘on smaller screen sizes where either one or the other section is visible. So we will set the visibility of the back button (referred to as the navigation button’ in the contral} to be device dependent Also, depending on the device, we will set cifferent ist and item selection modes. Notice that we do the device ‘determination up front when the application starts {in Components} setting the results of the determination in ‘a one-way bound named data model, data from which can then be used in property path bindings in the Detsi! and Master views, 30ldlng SAP Flori.tike Ule with SAPI Changes ‘Components * Seta global model named "device" + SetisPhone, listMode and listitemType with the help of the “device API’. ran, wyFiort tamnanen® )p fcextend(“sap.uidemp.ayFinri.comonent™, ( Function) { A done return oviews Ds view/Detail.viewxm! ‘+ Bind the showNavButton property to the device model “ceoresview control Lertiane="sop.ul, demo yt Lor saulns="sop." mlns:core="sap.ut.core” > + Implement the select event inthe view's controller JQuery sap roquire( sap, aT dowo wyFIOPT uTTT. Format Ter )p sap.ui control Ten("eap.ui dens umyrioni view Master", handlet istttemPress : funetion (rut) var conilext — evt.gelsource() ge! indingcontexl ()3 nMBuilding SAP Florislike Uls with SAPUIS This novslol ela handlesearch : function (ert) contents 2ding SAP. like Uls with SAPUIS EXERCISE 7 - SUPPLIER TAB Objective ‘Add an info tab to the detail page that shows a litle form with data of the bu: sss partner of the sales order. Preview Sales Order Sales Order 300000097 1324.47 300000097 1324.47 sns13.00 Process 1113.00 nProcess cruiser ° Address sAPAG ony Walser, 69190 Onna Hore-ee Before After: Description In this exercise we will enhance the display of the sales order deta view with a section showing the supplier name and address. In the Detail view, we'll use an leonTabBar control to introduce the information visually, and a SimpleForm control to display the information. The SimpleForm control is from the sap.ui./ayout library, so we need to add this to the SAPUIS bootstrap in the index.htm! too. Changes index.html '* Load the additional Ul library “sap.ul.layout” “ToocTvPe ftml>