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 -> my-expense-reports and click my-expense-reports-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. Change the display for startDate and endDate to Input Date.
  9. Change the display for amount to Currency.
  10. Click Next. Leave the default settings in the Query panel of the wizard and click Finish. The list in the Page Designer reloads with data.
  11. Click the Name label next to the country name and in the Property Inspector, change the Text property to Country.


Adding the Create Page

Now we will generate the Create page.

  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. Change description and justification to display as Text Areas.
  6. Change startDate and endDate to display as DateTime. Change amount to display as Currency.
  7. Optionally change the Button Label and Page Title to better names.
  8. Click Finish.
  9. Open the Create page by switching into Live mode and clicking the Create button.

  10. Switch back to Design mode and select the Form Layout component. In the Property Inspector, set Max Columns to 2.
  11. Select the Description field and set the Rows property to 4. Do the same for Justification.
  12. Rearrange the fields until your app looks like this:

Adding the Edit Page          

  1. Go back to my-expense-reports-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 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. Switch the description and justification fields to display as Text Area like you did in the Create page. Also update amount to be a Currency and endDate and startDate to be DateTimes.
  6. Optionally change the Button Label and Page Title to friendlier text (i.e. "Edit" and "Edit Expense Report"). 
  7. 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.
  8. Delete the id field.
  9. Click the Heading and in the Property Inspector change the Text to {{ "Expense Report " + $page.variables.expenseReport.id }}
  10. 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.

Join the discussion

Comments ( 4 )
  • Christo Tuesday, November 5, 2019
    Missing file for BLOG - Building your first BVCS Application
  • John Ceccarelli Tuesday, November 5, 2019
    Fixed broken link to project
  • Ankit Raj Wednesday, November 11, 2020
    Getting error
    "Error loading module flows/my-expense-reports/pages/my-expense-reports-start"
  • Shay Shmeltzer Wednesday, November 11, 2020
    Ankit - for issues please post your questions with info on what you did on our forum:
Please enter your name.Please provide a valid email address.Please enter a comment.CAPTCHA challenge response provided was incorrect. Please try again.