E2E: BOPF-SADL-GW-SAPUI5 - Enhancing Entity Types and More

[Former Member]

This is the sixth step of the series. You'll find an overview in the document Introduction.

In the previous steps we struggled through the update business. But what if the data contained in an entity set is not sufficient. In the supplier details for example we displayed the main address. Now our business user wants to see the location in a map. Hence we need geo location data which is not yet provided by the entity set. To provide it is the content of this step. So let's start.

The following video illustrates this step. 

Adding Geo Location Data to the Gateway Service

The BOPF data model of the business partner provides already geo location data in the address node. So our only task is to enhance the entity type of the business partner in the Gateway service, to map the added properties and finally to use it in the UI.

Reworking the Entity Type

Open the Gateway project in Edit mode and select the properties of the BusinessPartner entity type. Just add the new properties with their attributes. Take care that the ABAP field name is maintained. If the tool doesn't provide it automatically enter it manually. And you can continue with enhancing the mapping.

Reworking the Mapping

Select the mapping node in the Service Implementation Folder of the business parter entity set via double click. The mapping editor opens and you can just complete the mapping. Use the BOPF association MAIN_ADDRESS. That's it, save and generate the service.

Testing

Open the Gateway Client and select the BusinessPartner entity set. Execute the GET method and you get the list of business partners with geo location data.

No we can use this new properties in the UI.

Adding a Map to the Product Detail Page

The OData service is providing the geo location data. So we can proceed and add a map to the product detail page.

The Details View

Maps require a new library. In the view xml we introduce a namespace for this library. Then we place a map on the view containing a list of spots. This list will be filled dynamically with the geo location data of the backend.

The index.html File

The library with the maps (sap.ui.vbm) must be added in the index.htm file. Then we have to define a data model for the spots and add it to the core.

The Products Controller

In the listItemTriggered function of the products controller, we have set the context for the detail page. We have to complete it now with the data for the map. We concatenate the geo location data of the service in the format the spot controll requires the position data: "<longitude>;<latitude>;0". We delete the list of spots from a former selection and add the new spot. The text should be the business partner Id and the tooltip the company name. That's it for the spot configuration.

But the code will not yet work. The geo data is currently still unknown. It is part of the address and the address is not expanded in the product controller context. But you can see the expand statement two lines above the spot handling? Yes correct, this is the binding registration for the details view. The expand request is executed when the details view requires the data - this is definitively not the case in a products controller callback function.

So we have to add a further expand command in the onInit function of the product controller.  With the following expand statement we can use BusinessPartner/Longitude but not BusinessParter/BPAddress/Longitude.

Finally we are done and the map is displayed.

Further UI imporovements

If you like you can now continue improving the UI. To get an impression of what you can do now to make the application more user friendly, to introduce new features and embellish it without changing the backend application or the OData service, browse the following lines.

Selected Category in the Product Title

If the user has selected a category it may be helpful to display it in the title as the selection is some kind of filter. For this little help we need a lable in the product view:

The Product View

The Product Controller

And we have to compose the text dynamically in the product controller when we react on the navigation event.

As result we display the selected category in the title.

And the user knows now which category he has selected on the previous page.

Search of Products

The list of Notebooks is quite long and the user wants to search in this list. So we need a search form on the view and an additional filter. The category and search filter have to be treated separately foreas if the user changes the search, the category must remain selected.

The Product View

We add a search form in the product view and register a handler function.

The Product Controller

In the product controller we implement the handler.

So that the user can search in the product list.

Welcome page

Finally we want to embellish the application. Currently the form page is always visible. The user would expect to see only the categories without an ugly empty form. To achieve this target, we create a new view explaining the application to display it as long as the user does not have a product selected.

We start adding a new view. As the view is a welcome page, it is free style: place a picture in a new folder of your project and use it. Add some text.

The Welcome View

We do not need a controller - the links are local in the project and used directly in the view. But we have to add the new page in the index.html file and set it as initial default. So open the index.html file.

The index.html File

Beside the integration of the new view we added a stylesheet to embellish the welcome page. Both stylesheet and picture are moved to the referenced folder in the project structure.

And here we are with the result:

Now we are done with our end to end scenario. The next blog summarizes briefly the most important topics and gives an outlook of what you can expect in the next release: go to the next step.

Need for some background, visit the spaces BOPF Application Framework, SAP Gateway or SAPUI5 Developer Center.