Hands-on exercise for week 4 unit 1: Understanding SAPUI5 flexibility
In this unit, you will learn how to adapt an application as a key user. You will take an example application as delivered by SAP, and make changes according to end user requirements.
These change requirements were collected in a workshop with the end users, they are documented in the two screenshots below:
The workshop participants also emphasized that they would like to include a currency converter in the application, to display the product prices in Euro.
To summarize, they want you, the key user, to make the following changes to the application:
- Remove the "Availability" header element
- Remove the sections "Sales Data" and "Notes", as they are not relevant for your users
- Rename the "Inventory Information" section to "Inventory" for brevity
- Reviews are more important to your users than technical information, hence "Reviews" should be shown first
- The "Technical Data" section should show a new field, "Supplier"
- The "Base Unit" field should be removed from the "Technical Data" section
- Add "Quantity" to the table contained in "Inventory" and put it to the left of "Ordered Quantity"
- Add an Iframe as a section to include the CurrencyConverter located at https://themoneyconverter.com/MoneyConverter?from=USD&to=EUR&amount=XXX where XXX is to be replaced by the product’s price. The Iframe should be 180 pixels wide and 220 pixels in height. Name the new section "Price (EUR)" and move it to the first position.
-
Open the application to be adapted here. If prompted for a username and password, enter the credentials of the account created during the last exercise, then click Sign In.
-
Trigger the search in the List Report.
Click Go.
-
When the list of products is being loaded, select one of the entries to view its detail page.
-
Start the UI adaptation via the user profile.
Click DU.
Click Adapt UI.
-
Remove the "Availability" header element
Right-clicking on the header element titled "Availability" with the mouse opens a context menu.
Click Remove.
-
Remove the "Notes" section.
Right-clicking on Notes with the mouse opens a context menu.
Click Remove.
-
Remove the "Sales Data" section.
Scroll up to bring the screen to the desired location if the bar containing the section titles is not visible.
Right-clicking on Sales Data with the mouse opens a context menu.
Click Remove.
-
Rename the "Inventory Information" section to "Inventory".
Scroll up to bring the screen to the desired location if the bar containing the section titles is not visible.
Right-clicking on Inventory Information with the mouse opens a context menu.
Click Rename.
Enter the new section title ("Inventory") and confirm by pressing <Enter>.
-
Change the places for the "Technical Data" and "Reviews" sections.
Drag the "Technical Data" section by clicking on its title with the left mouse button, then holding and dragging it to the right.
Once "Reviews" and "Technical Data" have switched places, release the mouse button to confirm the order of sections.
-
Remove the "Base Unit" field from the "Technical Data" section.
Right-clicking on Base Unit with the mouse opens a context menu.
Click Remove.
-
Add the "Supplier" field to the "Technical Data" section
Right-clicking on Weight with the mouse opens a context menu.
Click Add: Field.
Select Supplier, then confirm your selection by clicking "OK".
The "Supplier" field is now visible in the "Technical Data" section:
-
Add the "Quantity" column to the "Stock Data" table, and move it to the correct position.
Right-clicking anywhere in the Stock Data table with the mouse opens a context menu.
Click Add: Column.
Select Quantity.
Click OK.
The "Quantity" column is now visible. Drag it by clicking on its title with the left mouse button, then holding and dragging it to the left of the "Ordered Quantity" column.
-
Open the dialog to define the embedded content.
Right-clicking anywhere in the unused area in the header with the mouse opens a context menu. Scroll up, if the header is not visible.
Click Embed Content to: Section.
-
In the "Define Embedded Content" dialog, make the following settings:
Set the "Width" to 180 px, and the "Height" to 220 px.
-
Specify the URL for the external content.
Paste the following URL in the "URL (click to edit manually)" field: https://themoneyconverter.com/MoneyConverter?from=USD&to=EUR&amount=
In the "Available Values (click to add to the URL)" list, scroll down until the "Price" entry is visible.
Click Price.
Ensure, that the URL entered in the text area on the right now ends in "{Price}" (without quotes).
-
Confirm your settings by displaying the preview of the embedded content.
Click Show Preview.
A preview of the currency converter, including the correct price for the currently selected product, should be displayed below.
Click Save.
Rename the new section ("Embedded Content") to "Price (EUR)".
Click Save & Exit.
Reload your current browser tab:
Right-clicking anywhere in the application with the mouse opens a context menu.
Click Reload.
The application now reflects the changes you have made during this exercise.
You have completed the exercise! In this unit, you have learned how the key user can make changes to an application. You have seen several types of changes, e.g. setting the visibility for individual fields, changing the order of sections, adding columns and fields, and even embedding third-party content into your application. The next step would be to make these changes available to your end users. Depending on the platform you're working, the exact procedure might differ.
Week 4 Unit 3: Adapting the UI as a developer – basic extensions