unit3.md

Hands-on exercise for week 4 unit 3:
Adapting the UI as a developer – basic extensions

Previous exercise

Hands-on exercise for week 4 unit 2: Adapting an app as a key user

Video on openSAP.com platform

Adapting the UI as a developer – basic extensions

Introduction

In the following two units you will learn how to adapt an application as developer. You will add your own changes to example standard SAP application according to requirements from your business unit. You have received the following two screenshots containing the desired changes.

⚠️ Have in mind that in order to complete this and the next exercise, you should have already completed the steps described in Week 4 Unit 1 exercise - they guide you how to set up ES5 user and destination in the cockpit for this system.

This is the summarized list for you, the developer, with the changes to implement:

1. Remove the options button
2. Change the column title from Category to Type
3. Enlarge the product image in the single object view.
4. Add additional button called Share by Email, which should be able to generate email containing info about products that have been selected by the end-user from the table.

In this unit you will learn how to do the first three changes, which are basic UI changes. In the next unit you will learn how to do the fourth change, which is advanced extension.

Step 1: Create and launch devspace using SAP Business Application Studio

1. Open your trial account home page at https://cockpit.hanatrial.ondemand.com/ .

   Click SAP Business Application Studio .

   

2. You will need to created dev space. Click Create Dev Space .

   

3. Enter demospace in the Dev Space name box.

   Click Create Dev Space .

   

4. Wait some moment for your just created devspace`s status to become RUNNING and then click demospace to launch it.

   

Step 2. Create your own Adaptation Project

1. You might or might not be presented with opened preview release notes window if you haven't use this devspace before, but, if so, you can close that and proceed on the Welcome page. Click Start from template .

   

2. Click on Adaptation Project to select it.

   Click Start .

   

3. Select ABAP from the dropdown list.

   Click Next .

   

4. Enter my.manage.products in the Project Name box.

   Enter my app in the Application Title box.

   Click Next .

   

5. Select ES5 from the dropdown list.

   

6. Select nw.epm.refapps.st.prod.manage.new from the dropdown list. You can type part of the name to filter the values in the dropdown list.

   

7. Select 1.84.13 from the dropdown list.

   Click Finish. This will trigger the generation of new Adaptation Project which will be your own variant of the chosen application.

   

Step 3: Launch the SAPUI5 Visual Editor for the newly created Adaptation Project

1. After the generation of the project has finished, the whole page might refresh itself to set the current workspace SAP Business application studio to the one of the newly created project. After the browser loads successfully, expand the webapp folder and right-click manifest.appdescr_variant file.

   ⚠️ Have in mind that if, while opening SAPUI5 Visual Editor, it is failing to open with 403 error, this is most probably because you have too many exposed ports in SAP Business Application Studio and you should unexpose one, so that the SAPUI5 Visual Editor can expose one for itself. Just go to View/Find command, type 'Ports: Preview' and if the count of the ports shown is 5, than type again Ports: Unexpose and select on of the ports to unexpose it. Just do not unexpose the one that is named 'Theia hosted instance', if there is such. Then you can launch again the SAPUI5 Visual Editor and it will load successfully this time. You need this procedure only if you have the 403 error while trying to load the editor, and it needs to be done just once, before the first launch ot the SAPUI5 Visual Editor for the used devspace.

   

2. Select Open SAPUI5 Visual Editor .

   

3. Enter your username and password for ES5 (not the credentials for SAP BTP) in the box.

   Click Sign in .

   

4. The editor will need a moment to load, but when it loads, click Go to load the products for that application. As you see, the application is in full working order.

   

5. You now see the loaded products for this application. Have in mind that for this application, the SAPUI5 Visual Editor is showing placeholders for the product images. Click Edit to go to Edit mode.

   

6. Right-click on the options button will open a context menu.

   

7. Click Remove.

   

8. Click Category.

   

9. Enter Type in the field called Text. To find it easier, you can filter the properties list with entering the name of the field in the search bar.

   Confirm your entry by pressing the Enter key .

   

10. Click Preview to go back to preview mode and to be able to navigate to the app's single object view.

    

11. Click the product placed at the top of the table to enter the single object view.

    

12. Click Edit to go back to Edit mode.

    

13. Click the image placeholder for the product to select it.

    

14. Find the dropdown list called Display Size and Select XL from it. To find it easier, you can filter the properties list with entering the name of the field in the search bar.

    

15. Click Preview to see the changes that you just did in your application variant, applied over the original application.

    

16. Click Edit to go back to Edit mode.

    

17. Click Changes .

    

18. Here you can see all the changes you have done, with details about them and buttons for deletion if you want to revert some of it for example.

    

Summary

You have completed the exercise! In this unit, you have learned how to do basic extension over SAP Standard application and preview the changes that you have done.

Next Exercise

Week 4 Unit 4: Adapting the UI as a developer – advanced extensions