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

In this lesson we will look at another popular Master-Detail pattern, which is the single-page master-detail. Here we will create a new page that shows a list of ExpenseReport names on the left and some details of a selected report on the right.

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.

Creating the Administration Page

  1. In the Web Apps panel, expand the flows > administration and click administration-start.
  2. Drop a List View on the page. Use the Add Data Quickstart to bind the list to the ExpenseReport business object and display the name and amount fields. See Building Your First VBCS Application for detailed instructions. 
  3. Shrink the List View to only take the left third of the page. You resize components by dragging the little resize handler on the edges of the component.



    Because the list is loading the entire set of data (we haven't set up pagination yet) you'll have to scroll down to see it. If you don't have enough horizontal space to see the whole list, you can shrink the designer by clicking the zoom button in the toolbar.



    You can play with the formatting, like removing the name label and expanding the field to take up the full width of the list.
  4. Go to the Variables panel for administration-start.
  5. In the Types tab, create a Type from Endpoint based on the GET /ExpenseReport/{ExpenseReport_Id} endpoint.
    Choose Type
  6. Add the name, amount, startDate, and endDate fields to the Type and click Finish.
  7. Switch back to the Variables tab and add a variable called selectedReport of type get_ExpenseReport.
  8. Switch back to the Designer tab and drag a Form Layout on the right side of the List.
  9. Drag and configure the following components into the form:
    Component Display Text Bound to Property
    Input Text Name name
    Currency Amount amount
    Input Date Start Date startDate
    Input Date End Date endDate
  10. Make all of the components Read Only by selecting them and clicking the Read Only checkbox in the Property Inspector.
  11. Select the List View. In the General tab of the Property Inspector switch Selection Mode to single.
  12. In the Events tab of the Property Inspector, click New Event > New Custom Event. 
  13. Type first in the search box and select first-selected-item. The first-selected-item event passes both the key of the selected row and the data, so we won't have to make a second REST call to fetch the data to populate the form. Click Select.


     
  14. Click New Action Chain.
  15. Drop an Assign Variables action to the chain. Click the Assign link next to Variables. 
  16. Select selecteReport in the right panel and map it to $chain.variables.firstSelectedItem.data. Set the mapping to be an Expression. Make sure to remove any surrounding quotes that the wizard enters when you switch from Static Content to Expression.


     
  17. Right now our ServiceDataProvider (SDP) is only fetching id, name and amount, since that's what's in the list. But our form also displays startDate and endDate. So we have to modify the SDP to also fetch these values. We do so by modifying the SDP's type. Open the administration-start page's Variables tab. Click the Types tab, then click Edit form Endpoint. Select startDate and endDate and click Finish.
  18. Switch into Live mode and test selecting your different pages.

The next lesson in the Learning Path is Pagination in VBCS Applications.