Data Binding

[Former Member]

Hello Friends,

I have a northwind database. Now I want to display the details of each categories(in detail view). How to do that? I also have attached an image of that.

[saurabh_vakil · Accepted solution]

For getting the product details first declare a press event for the listitem you are using to display the products. In this event from the selected item's context get the product ID.

Create a productdetail view and in the manifest.json file add a route to this view - ensure that you add a parameter to this route so that while triggering navigation from detail view to product view you can pass as a parameter the product ID (something like

"pattern": "productDetail/{productID}").

In the product detail controller inside the _onObjectMatched function get this product ID and bind the view to the path /serviceURL/Products(productID). This will let you bind the product details to UI controls on the productdetail view. This will conceptually be very similar to how on selecting category value in the master view the relevant category details including the products are being displayed in the detail view.

[saurabh_vakil]

Follow the below steps:

1. If you haven't already done so, create a destination on SAP Cloud Portal for the Northwind service. Follow How to use Northwind OData service with SAP Web IDE
2. In Web IDE create a project using the Master-Detail template.
3. In the data connection step select the destination created in step 1 and enter the service URL as /V2/Northwind/Northwind.svc/
4. In the template customization step select the Categories object collection and map the required fields to the UI.

With these steps you should be able to see the categories list and details of the selected category as shown in the attached image.

[Former Member]

Thank you Saurabh.

[Former Member]

I got this output. But what I'm asking is I want to display the details for each product. How to do that? Help me regarding this.