Oracle by Example brandingAdding Pages in Oracle Visual Builder Cloud Service

section 0Before You Begin

This is the third and last tutorial in the Add components to your pages module. It takes approximately 15 minutes to complete.

Background

Oracle Visual Builder Cloud Service is a visual development tool for creating web and mobile applications by simply dragging and dropping UI components onto a page. You don't need any programming experience to develop an application.

In this tutorial, you'll add a Details type page to the HR Application. You'll then configure the Details page to show a Department-Employees report that uses a query to list all employees of the selected department.

The images in this tutorial sequence show the standalone version of Oracle Visual Builder Cloud Service. If you are using the Oracle Integration Cloud version, you will see an additional menu at the top of each page that lets you switch between Visual Builder and Integration Cloud.

Top menu
Description of the illustration vbcs_oic_menu.png

What Do You Need?

  • Access to Oracle Visual Builder Cloud Service
  • A supported browser (see Known Issues for Oracle Visual Builder Cloud Service for more information)

section 1Add a New Page

  1. Open the page menu and click New Page.
    Page menu
    Description of this illustration vbcsap_t1_s1.png
  2. On the first page of the Create Page wizard, enter the following:
    • Page Title: Department-Employees Report
    • Page Type: Details
    Create Page wizard
    Description of this illustration vbcsap_t1_s2.png
    Click Next.
  3. Select Department as the page's associated business object.
    Create Page wizard
    Description of this illustration vbcsap_t1_s3.png
  4. Click Create.

section 2Add A Field to Your New Page

  1. In the Department-Employees Report page, open the Components palette if it is not already open.
    Components palette
    Description of this illustration vbcsap_t2_s1.png
  2. Drag and drop a Two-Column Layout component onto the report page.
    Department-Employees Report page
    Description of this illustration vbcsap_t2_s2.png
  3. Drag a Text Field component and drop it into the left column of the Two-Column Layout component.
    Department-Employees Report page
    Description of this illustration vbcsap_t2_s3.png
  4. In the pop-up box, enter the following:
    • Business Object Field: Click the Existing toggle button
    • Business Object: Department (automatically populated)
    • Field ID: Select name from the drop-down list
    • Label: Update to Department Name
    Text Field pop-up box
    Description of this illustration vbcsap_t2_s4.png
    Click the OK icon to save the details.

section 3Add Another Component

  1. Drag a Combo Box component and drop it into the right column of the Two-Column Layout component.
    Department-Employees Report page
    Description of this illustration vbcsap_t3_s1.png
  2. In the pop-up box, enter the following:
    • Business Object Field: Click the Existing toggle button
    • Business Object: Department (automatically populated)
    • Label: Location (automatically populated)
    • Field ID: ref2Location (automatically populated)
    Combo Box pop-up box
    Description of this illustration vbcsap_t3_s2.png
    Click the OK icon to save the details.

section 4Add A Table

You'll need a place to display information.

  1. Drag and drop a Table component onto the report page below the Two-Column Layout component.
    Department-Employees Report page
    Description of this illustration vbcsap_t4_s1.png
  2. In the Data page of the Table Creation wizard, select Employee.
    Data page of Table Creation wizard
    Description of this illustration vbcsap_t4_s2.png
  3. In the Mapping Page, drag and drop the Name and Email fields into the Selected area and click Next.
    Mapping page of Table Creation wizard
    Description of this illustration vbcsap_t4_s3.png
  4. In the Object Actions page, click Off for all default actions (Create, Edit, Delete, and Details) and click Next.
    Object Actions page of Table Creation wizard
    Description of this illustration vbcsap_t4_s4.png
  5. In the Options page, click the On toggle button of Query.
    Options page of Table Creation wizard
    Description of this illustration vbcsap_t4_s5.png
  6. In the first list, select Department. In the third list, select <Department record ID>. If an error message appears, you can safely ignore it.
    Options page of Table Creation wizard
    Description of this illustration vbcsap_t4_s6.png
  7. In the Table Summary field, enter text like this: 
    This table shows the name and email address of each employee in the department.
    Options page of Table Creation wizard
    Description of this illustration vbcsap_t4_s7.png
  8. Click Finish. The Department-Employees Report page should look like this.
    Department-Employees Report page
    Description of this illustration vbcsap_t4_s8.png

section 5Connect the Page

After creating the page, you must associate the page with an action that will open it.

  1. Open the Page menu and select Departments.
  2. Click the Name column of the Departments table and click the Actions tab in the Table Properties pane.
    Departments page and Actions tab
    Description of this illustration vbcsap_t5_s1.png
  3. In the Actions tab, click + Add Action.
    Actions tab of Table Property Inspector
    Description of this illustration vbcsap_t5_s2.png
  4. Click the predefined action View Department.
    Actions tab of Table Property Inspector
    Description of this illustration vbcsap_t5_s3.png
    In Live mode or in Test Application mode, clicking the Name column link in the Departments page will open the Department-Employees Report page that will list all employees of the selected department.
    Actions tab of Table Property Inspector
    Description of this illustration vbcsap_t5_s4.png
  5. Click the Test Application button in the toolbar.
  6. In the Departments page, click a department Name link to view all employees of the selected department.
    Test Application mode
    Description of this illustration vbcsap_t5_s5.png
    Click Back to Designer to return to the Page Designer.

more informationWant to Learn More?