OpenSAP Fiux2 Week 05 ExerciseCreateAppFromSmartTemplateAndAnnotationFile (2)

7/26/2019 OpenSAP Fiux2 Week 05 ExerciseCreateAppFromSmartTemplateAndAnnotationFile (2)

1/27

BUILD YOUR OWN SAP FIORI APP IN THECLOUD

Exercise Week 5

Create an App from a Smart Template and AnnotationFile

1 INTRODUCTION

1.1 Goal

Smart Templates in the SAP Web IDE of the SAP HANA Cloud Platform is an approach to create SAP Fioriapplications based on OData services and Annotations requiring no JavaScript UI coding. An app, that is based onsmart templates uses predefined template views and controllers that are provided centrally. As a result, noapplication-specific view instances are required. The SAPUI5 runtime understands the metadata and annotationsof the underlying OData service and uses the corresponding views for the SAP Fiori app at start up.

1.2 ExerciseDescription

In this exercise, you will

create a Smart Template application from a template in the SAP Web IDE (using an SAP GatewayService or a local schema file)

enhance the Smart Template application by changing the Annotation File with the Annotation Modeler

Note

This exercise is based on SAPUI5 version 1.34.All screenshots are based on SAP Web IDE version 160324 (that means March 24, 2016). Future versionsof SAP Web IDE might look different.SAP Web IDE supports numerous browsers, however, the Google Chrome browser is highlyrecommended for all exercises.


2/27

openSAP

Copyright/Trademark

1.3 Prerequisites

You have downloaded the ES4_GWSAMPLE_BASIC_0_annotations.xml file from the openSAP course page.

You have an SAP HANA Cloud Platform (HCP) trial account and work in your SAP Web IDE trial.

There are two options to carry out this exercise:

You want to work withreal backend data from the ES4 system (start with chapter 2.1). Therefore, youneed a user in the ES4 SAP Gateway system and set up this destination in your SAP HANA CloudPlatform (HCP) account as described in the System Onboarding Guide provided in week 4.

You want to work withmock data and a local schema file (start with chapter 2.2). In this case, youhave to additionally download and use the schema file ES4_GWSAMPLE_BASIC.edmx.

1.4 Further Information

Generally, SAP recommends having the annotation as Core Data Service (CDS). As a second option, theimplementation can be done within an OData service. The reason is that the lifecycle of the annotations is close to

the data definition. To ensure that in this course all learners can do the entire exercise, the annotations are basedon a local file as part of the example project. In a customer project, a local annotation file is used to selectivelyoverwrite annotations that come from a backend system.

For more information on Smart Template applications, seehttps://sapui5.hana.ondemand.com/#docs/guide/03265b0408e2432c9571d6b3feb6b1fd.html.
http://www.sap.com/company/legal/copyright/index.epxhttp://www.sap.com/company/legal/copyright/index.epxhttps://sapui5.hana.ondemand.com/#docs/guide/03265b0408e2432c9571d6b3feb6b1fd.htmlhttps://sapui5.hana.ondemand.com/#docs/guide/03265b0408e2432c9571d6b3feb6b1fd.htmlhttps://sapui5.hana.ondemand.com/#docs/guide/03265b0408e2432c9571d6b3feb6b1fd.htmlhttp://www.sap.com/company/legal/copyright/index.epx


3/27

openSAP

Copyright/Trademark

2 CREATE A SMART TEMPLATE APP FROM TEMPLATE

2.1 Create App with an SAP Gateway Service

This chapter describes how to create a Smart Template application based on an SAP Gateway service from theES4 SAP Gateway Demo Consumption system.

Note

In case, you cannot or do not want to work with an SAP Gateway service, you can skip this chapter andcontinue with the optional chapter 2.2.

Explanation Screenshot

1. Launch SAP Web IDE, with theGoogle Chrome browser.

2. On the Welcome screen, create anew project by choosing the tileProject from Template.

Note

Alternatively, choose File New Project From Templatefrom the topmenu.

3. In the Template Selectionstep ofthe wizard, search for the SmartTemplate Application tile.

4. Select the Smart TemplateApplication tile.

5. Click the button Nextto continue.

6. In the step Basic Information,provide the following details:

Project Name SmartTemplateExercise

Title Smart TemplateDescription openSAP exercise

http://www.sap.com/company/legal/copyright/index.epxhttp://www.sap.com/company/legal/copyright/index.epxhttp://www.sap.com/company/legal/copyright/index.epx


4/27

openSAP

Copyright/Trademark


8. In the step Data Connection, adata source is needed.Under Sources, select ServiceCatalog.

9. Choose the ES4backend systemfrom the Service Informationdropdown. If prompted, enter yourcredentials in the pop-up.

10. Search for and finally select theservice GWSAMPLE_BASICfromthe list with available ODataservices that come from the ES4SAP Gateway Demo Consumption

system.


12. In the step Annotation Selection,an annotation must be defined.Click on the link + Add AnnotationFiles

13. From the dropdown, select FileSystem.

Note

For this exercise, the annotationinformation comes from a local file. In acustomer project, the annotation comesfrom the backend system.

14. In the dialog box Add From FileSystem, choose Browseandopen the file you downloaded fromthe openSAP page:

ES4_GWSAMPLE_BASIC_0_annotations.xml

15. Confirm with OK.

16. In the current wizard step, click thebutton Nextto continue.


5/27

openSAP

Copyright/Trademark


17. In the step TemplateCustomization, go to the fieldOData Collectionand selectProductSetfrom the dropdown.


Note

After selecting ProductSetin theOData Collection field, the ODataNavigation field gets automaticallyupdated with ToSalesOrderLineItems.

19. In the step Confirmation, click thebutton Finishto finalize the projectcreation based on a SmartTemplate application template.

20. Now, in your SAP Web IDEWorkspace, the new folderSmartTemplateExercisewascreated.You can check out the files thatwere created. You may note thatthere are neither views norcontrollers and only a few filescontain code inside the projectfolder.Yet, you can still change the app -even without developing inJavaScript and others. See thefollowing steps for some examples.


6/27

openSAP

Copyright/Trademark

2.2 Create App with a Local Schema File

This optional chapter describes the alternative way how to create a Smart Template application based on a localschema file.

Note

If you have already created your Smart Template application in chapter 2.1, you can skip this step.


1. Launch SAP Web IDE, with theGoogle Chrome browser.

2. On the Welcome screen, create anew Project by choosing the tileProject from Template.

Note

Alternatively, choose File New Project From Templatefrom the topmenu.

3. In the Template Selectionstep ofthe wizard, search for the SmartTemplate Application tile.

4. Select the Smart TemplateApplication tile.


6. In the step Basic Information,provide the following details:

Project Name SmartTemplateExercise

Title Smart Template

Description openSAP exercise



7/27

openSAP

Copyright/Trademark


8. In the step Data Connection, youneed to set the data source.Under Sources, select FileSystem.

9. Choose the button Browseandopen the previously downloadedfile you got from the openSAPpageES4_GWSAMPLE_BASIC.edmx.


11. In the step Annotation Selection,an annotation must be defined.Click on the link + Add AnnotationFiles

12. From the dropdown, select FileSystem.

Note

For this exercise, the annotationinformation comes from a local file. In acustomer project, the annotation comesfrom the backend system.

13. In the dialog box Add From FileSystem, choose Browseandopen the file you downloaded fromthe openSAP page:

ES4_GWSAMPLE_BASIC_0_annotations.xml.

14. Confirm with OK.

15. In the wizard step, click the buttonNextto continue.

16. In the step TemplateCustomization, go to the fieldOData Collectionand selectProductSetfrom the dropdown.


Note

After selecting ProductSetin theOData Collection field, the ODataNavigation field gets automaticallyupdated with ToSalesOrderLineItems.


8/27

openSAP

Copyright/Trademark


18. In the step Confirmation, click thebutton Finishto finalize the projectcreation based on a SmartTemplate application template.

19. Now, in your SAP Web IDEWorkspace, the new folderSmartTemplateExercisewascreated.You can check out the files thatwere created. You may note thatthere are neither views norcontrollers and only a few filescontaining code inside the project

folder.Yet, you can still change the app -even without developing inJavaScript or others. See thefollowing steps for some examples.


9/27

openSAP

Copyright/Trademark

3 ENHANCE THE SMART TEMPLATE APPLICATION

3.1 Enhance Annotation File with the Annotation Modeler


1. In SAP Web IDE, expand thefolder webapp/annotations.

2. To open the annotation file with thecorrect editor, right-click the filelocalAnnotations_1.xml andchoose from the context menuOpen With AnnotationModeler.

3. The file localAnnotations_1.xmlopens in the canvas.Check that the field OData EntitySethas the value ProductSet.

4. In the node of the LocalAnnotations, go to the columnActionsand click the icon + (plus)to add a sub-node entry.

5. In the dialog box Annotations,select the checkbox UI.LineItem.

6. Confirm with the button OK.

7. The node UI.LineItemhas beencreated and shows a red lightindicating that the node has notbeen adapted yet.In the column Actionsof this node,click the icon + (plus).

8. In the dialog box

Line Item, selectthe checkbox

DataField.



10/27

openSAP

Copyright/Trademark


10. Expand the node UI.LineItemandselect the node UI.DataField.

11. In the UI.DataField Propertiespanel on the right, go to the fieldValueand choose from thedropdown ProductID.

12. Confirm the changes with thebutton Apply.The red light indicator disappeared.The structure update wassuccessful.

13. Go a second time to the sub-nodeof the Local AnnotationsUI.LineItem area, then to thecolumn Actionsand click the icon+ (plus) in the UI.LineItemrow to

add a second UI.DataFieldentryfor UI.LineItem.

14. In the dialog box Line Item, selectthe checkbox DataField.


16. In the nodeUI.LineItem, select thesecondly created UI.DataField.

17. In the UI.DataField Propertiespanel on the right, go to the fieldValueand choose from thedropdown Name.

18. Confirm the changes with thebutton Apply.The red light indicator disappeared.

The structure update wassuccessful.

19. Save your changes in the filelocalAnnotations_1.xmlbychoosing Save.


11/27

openSAP

Copyright/Trademark

3.2 Run the Smart Template Application

Note

If you have already opened the app preview in a separate tab and a refresh of the app does not work, werecommend that you close the preview tab, clear the browser cache and start the app anew and as follows.


1. In SAP Web IDE, select the folderSmartTemplateExercisefolderand choose the button Runfromthe top menu.

2. Depending on your SmartTemplate project setup, eitherconnected to the ES4 SAPGateway service or working with alocal schema file and mock data,choose one of the followingoptions:

With ES4 SAP Gatewayservice: In the dialog boxChoose the File to Run,select thef lpSandbox.html file andconfirm with the buttonOK. This option does not

work if you created theapp with a local schemafile only since your setupis not prepared to fetchdata from a backendservice.

With local schema andmock data: In the dialogbox Choose the File toRun, select the optionf lpSandboxMockServer.

h tm land confirm with thebutton OK.

3. The app preview is opened in anew browser window.If the pop-up Store Files on thisDevice is displayed, confirm withAllow.You see a launchpad tile calledSmartTemplateExercise.

4. Click on the tile to enter your app.


12/27

openSAP

Copyright/Trademark


5. Now, your Smart Templateapplication opens.If prompted, provide your ES4 SAPGateway Demo Consumptionsystem credentials in the pop up.

6. In case your app does not showany data, click the blue button Goin the top right corner of thescreen.Your app fetches data from thebackend system (or mock datarespectively).

7. Finally, you will see a product list.

8. Now, close the app previewwindow and return to SAP WebIDE.

Note

Actually, a click on any of the list itemswill take you to an empty page. In thenext step of this exercise, you willcreate new content for this page.


13/27

openSAP

Copyright/Trademark

3.3 Add Content to Second Page


1. In SAP Web IDE, go to yourproject folderSmartTemplateExerciseand

expand webapp/annotations.

2. Again, open the file in theAnnotation Modeler. Therefore,right-click the filelocalAnnotations_1.xml andchoose from the context menuOpen With AnnotationModeler.

3. The file localAnnotations_1.xmlopens in the canvas.Check that the field OData EntitySethas the value ProductSet.

4. In the node Local Annotations, goto the column Actionsand clickthe icon + (plus) to add a sub-nodeentry.

5. In the dialog box Annotations,select the checkboxUI.Identification.


7. The node UI.Identificationhasbeen created and shows a red lightindicating that the nodes has notbeen adapted yet.In the column Actionsof this node,click the icon + (plus).

8. In the dialog boxIdentification,select the checkbox

DataField.



14/27

openSAP

Copyright/Trademark


10. Expand the node UI.Identificationand select its sub-nodeUI.DataField.

11. In the UI.DataField Propertiespanel on the right, go to the fieldValueand choose from thedropdown Description.


13. Go a second time to the sub-nodeof the Local AnnotationsUI.Identification area, then to thecolumn Actionsand click the icon

+ (plus) in the UI.Identificationrow to add a second UI.DataFieldentry for UI.Identification.

14. In the dialog box Identification,select the checkbox DataField.


16. In the nodeUI.Identification,select the secondly createdUI.DataField.

17. In the UI.DataField Propertiespanel on the right, go to the fieldValueand choose from thedropdown SupplierName.



15/27

openSAP

Copyright/Trademark


19. Go a third time to the sub-node ofthe Local AnnotationsUI.Identification area, then to thecolumn Actionsand click the icon+ (plus) in the UI.Identificationrow to add a third UI.DataFieldentry for UI.Identification.

20. In the dialog box Identification,select the checkbox DataField.


22. In the nodeUI.Identification,select the thirdly createdUI.DataField.

23. In the UI.DataField Propertiespanel on the right, go to the fieldValueand choose from thedropdown Price.

24. Attention!Do NOTconfirm yourchanges with the button Apply.

25. Choose the button AddConcatenation and see morefields that are displayed. Throughthis option, you add another valueand display it in your app in thesame field as your first value.

26. In the field Path, select from thedropdown the valueCurrencyCode.

27. Then go to the field Delimitertodefine how the price value and thecurrency code are separated.In the field Delimiter, insert a blankspace as value (with yourcomputer keyboard).



16/27

openSAP

Copyright/Trademark


29. As a next step, you will add aheader element to your SmartTemplate app.In the node of the LocalAnnotations, go to the columnActionsand click the icon + (plus)to add a sub-node entry.

30. In the dialog box Annotations,select the checkboxUI.HeaderInfo.


32. Select the node UI. HeaderInfo.

33. In the UI.HeaderInfo Propertiespanel on the right, go to the fieldTypeNameand type in the valueProduct.

34. In the UI.HeaderInfo Propertiespanel on the right, go to the fieldTypeNamePluraland type in thevalue Products.

35. Confirm the changes with thebutton Apply.The red light indicator still remainsbecause the sub-node must beconfigured, too.

36. Expand the node UI.HeaderInfoand select its sub-node Title.

37. In the UI.DataFild Propertiespanel on the right, go to the fieldValueand choose from thedropdown Name.

38. Confirm the changes with thebutton Apply.Now, the red lighted indicatordisappeared. The structure updatewas successful.For the OData entity setProductSet, all edit steps arefinished now.


17/27

openSAP

Copyright/Trademark


39. As a next step, you will adapt afurther part of the Smart Templateapplication.At the top of the canvas, go to thefield OData Entity Setand choosefrom the dropdown the valueSalesOrderLineItemSet.

40. Start the next application edit stepsfor the OData entity setSalesOrderLineItemSetbyclicking on the button Annotate.


42. In the dialog box Annotations,select the checkbox UI.LineItem.


44. The node UI.LineItemhas beencreated and shows a red lightindicating that the nodes is notadapted yet.In the column Actionsof this node,click the icon + (plus).


18/27

openSAP

Copyright/Trademark



Line Item, selectthe checkboxDataField.


47. Expand the node UI.LineItemandselect its sub-node UI.DataField.

48. In the UI.DataField Propertiespanel on the right, go to the fieldValueand choose from thedropdown SalesOrderID.



51. Run your app to see the changeson the second page (ProductDetails) of your Smart Templateapplication.Select the folderSmartTemplateExerciseandchoose the button Runfrom thetop menu.

NoteCheck chapter 3.2 Run the SmartTemplate Applicationin this documenton how to run your app depending onyour project setup.


19/27

openSAP

Copyright/Trademark


52. Once your app is running, navigatefrom one product list item to itsdetails.Check out the product list itemnavigation and the result of yourchanges to the annotation file onthe second view.

53. On the Productdetails page(second view), check the result ofyour changes done through theadditions to the annotation file.

54. Finally, close the app previewwindow and return to SAP WebIDE.


20/27

openSAP

Copyright/Trademark

3.4 Optional: Add Content to Third Page

This step shows how to add content to a third page that you can access from a Product Details page (secondview). This page is labeled with Second Facet.


1. In SAP Web IDE, go to yourproject folderSmartTemplateExerciseandexpand webapp/annotations.

2. Again, open the file in theAnnotation Modeler. Therefore,right-click the filelocalAnnotations_1.xml andchoose from the context menuOpen With AnnotationModeler.

3. The file localAnnotations_1.xmlopens in the canvas.In the field OData Entity Set,select from the dropdown the valueSalesOrderLineItemSet.


5. In the dialog box Annotations,select the checkboxUI.Identification.


7. The node UI.Identificationhasbeen created and shows a red lightindicating that the node has not

been adapted yet.In the column Actionsof this node,click the icon + (plus).


21/27

openSAP

Copyright/Trademark



Identification,select the checkboxDataField.


10. Expand the node UI.Identificationand select its sub-nodeUI.DataField.

11. In the UI.DataField Propertiespanel on the right, go to the fieldValueand choose from thedropdown Note.


13. As a next step, you will add aheader element.In the node Local Annotations, goto the column Actionsand clickthe icon + (plus) to add a sub-nodeentry.

14. In the dialog box Annotations,select the checkboxUI.HeaderInfo.



22/27

openSAP

Copyright/Trademark


16. Select the node UI. HeaderInfo.

17. In the UI.HeaderInfo Propertiespanel on the right, go to the fieldTypeNameand choose from thedropdown the value Sales OrderItem.

18. In the UI.HeaderInfo Propertiespanel on the right, go to the fieldTypeNamePluraland choose fromthe dropdown the value SalesOrder Items.

19. Confirm the changes with thebutton Apply.The red light indicator still remainsbecause the sub-node must beconfigured, too.

20. Expand the node UI.HeaderInfoand select its sub-node Title.

21. In the UI.DataFild Propertiespanel on the right, go to the fieldValueand choose from thedropdown SalesOrderID.

22. Confirm the changes with thebutton Apply.Now, the red light indicatordisappeared. The structure updatewas successful.


24. Now, check your changes withinthe code of your app to understandthe page structure.Therefore, go to the folder webappand double-click on the filemanifest.json

25. On the bottom of the canvas, clickthe tab Code Editor.


23/27

openSAP

Copyright/Trademark


26. Scroll down through the code andfind "sap.ui.generic.app"

27. Below, you will find the three"pages"element declarations. Asyou may notice, the declarationsare nested into each other. Theycorrespond to the tree differentpages that you created and editedin the steps before.

28. Check the parameter entitySetofeach page declaration.You should see that the first twoparameters of entitySethave thevalue ProductSet.The third parameter of entitySetmust have the valueSalesOrderLineItemSet

Note

If one of the parameters of entitySetisempty, add the right value to it and bealigned with the screenshot provided inthis exercise.

29. If you did changes in the filemanifest.json, choose the buttonSavefrom the top menu.

30. Run your app to see the changeson the second page (ProductDetails) of your Smart Templateapplication.Select the folderSmartTemplateExercisefolderand choose the button Runfromthe top menu.

Note

Check chapter 3.2 Run the SmartTemplate Applicationin this documenton how to run your app depending onyour project setup.

31. Once your app is running, navigatefrom one product list item to itsdetails.


24/27

openSAP

Copyright/Trademark


32. On the Productdetails page(second view), navigate to thepage SECOND FACET.In case that there is not datadisplayed, click on the buttonSettings.

33. In the pop-up View Settings,select Sales Order ID.

34. Confirm the button OK.

35. In the area SECOND FACETcheck the result of your changes

done through the additions to theannotation file.

36. First, check that there is anavigation to one of theSalesOrder ID items for more details.

37. Then, check the result of your edits

on the page Sales Order Item.

38. Finally, close the app previewwindow and return to SAP WebIDE.


25/27

openSAP

Copyright/Trademark

3.5 Optional: Remove Navigation from Product List Items

This step shows how to remove the navigation from the product list items on the first to the Product detail page(second view). This may be important if you want to go for a single list report app.


1. In SAP Web IDE, go to yourproject folderSmartTemplateExerciseandexpand the folderwebapp.

2. Right-click on the filemanifest.jsonand choose fromthe context menu Open WithCode Editor.

3. Inside the code, scroll down andsearch for the row that starts withsap.ui.generic.app.Inside, the entries pages:arerelevant.

Note

Try one of the following two options. Ifyou delete code, you can save and runyour app to check the results. Whenyou let the file open in SAP Web IDEand return back to your code, undoyour changes (e.g. code deletion) andtry another option. Therefore go to theSAP Web IDE menu Edit Undo

4. Option 1:You want to navigate from theproduct item list to the Productdetails page (second view). But onthis second view, the navigation toa third view (e.g. to Sales OrderItem) should be disabled.

5. For option 1, deletethe codehighlighted in orange.The highlighted code to be deletedrefers to this third page and is partof (or nested inside) the code ofthe second view.


26/27

openSAP

Copyright/Trademark


6. Option 2:You want to disable the navigationfrom a product list item to theProduct details page (secondview). In this case no furthernavigation possibilities areavailable to any sub-page of yourapp.

7. For option 2, deletethe codehighlighted in orange and yellow.The highlighted code to be deletedrefers to the second and third pageand is part of the code of the firstview.

8. Save your changes in the filemanifest.jsonby choosing Save.

9. Run your app to see the changeson the navigation behavior of yourSmart Template application.Select the folderSmartTemplateExercisefolderand choose the button Runfromthe top menu.

Note

Check chapter 3.2 Run the SmartTemplate Applicationin this documenton how to run your app depending onyour project setup.

10. In case of option 1:Navigate from a product list item toits Product details page (secondview).Check that a further navigationfrom Sales Order ID to the next

detail page (third view) is notpossible anymore.


27/27

openSAP

C i h /T d k


11. In case of option 2:Check that the navigation from oneof the product list items to itsProduct details page (second view)is not possible anymore.

Congratulations!You created and changed an SAP Fiori app based on a Smart Template Application

in SAP Web IDE.
http://www.sap.com/company/legal/copyright/index.epxhttp://www.sap.com/company/legal/copyright/index.epx

OpenSAP Fiux2 Week 05 ExerciseCreateAppFromSmartTemplateAndAnnotationFile (2)

Documents

Transcript of OpenSAP Fiux2 Week 05 ExerciseCreateAppFromSmartTemplateAndAnnotationFile (2)