The Visual Builder Cloud Service Blog

Building your First VBCS Application

John Jullion-Ceccarelli
Product Manager

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

In this lesson, look at building our first app, the simple Expense Report app. We'll spend a fair amount of time reviewing the artifacts that are created and how we can customize them. 

Setting Up the Project

Throughout this series we will be working mostly on one project, Expense Reports. We will start small and eventually incorporate everything from complex server-side rules to Process Cloud Service flows. To start with, we will just import a project that contains the Business Objects and an empty web application.

Importing the Project

  1. Download this ZIP to your computer.
  2. Click Import > Import from File
  3. Drag the ExpenseReportStarting.zip file into the dialog
  4. Give the file any name you want, I suggest ExpenseReport YourName
  5. Click Import.

Adding the List

  1. Click the project to open it.
  2. In the left panel, click the Web Applications node. Then expand flows -> main and click main-start. The page opens in the Page Designer.
  3. In the list of components on the left, find the List View component. Then drag and drop it onto the page.
  4. Select the List View in the Page Designer. (If you have just dropped it in, it will be selected already.) Then open the Property Inspector and select the Quick Starts page.

    Quick Start panel
  5. Under Business Objects, select ExpenseReport and click Next.

  6. Select the second row template and click Next.

  7. Select these fields in the left panel of the wizard:
    • name
    • countryObject -> items -> item[i] -> name
    • amount
    • startDate
    • endDate

  8. Click Next. Leave the default settings in the Query panel of the wizard and click Finish.

Adding the Create Page

Now we will generate the Create page. Then we will fix up the UI generated by the Quickstart. Specifically, we are going to delete the Justification simple Input Text Field and replace it with an Input Text Area. You may be asking, why do I add a Problem Description field if I'm just going to delete it again? Why not generate the form without it and then add the field? The reason is that we want the Quickstart to generate the Type with the Justification field so it's fetched in the REST call. We could edit the Type to add Justification after it's been generated, but this is simpler.

  1. Select the List View in the Page Designer.
  2. In the QuickStart tab of the Property Inspector, click Add Create Page.

  3. In the Select Endpoint page, choose ExpenseReport from the Business Objects and click Next.
  4. Add these fields:
    • amount
    • country
    • description
    • endDate
    • justification
    • name
    • startDate
  5. Optionally change the Button Label and Page Title to better names.
  6. Click Finish.
  7. Open the Create page by switching into Live mode and clicking the Create button.

    Live Mode
  8. Select the Form Layout component. In the Property Inspector, set Max Columns to 2.
  9. Delete the Justification field. Add a Text Area field.
    Note: Be careful when selecting that you have selected the individual component and not the enclosing Form Layout. The Property Inspector tells you which component you have selected. If you accidentally delete something, use the Undo button to get it back.
  10. In the General tab of the Property Inspector, set the Text Area's Label Hint to Justification. Set the Rows property to 4.
  11. In the Data tab, set the Value property to {{ $page.variables.expenseReport.justification }}. You can manually type in the value or use the Expression Picker to fill it in automatically.

  12. Do the same for the Description field.
  13. Delete the Amount field. Drop a Currency field onto the page. Set its display name to Amount and in the Data tab set the Value Property to {{ $page.variables.expenseReport.amount }}.
  14. Rearrange the fields until your app looks like this:

Adding the Edit Page

Like with the Create Page, we are going to edit this page after it's been created. Note we can use variables and expressions anywhere, including in the <h1> title of the page.                  

  1. Go back to main-start tab in the editor.
  2. Select the List View then open the QuickStarts tab of the Property Inspector. Click Add Edit Page
  3. Select ExpenseReport for the on both the Read Endpoint and Update Endpoint pages of the wizard
  4. Add these fields:
    • amount
    • country
    • description
    • endDate
    • justification
    • name
    • startDate
    • id
  5. Click Finish. Open the Edit Page.
    Note: When you open a page that takes a mandatory input parameter, like the Edit page for an entry, the editor needs a value for the input parameter, otherwise it will show a 404 error in the editor. You can either switch into Live mode, select a record in the list, and click the Edit button, or you can open the Edit page from the list of pages and use the Input Parameter Buttonbutton and input an ID manually.
  6. Delete the id field.
  7. Click the Heading and in the Property Inspector change the Text to {{ "Expense Report " + $page.variables.expenseReport.id }}
  8. Fix up the rest of the page like we did with the Create page.

The next lesson in the Learning Path is Parent Child Master-Details 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.