Sapui5 Codejam v2 (1)

7/25/2019 Sapui5 Codejam v2 (1)

1/24

!"# %&'()*+" #$%&'%() *+,-./ +00&%123%4(5 $5%() *+, 678.9:

!"#$%&"'"() +,- .") /&"" )&%01 0223$()

!"#$%&'($

Open up the SAP HANA Cloud Platform (HCP) website and register for the free, timely unrestricted SAP HANA

Cloud Platform trial account. To finalize the registration, you will have to active your account - which requires you to

access your emails.

*'+$ *, -,+./$&$ 0**-12 3 +'4

5&$.6Follow the instructions in this tutorial: http://go.sap.com/developer/tutorials/hcp-create-trial-account.html .

!"#$%&"'"() +4- 56"( 789 :";

!"#$%&'($

Open up the SAP Web IDE from the Subscriptions menus in the SAP HCP Cockpit. You are advised to bookmark

the SAP Web IDE given the fact that this will be the main tool for development efforts.

**-2 3 +'4

5&$.61. Open your HCP console (https://account.hanatrial.ondemand.com)

2. Click on the Servicestab.

3. Click on the SAP Web IDEbox.4. Click the "Open SAP Web IDE" link to open the Web IDE. (Bookmark this page, you will use it again.)

.

path as anticipated by this SAP CodeJam.

Suggestion: Download Chrome

Description

The Chrome browser, from Google, has deveoper tools that make it easy to build web pages. We will use the

Chrome tools in this tuturial.


2/24

!"# %&'()*+" #$%&'%() *+,-./ +00&%123%4(5 $5%() *+, 678.9:

>?"&2%@" A B ."("&0)" a new 6&3E"2)

!"#$%&'($

Use the SAP Web IDE to generate a new emptyproject.

**-2 78 9 73 +'4

5&$.61. Choose File --> New --> Project from Template

2. Choose SAP UI5 Application, then click Next

3. Name your project "First UI5 Project", and click Next

4. View type is XML, and view name is View 1, click Finish

:;$?@'4A2

; Folder Structure: https://sapui5.hana.ondemand.com/#docs/guide/003f755d46d34dd1bbce9ffe08c8d46a.html


3/24

!"# %&'()*+" #$%&'%() *+,-./ +00&%123%4(5 $5%() *+, 678.9:

>?"&2%@" , B 822"@@ 0 ("F D"@)%(0)%3(

!"#$%&'($

Our app will access a real OData service, the so called Northwind data-service. Therefore, a new

destination within the SAP HCP Cockpit will be created and the app descriptor of the generated project

will be updated.

**-2 3 9 78 +'4

B$6%


4/24

!"# %&'()*+" #$%&'%() *+,-./ +00&%123%4(5 $5%() *+, 678.9:

#)-D+#, "

#8E2, #(12.3).6*9&7.'&(*3'4&.F&(*3'4&G*9&7#0

#(&88)+H(#, "

#;3+97&I16, #J&77*K*'79.)-D+.)-D+#

C

C:

"" - .

"#$%$&'()*+"- "/$01&+)20*+"

?C

C

neo-app.json

; To ensure the app descriptor of SAPUI5 redirects the mainService url to the SAP HCP destination, your

project descriptor requires a new route definition

; Save your changes with Ctrl + S or by hitting the Save button

. . .

"

#218L#, #M8&(8N'&(*3'4&(#0

#81'H&8#, "

#8E2, #(&'%)4#+16, #(123):#0

#&+8'E>18L#, #M8&(8N'&(*3'4&(#

C0

#9&(4')28)*+#, #?@: 5&(8 F&(*3'4&(#

C:

.

"


5/24

!"# %&'()*+" #$%&'%() *+,-./ +00&%123%4(5 $5%() *+, 678.9:

:;$?@'4A2; SAP HCP Application Descriptor file (neo-app.json):

https://help.hana.ondemand.com/help/frameset.htm?aed1ffa3f3e741b3a4573c9e475aa2a4.html

; SAPUI5 Application Descriptor file (manifest.json):

https://sapui5.netweaver.ondemand.com/docs/guide/be0cf40f61184b358b5faedaec98b2da.html

; Chrome DevTools Overview: https://developer.chrome.com/devtools


6/24

!"# %&'()*+" #$%&'%() *+,-./ +00&%123%4(5 $5%() *+, 678.9:

>?"&2%@" 4 B 8DD 0 1%@) )3 )G" H%"F

!"#$%&'($

Display a list on the generated View1 and create a mock function for a press event in the associated

controller file. Press events will also get triggered when a user on a mobile device performs a tap on the

specific list element.

**-2 3 +'4

C


7/24

!"# %&'()*+" #$%&'%() *+,-./ +00&%123%4(5 $5%() *+, 678.9:

%;


8/24

!"# %&'()*+" #$%&'%() *+,-./ +00&%123%4(5 $5%() *+, 678.9:

>?"&2%@" I B >(0;1" &3$)%(C

!"#$%&'($

In order to enable navigating from one view to another, our app needs to be enabled for routing. With

the newest version of SAPUI5, routing configurations are stored within the app descriptor called

manifest.json.

**-2 78 E 73 +'4

B$6%


9/24

!"# %&'()*+" #$%&'%() *+,-./ +00&%123%4(5 $5%() *+, 678.9:

#6*9&7(#, "

. . .

C:

")'(%01@"- .

"*'1J0@"- .

")'(%+)SH$,,"- ",$


10/24

!"# %&'()*+" #$%&'%() *+,-./ +00&%123%4(5 $5%() *+, 678.9:

/01K60#%5- \`)+/N

?

9,$0$H'@ .

60#%5- \`)+/N

?

:;$?@'4A2

; Routing and Navigation:

https://sapui5.netweaver.ondemand.com/docs/guide/3d18f20bd2294228acb6910d8e8a5fb5.html


11/24

!"# %&'()*+" #$%&'%() *+,-./ +00&%123%4(5 $5%() *+, 678.9:

>?"&2%@" J B =%@610K 1%@) "1"'"() D")0%1@

!"#$%&'($

Display a detail view with additional information for selected list items. The detail view will be displayed

whenever a press event occurs (key-press or tap).

**-2 78 9 73 +'4

C'*9348I16&C# MW

QM`)(8W

QM4*+8&+8W

QM>1H&WQM4*'&,R)&SW

webapp/view/View1.controller.js


12/24

!"# %&'()*+" #$%&'%() *+,-./ +00&%123%4(5 $5%() *+, 678.9:

; Modify the handleListItemPress method to receive the ProductID of the selected list item

; Use the router method navTo with the selected ProductID to navigate to the Detail view through the appDetail

navigation target

; Save your changes with Ctrl + S or by hitting the Save button

(12.3).9&Z)+&[\

#(12M3)M4*'&M6%4M]*+8'*77&'#

O0 Z3+48)*+[]*+8'*77&'^ "

#3(& (8')48#Y

'&83'+ ]*+8'*77&'.&U8&+9[#J&77*K*'79.4*+8'*77&'.R)&S-#0 "

5$1#H+B0,%F%+/D)+,,- J(1*%0'1 O+2%P .

2$) 'Y'(%+) C ,$"PN

'Y'(%+)91$2Z'O"$


13/24

!"# %&'()*+" #$%&'%() *+,-./ +00&%123%4(5 $5%() *+, 678.9:

; Create a new file by selecting and right-clicking on the view folder

; Choose New > File from the context menu and name the new file Detail.view.xml

; Paste the view definition below and save your changes

A/2*-70+6*'1%)'HH+)4$/+C"T+HH'U')H#9*'1%)'HH+)9>+%$0H"L/H1,C",$ File from the context menu and name the new file Detail.controller.js


14/24

!"# %&'()*+" #$%&'%() *+,-./ +00&%123%4(5 $5%() *+, 678.9:

,$


15/24

!"# %&'()*+" #$%&'%() *+,-./ +00&%123%4(5 $5%() *+, 678.9:

>?"&2%@" L B M6D0)" %()"&(01%N0)%3( O%,P(Q

!"#$%&'($Set proper titles to View1 and Detail page by updating the resource model (aka i18n model).

**-2 F3 +'4

C+%$0H 70+6

>+%$0HZ0%H+ C D)'#(*% >+%$0H,

:;$?@'4A2

; Data-Binding:

http: / /he lp.sap.de/saphelp_u iaddon10/helpdata/en/91/ f0 f3cd6f4d1014b6dd926db0e910

70/content .h tm ; Internationalization (i18n):

h t tp: / /he lp.sap.com/saphelp_hanaplat form/helpdata/en/b6/d1a9511f994b3a86e2f34a32

e40a34/content .h tm


16/24

!"# %&'()*+" #$%&'%() *+,-./ +00&%123%4(5 $5%() *+, 678.9:

>?"&2%@" R B 1H& 8)87&T#")-D+W8)87&C#W

Q4*+8&+8W

Q`)(8

)8&6(T#"M>'*9348(C# W

A=]h+*%B0,%F%+/

%;


17/24

!"# %&'()*+" #$%&'%() *+,-./ +00&%123%4(5 $5%() *+, 678.9:

,%$%+C".C i.>0,*'1%01(+#?l me))')m - m&(**+,,m ?"3E

A3J0),%&%$%(,E

A3=]h+*%B0,%F%+/E

QM`)(8W

QM4*+8&+8W

QM>1H&W

QM4*'&,R)&SW

Please take a few minutes to evaliuate the text and state property ot the ObjectStatus declaration. We are usingExpression Binding to define a more readable UI. Check out this slidesto get yourself familiar with this new SAPUI5feature.

webapp/i18n/i18n.properties

; Add a placeholder for the currency and set it to EUR

8)87&T>'*9348 c%&'%)&S

1225)87& T =22 5)87&

122X&(4')28)*+T=22 X&(4')28)*+

*())+1*;CeaY

d X&81)7 R)&SX&81)75)87& T >'*9348 X&81)7(

webapp/view/Detail.view.xml

; Replace the VBox holding the texts with the more beautiful ObjectHeader control (which has almost thesame API as the ObjectListItem control but utilizes the space in a different way)

Q6%4,R)&S

4*+8'*77&'I16&T#J&77*K*'79.4*+8'*77&'.X&81)7#

U67+(T#(12.6#

U67+(,6%4T#(12.3).4*'&.6%4# W

Q>1H& 8)87&T#")-D+WX&81)75)87&C#

(L*SI1%e388*+T#8'3

+1%e388*+>'&((T#L1+97&I1%e388*+>'&((# W

A=]h+*%T+$#+)

%0%H+C".D)'#(*%4$/+?"

1(/]+)C".C OOi.a10%D)0*+? j \kkP 3 \kkP9%'b0L+#O_P ?"

1(/]+)a10%C".0\`1E*())+1*;?" E

A,%$%(,+,E

A=]h+*%&%$%(,

%+L%C".C i.>0,*'1%01(+#?l m>0,*'1%01(+#m - mG2$0H$]H+m ?"

,%$%+C".C i.>0,*'1%01(+#?l me))')m - m&(**+,,m ?" 3E

A=]h+*%&%$%(,

%+L%C".C Oi.a10%,=1=)#+)? E kPl m=)#+)+#m - mm ?"

,%$%+C"&(**+,," 3EA3,%$%(,+,E

A$%%)0](%+,E

A=]h+*%G%%)0](%+ %+L%C"D)'#(*% g.D)'#(*%F>?" 3E

A=]h+*%G%%)0](%+ %+L%C"S$%+@'); g.S$%+@');F>?" 3E

A=]h+*%G%%)0](%+ %+L%C"&(


18/24

!"# %&'()*+" #$%&'%() *+,-./ +00&%123%4(5 $5%() *+, 678.9:

; ObjectListItem:

h t tps : / / s apu i 5 . h an a . o n dem an d . co m / ex p l o r ed . h tm l # / en t i t y / s ap . m . O b j ec tL i s t I t em / s am

p l es


19/24

!"# %&'()*+" #$%&'%() *+,-./ +00&%123%4(5 $5%() *+, 678.9:

>?"&2%@" S B 8DD 0 @"0&2G /%"1D

!"#$%&'($

Implement a search in View1 by using the UI element sap.m.SearchField

**-2 3 +'4

C


20/24

!"# %&'()*+" #$%&'%() *+,-./ +00&%123%4(5 $5%() *+, 678.9:

webapp/view/View1.controller.js

; Implement a new handler function in the View1 controller. Make sure to separate the function from

the other handler function with a ,

; Access the query as a parameter of the event object

; If the query is not empty add a FilterOperator to the array of filters

; Access the list instance by calling byId on the view; Apply the filter array on the binding object of the list

(12.3).9&Z)+&[\

#(12M3)M4*'&M6%4M]*+8'*77&'#

O0 Z3+48)*+[]*+8'*77&'^ "

#3(& (8')48#Y

'&83'+ ]*+8'*77&'.&U8&+9[#J&77*K*'79.4*+8'*77&'.R)&S-#0 "

L1+97&`)(8@8&6>'&((, Z3+48)*+ [&%8^ "

%1' *F*38&' T (12.3).4*'&.?@]*62*+&+8.H&8F*38&'P*'[8L)(^Y

%1' (&7&48&9>'*9348@9 T&%8.H&8'*9348@9C^Y

C:

5$1#H+&+$)*5 - J(1*%0'1 O+2%P .

33 *)+$%+ /'#+H J0H%+)

2$) J0H%+), C WXN

2$) f(+); C +2%9@+%D$)$/+%+)O"f(+);"PN

0J Of(+); nn f(+);9H+1@%5 E kP .

2$) J0H%+) C 1+6 ,$


21/24

!"# %&'()*+" #$%&'%() *+,-./ +00&%123%4(5 $5%() *+, 678.9:

>?"&2%@" P B 8DD 0( 3&D"& 02)%H%)K

!"#$%&'($

Add a button to the footer of the Detail page to trigger the order activity of a listed product. When the user

presses the button, a confirmation dialog is shown. If the user confirms the dialog, a short success message is

shown.

Note: To keep this exercise simple, we are not calling any server side function to actually executed the order.

**-2 3 +'4

C


22/24

!"# %&'()*+" #$%&'%() *+,-./ +00&%123%4(5 $5%() *+, 678.9:

=)#+)>0$H'@I,@C>' ;'( 6$1% %' ')#+) %50, 0$H'@&(**+,,I,@CZ5+ 1H&

8)87&T#")-D+WX&81)75)87&C#

(L*SI1%e388*+T#8'3

+1%e388*+>'&((T#L1+97&I1%e388*+>'&((# W

Qc;A&48J&19&'

. . .

QMc;A&48J&19&'W

AJ''%+)E

AR$)E

A*'1%+1%Y0@5%E

AR(%%'1%+L%C".0\`1E=)#+)R(%%'1Z+L%?"

%;0$H'@&(**+,,I,@"PN

I+,,$@+Z'$,%9,5'6O,(**+,,I,@PN

33 Z=>= *$HH


23/24

!"# %&'()*+" #$%&'%() *+,-./ +00&%123%4(5 $5%() *+, 678.9:

?:

](1#H+9@+%Z+L%O"=)#+)>0$H'@Z0%H+"P

PN

?

C^Y

C^Y

Nicely done! This step concludes the guided part of the CodeJam. Now, take on some of the additional challenges onthe next page!

:;$?@'4A

; Footer: https://sapui5.hana.ondemand.com/explored.html#/sample/sap.m.sample.Page/preview

; MessageBox: https://sapui5.hana.ondemand.com/docs/api/symbols/sap.m.MessageBox.html

; MessageToast: https://sapui5.hana.ondemand.com/docs/api/symbols/sap.m.MessageToast.html


24/24

8DD%)%3(01 TG011"(C"@

1. Deploy your application to the SAP HANA Cloud Platform

2. Run your application in the Fiori Launchpad Sandbox

3. Add a placeholder for product images and integrate the image into the Detail view

4. Add a placeholder for product images and integrate the image into the List in the View1 view

5. Use Expression Bindingto allow ordering of a product only if it is not discontinued

6. Enhance the Approval MessageBox with a request to enter the UnitPrice. Only if the entered UnitPrice is

correct, allow the user to click on OK.

7. Group the List Items in the list in View1 by the CategoryID of the product

8. Enable lazy loading for the list in View1

9. Enhance the handleSearch method in the controller of View1 to enable searching for the Category,

UnitePrice and QuantityPerUnit

10. Add a second language file for the language of your choice to the app. The new file would need to follow a

specific filename convention and needs to be placed in the i18n folder

11. Add 3 simple unit tests using the One Page Acceptance (OPA5) API as documented here

12. Improve the Detail view to show details about the Category and the Supplier. This exercise requires re-

thinking the navigation pattern to enable binding different data to different UI components

Documents

Sapui5 Codejam v2 (1)