The Visual Builder Cloud Service Blog

Parent-Child Master-Detail in VBCS

John Jullion-Ceccarelli
Product Manager

This blog is part of the series Visual Builder Cloud Service Learning Path.

In this lesson we create a Master-Detail view over Expense Reports and their child Line Item entries. 

Updating Your Project

This lesson builds on the Expense Report project we have been using in the VBCS Learning Path. 

  1. Download this ZIP file to your computer.
  2. If you are continuing from a previous chapter and already have the Expense Report project, open the project, click Import, and drag and drop the file into the dialog.

  3. If you are starting at this lab and not continuing from a previous lab, go to the Visual Builder home screen, click Import > Import from File, and upload the ZIP there.

Adding a Child Table

  1. Open your Edit Expense Report page. If you get a 404 when you open it, it means the page is missing the required context. Click the button, enter "1", and click Reload.
  2. Add a Heading between the form and the buttons and call it Line Items. 
  3. Change the level of the Heading to H2 in the Property Inspector.
  4. Add a List View below the heading.
  5. In the Property Inspector, click Add Data
  6. In the Choose an Endpoint tab, select the LineItem under Business Objects. Click Next.
  7. Select the second row template. Click Next.

  8. Choose the name and amount fields. Switch the amount field to display as Currency. Click Next.
  9. In the Define Query for the page, let's set the list to only show the line items for this expense report record. Click the gear icon  next to filterCriterion, then click Click to add condition.
  10. Set the condition to IF expenseReport equals ($eq) $variables.expenseReportId.

  1. Click Done, then click Finish.

Adding a New Line Item Form

  1. Go to the Variables panel of the Edit Expense Report page.
  2. Click the Types tab. Create a New Type from Endpoint.
  3. Select Business Objects > LineItem > POST /LineItem
    Create Type from Endpoint
  4. Click Next.
  5. Add the expenseReport, name, and amount fields.
  6. Click Finish.
  7. Click the Variable Tab and add a new variable called newLineItem of type create_LineItem

  8. Expand the newLineItem variable and select the expenseReport property.
  9. In the Property Inspector, change Default Value to {{ $page.variables.expenseReportId }}
  10. Go back to the Page Designer by clicking .
  11. Drop a Form Layout component between the Line Items heading and the list of Line Items. In the Property Inspector, set the Label Edge to top.

  12. Add an Input Text component and a Currency component to the Form Layout. Change the display labels to Name on the Input Text and Amount on the Currency component.
  13. Select the Name field in the Page Designer. In the Data tab of the Property Inspector, bind Value to {{ $variables.newLineItem.name }}.
  14. Do the same to bind the Amount field to {{ $variables.newLineItem.amount }}
  15. Add a Button below the Form Layout. Change the Text to Add.
  16. Select the Button and click the Events tab of the Property Inspector. Click New Event > Quick Start: 'ojAction'

  17. Drop a Call REST Endpoint action under Start. Click Select Endpoint and select Business Objects > LineItem > POST /LineItem.
  18. Under Parameters in the Property Editor for the Call REST Endpoint action, click body. Map newLineItem on the left panel to body on the right panel. Click Save.
  19. Drag a Fire Data Provider Event under the Call REST Endpoint action. Select {{ $page.variables.lineItemListSDP }} as the Event Target. Set Refresh as the Type.

  20. Drag a Reset Variables action to under the Fire Data Provider Event action. Set $page.variables.newLineItem as the Variables to Rest.

  21. Run and test the app.

The next lesson in the Learning Path is Single-Page Master Detail in VBCS.

Be the first to comment

Comments ( 0 )
Please enter your name.Please provide a valid email address.Please enter a comment.CAPTCHA challenge response provided was incorrect. Please try again.