WEEK 2 BONUS EXERCISE MAP LOCATION FORMATTER Please perform the exercises below to score additional bonus points for the course. Hint: You can download the solution of unit “Working “Working with OData Services” Services ” (week (week 2 unit 6) as a starting point for this exercise. Copy the corresponding folder from the course’s github repository as described in unit “A Glance at the Coding Exercises (week ( week 0 unit 5) if you did not complete all the exercises of the first two weeks.
Figure 1 - Preview of the app after doing this unit’s exercises
OpenSAP – Developing Web Apps with SAPUI5
1 TASK BACKLOG Implement a map location formatter in your existing “MyApp” project that fulfills this backlog.
User Story As a user of the app I want to see a map location for the address So that I can easily see where the address is located.
Details
Show a panel with the text “Location” below the address form Inside the panel, show the address visually using an sap.m.Image control Write a formatter named formatMapUrl that converts the address to a URL for the image Pass in the fields from the “address” model to the formatter function Verify that the image displays the address displayed in the form above
Hint: Use the google maps static API and to set a marker for the address. You can specify width, height, zoom level, and a marker. The resulting image should look like this:
Figure 2 - Image returned by the google maps static API
Copyright/Trademark
OpenSAP – Developing Web Apps with SAPUI5
2 VERIFY YOUR SOLUTION To score the bonus points for this exercise you need to run the validator as explained in the unit “A Glance at the Coding Exercises” (week 0 unit 5). The mos t important steps are outlined below. webapp/index.html
… openSAP - Developing Web Apps with SAPUI5 <script id="sap-ui-bootstrap" src=" …resources/sap-ui-core.js" …>
… Just add the script tag after the SAPUI5 bootstrap tag. It injects a button to your app that can run tests against your application coding to verify the functionality that you have added. Run the code validator Note: Test logic The tests will check for certain conditions to be fulfilled in your app. They rely on specific controls being used, nesting orders, aggregations being filled, or ids set to a specific value. You need to stick close to the task of the exercise otherwise you are not able to score the extra points for the exercise. 1.
Run the validator by clicking on the blue icon in the lower left and select the bonus exercise.
2.
If there is a problem with your exercise coding you will get an error message in the result window of the validator. Check and fix the errors and run the validator again!
3.
Once all tests run successful the validator will display a result code. You have successfully validated your exercises. Copy the code into your clipboard!
4.
Paste the code in the corresponding field of the openSAP exercise platform to score the extra points.
-
Copyright/Trademark
OpenSAP – Developing Web Apps with SAPUI5
Coding Samples Any software coding or code lines/strings (“Code”) provided in this documentation are only examples and are not intended for use in a productive system environment. The Code is only intended to better explain and visualize the syntax and phrasing rules for certain SAP coding. SAP does not warrant the correctness or completeness of the Code provided herein and SAP shall not be liable for errors or damages cause by use of the Code, except where such damages were caused by SAP with intent or with gross negligence.
