Skip to Content
avatar image
Former Member

Data Binding

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.

sap.jpg (158.0 kB)
Add comment
10|10000 characters needed characters exceeded

  • Get RSS Feed

2 Answers

  • Best Answer
    May 10, 2017 at 06:49 AM

    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.

    Add comment
    10|10000 characters needed characters exceeded

  • May 08, 2017 at 03:11 PM

    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.

    Add comment
    10|10000 characters needed characters exceeded