Oracle by Example brandingEditing Business Objects with the Page Designer in Oracle Visual Builder Cloud Service

section 0Before You Begin

This 15 minute tutorial shows you how to edit your application's business objects using the page designer.

This is the first tutorial in the Working with business objects module. Read the tutorials sequentially.

Background

Oracle Visual Builder Cloud Service is a visual development tool for creating web and mobile applications by simply dragging and dropping user interface (UI) components onto a page. You can create business objects with the click of a button, and you can add data by importing CSV files or XLS spreadsheets to your application. You don't need any programming experience to develop an application.

In this series of tutorials, you will work with business objects in the Human Resources (HR) application that you created in the Create your first application module.

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 Application Builder Cloud Service for more information)

section 1Add a Field to a Business Object

In this section, you'll use the Data palette to add a Job list-of-values field to the Employee business object.

  1. In the web browser, log in to Oracle Visual Builder Cloud Service.
  2. On the Home page, click HR Application 1.0.
    Home page
    Description of the illustration vbcsebo_t1_s2.png
  3. Click the Data palette.
    Data palette
    Description of the illustration vbcsebo_t1_s3.png
  4. In the Business Object list, select Employee.
    Data palette
    Description of the illustration vbcsebo_t1_s4.png
  5. Click + New Field.
    Data palette
    Description of the illustration vbcsebo_t1_s5.png
  6. In the pop-up box, enter the following:
    • Default Display Label: Job
    • Field Data Type: Lookup Lookup
    • Field ID: ref2Job (automatically populated)
    • Lookup Object: If necessary, select Create New, and enter Jobs in the Lookup Label text field.
    Lookup field pop-up box
    Description of the illustration vbcsebo_t1_s6.png
  7. Click Define Lookup Values.
    Lookup field pop-up box
    Description of the illustration vbcsebo_t1_s7.png
  8. Click + Add Lookup Value six times and enter the following values one by one:
    • President
    • Vice President
    • Finance Manager
    • Accountant
    • Programmer
    • Resources Representative
    Add Lookup Value pop-up box
    Description of the illustration vbcsebo_t1_s8.png
    If you make a mistake, you can click the Delete icon in the row to remove the value, or drag the Handle icon to change the order. Once a lookup value is added and saved, it cannot be deleted. However, you can use the Data Designer to add more fields or make a field inactive.
  9. Click the OK icon. The Data palette shows the new Job field.
    Data palette
    Description of the illustration vbcsebo_t1_s9.png

section 2Use The New Field On A Page

After adding the Job field to the Employee business object, add the field to the Employee business object pages.

When you add a field to a business object page, you can drag and drop the field from the Data palette onto the page and choose the component type. Alternatively, you can drag and drop a component from the Components palette onto the page and then choose the business object field name.

  1. Open the page menu and select Create Employee.
  2. Select the Job field in the Data palette and drag and drop it onto the Create Employee page below the Department field.
    Data palette and Create Employee page
    Description of the illustration vbcsebo_t2_s2.png
  3. In the Component pop-up box, select Output Combo Box.
    Component pop-up box
    Description of the illustration vbcsebo_t2_s3.png
    The Create Employee page should look like this.
    Create Employee page
    Description of the illustration vbcsebo_t2_s3_result.png
  4. Open the page menu and select Edit Employee.
  5. Click the Components palette, then drag and drop the Combo Box component onto the Edit Employee page below the Department field.
    Components palette and Edit Employee page
    Description of the illustration vbcsebo_t2_s5.png
  6. In the pop-up box, enter the following:
    • Business Object Field:  Click the Existing toggle button
    • Field ID: Select ref2Job from the drop-down list
    • Label: Job (automatically populated)
    • Business Object: Employee (automatically populated)
    • Field Data Type: Lookup Lookup (automatically populated)
    Combo Box pop-up box
    Description of the illustration vbcsebo_t2_s6.png

    Click the OK icon to save the details.

  7. Open the page menu and select Employees.
  8. Select the Employees table component.
    Employees page
    Description of the illustration vbcsebo_t2_s8.png
  9. In the Table Properties pane, click the Data tab.
    Table property inspector
    Description of the illustration vbcsebo_t2_s9.png
  10. Click the Edit Icon icon next to Table Columns.
    Table property inspector
    Description of the illustration vbcsebo_t2_s10.png
  11. In the Select Table Columns dialog box, drag and drop the Job field into Table Columns and click Done.
    Select Table Columns dialog box
    Description of the illustration vbcsebo_t2_s11.png
  12. Verify that the Job column has been added to the Employees table.
    Employees page
    Description of the illustration vbcsebo_t2_s12.png
    As there is no data for the Job field, the column is empty. Don't enter any data now. You'll import data from CSV files in the next tutorial.

section 3Add A Field Using Drag And Drop

In this section, you'll create the Address field in the Employee business object. Instead of using the Data palette to create a field, you'll drag and drop a Text Area component from the Components palette onto the Create Employee and Edit Employee pages.

  1. Open the page menu and select Create Employee.
  2. From the Components palette, drag and drop the Text Area component onto the Create Employee page below the Two-Column component.
    Components palette and Create Employee page
    Description of the illustration vbcsebo_t3_s2.png
  3. In the pop-up box, enter the following:
    • Label: Address
    • Business Object: Employee (selected by default)
    • Business Object Field: New (selected by default)
    • Field ID: address(automatically populated)
    • Field Data Type: Text (selected by default)
    Text Area pop-up box
    Description of the illustration vbcsebo_t3_s3.png
    Click the OK icon to save the details.
  4. Drag the left and right widths of the text area field, as needed, to adjust it to 100%.
    Create Employee page
    Description of the illustration vbcsebo_t3_s4.png
  5. Click the Properties tab and, for the Text Area properties, enter the following:
    • Label Position: Select Top.
    • Placeholder: Employee Address
    • Number of Rows: 2
    Text Area Property Inspector
    Description of the illustration vbcsebo_t3_s5.png
  6. Click the Style tab.
    Text Area Style Tab
    Description of the illustration vbcsebo_t3_s6.png
  7. Set the Label Alignment to Left.
    Text Area Style Tab
    Description of the illustration vbcsebo_t3_s7.png
  8. Click the Data palette and see the Address field added to the list of fields.
    Data palette
    Description of the illustration vbcsebo_t3_s8.png
  9. Open the page menu and select Edit Employee.
  10. Open the Component palette and drag and drop the Text Area component onto the Edit Employee page below the Two-Column component.
    Edit Employee page
    Description of the illustration vbcsebo_t3_s10.png
  11. In the pop-up box, enter the following:
    • Business Object Field: Existing
    • Field ID: address
    • Label: Address (automatically populated)
    • Business Object: Employee (selected by default)
    • Field Data Type: Text (selected by default)
    Text Area pop-up box
    Description of the illustration vbcsebo_t3_s11.png
    Click the OK icon to save the details.
  12. Click the Properties tab and edit the Text Area properties (Label Position, Placeholder, and Number of Rows) as you did in the Add Employee page. Drag the left and right widths of the text area field, as needed, to adjust it to 100%. Click the Style tab and set the Label Alignment to Left. The Edit Employee page should look like this.
    Edit Employee page
    Description of the illustration vbcsebo_t3_s12.png
  13. Open the page menu and select Employees.
  14. Select the Employees table.
    Employees page
    Description of the illustration vbcsebo_t3_s14.png
  15. In the Table Properties pane, click the Data tab.
    Table property inspector
    Description of the illustration vbcsebo_t3_s15.png
  16. Click the Edit Icon icon next to Table Columns.
    Table property inspector
    Description of the illustration vbcsebo_t3_s16.png
  17. Drag and drop the Address field into Table Columns and click Done.
    Select Table Columns dialog box
    Description of the illustration vbcsebo_t3_s17.png
  18. Verify that the Address column has been added to the Employees table.
    Employees page
    Description of the illustration vbcsebo_t3_s18.png