Oracle by Example brandingCreating Business Objects in Oracle Visual Builder Cloud Service

section 0Before You Begin

This 15-minute tutorial shows you how to add business objects and table components to the application pages. You'll create Employee and Department business objects, and you'll create application form pages to add, edit, and view the data in those objects.

Background

A business object is a resource, such as an invoice or purchase order, similar to a database table; it has fields that hold the data for your application. Like a database table, a business object provides the structure for data used with business processes. Business objects are stored in a database.

Commonly, you display data in a business object using an HTML table. There are two main ways to create and display a business object:

  • Use the Data palette to create the business object, then use the Components palette to add the HTML table
  • Use the Components palette to add the HTML table, and create the business object as part of this process

In this section, you'll learn how to use both ways:

  • Create a Department business object using the Data palette and add fields to it
  • Add a table to the Departments page that will show the data of the Department business object
  • Create an Employee business object by dragging and dropping a Table component from the Components palette onto the Employees page and use the Table Creation wizard to add fields to it

You'll create the business objects shown in this diagram.

Data palette
Description of the illustration vbcscb_dbdiagram.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 1Create a Business Object from the Data Palette

In this section you'll use the Data palette to create the Department business object with the fields Name and Location.

  1. In the Page Designer, click the Data palette. This palette lets you create and manage your application's business objects.
    Data palette
    Description of the illustration vbcscb_t1_s1.png
  2. Click + New Business Object.
    New Business Object button in the Data palette
    Description of the illustration vbcscb_t1_s2.png
  3. In the pop-up box, enter Department in the Business Object Label field. The Business Object ID field is filled in automatically.
    New Business Object pop-up box in the Data palette
    Description of the illustration vbcscb_t1_s3.png
  4. Click the OK OK icon. The Department business object is created with several default fields.
    Department business object in the Data palette
    Description of the illustration vbcscb_t1_s4.png
  5. Click + New Field.
    New Field button in the Data palette
    Description of the illustration vbcscb_t1_s5.png
  6. In the pop-up box, enter the following:
    • Default Display Label: Name
    • Field ID: name (automatically populated)
    • Field Data Type: Text Text (selected by default)
    Name field pop-up box
    Description of the illustration vbcscb_t1_s6.png

    Click the OK OK icon to create the field.

  7. Click + New Field and in the pop-up box, enter the following:
    • Default Display Label: Location
    • Field Data Type: Lookup Lookup
    • Field ID: ref2Location (automatically populated)
    • Lookup Object: Select Create New (if necessary) and enter Locations in the Lookup Label field.
    Lookup field pop-up box
    Description of the illustration vbcscb_t1_s7.png
  8. Click Define Lookup Values.
    Define Lookup Values link
    Description of the illustration vbcscb_t1_s8.png
  9. In Locations Lookups, click + Add Lookup Value three times and enter the following values one by one. Click the OK OK icon after you have entered all three values. If you make a mistake, you can click the Delete Delete icon in the row to remove the value, or drag the Handle Handle icon to change the order.
    • Lookup Label: Floor 1
    • Lookup Label: Floor 2
    • Lookup Label: Floor 3
    Locations Lookups pop-up box
    Description of the illustration vbcscb_t1_s9.png

    Once you add and save a lookup value, you can't delete it. However, you can use the Data Designer to add more values or make a value inactive.

    You have now created the Department business object with Name and Location fields.

    Data palette with Department business object
    Description of the illustration vbcscb_t1_s9_result.png

section 2Add a Business Object as a Table Component

Now that you've created the Department business object, you'll add a Table component to the Departments page and associate the Department business object with it. The table will show the data of the Department business object.

  1. In the breadcrumb context trail on the left of the toolbar, click the Employees link to open the page menu, and select the Departments page.
    Page menu
    Description of the illustration vbcscb_t2_s1.png

    The page menu lists all pages of the open application. You'll use the page menu to navigate between the application pages and create new pages.

  2. In the Page Designer, click the Components palette.
    Components palette
    Description of the illustration vbcscb_t2_s2.png
  3. In the Collection group of the Components palette, select the Table component and drag and drop it onto the canvas area of the Departments page.
    Dropping a Table component on the Departments page
    Description of the illustration vbcscb_t2_s3.png
  4. In the Data page of the Table Creation wizard, click the Department business object.
    Data page of the Table Creation wizard
    Description of the illustration vbcscb_t2_s4.png
  5. In the Mapping page of the Table Creation wizard, drag and drop the Name and Location fields into the Selected Fields drop area. Only the selected fields will be displayed in the table.
    Mapping page of the Table Creation wizard
    Description of the illustration vbcscb_t2_s5.png
  6. Click Next Next.
  7. In the Object Actions page of the Table Creation wizard, choose the actions and form pages that you want to be created for the business object. The Object Actions page controls which application pages will be created for the selected business object.

    Leave the default toggle settings at On for the Create, Edit, and Delete buttons.

    For the Details toggle button, click Off.

    Object Actions page of the Table Creation wizard
    Description of the illustration vbcscb_t2_s7.png

    After you enable the Create and Edit toggle buttons, the wizard adds a Create button above the table and creates form pages named Create Department and Edit Department for the Department business object. Because you have disabled the Details toggle button, the Details page will not be created for the Department business object. (You can create it later, however.)

  8. Click Next Next.
  9. In the Options page of the Table Creation wizard, enter text like this in the Table Summary text area. 
    The Departments table shows the name and location of each department.

    Click Finish.

    Options page of the Table Creation wizard
    Description of the illustration vbcscb_t2_s9.png

    The Departments page of your application should look like this. The Actions menu on the right lets you edit or delete a department.

    Departments page with table in Page Designer
    Description of the illustration vbcscb_t2_s9_result.png
  10. Open the page menu to see the new Create Department and Edit Department form pages created for the Department business object.
    Page menu
    Description of the illustration vbcscb_t2_s10.png

    Open the new pages and view the design and the default layout of the UI components.

section 3Create a Business Object When Adding a Table Component

In addition to creating a business object from the Data palette, you can create a business object when you drag and drop a Table component onto a page.

In this section you'll drag and drop a Table component onto the Employees page and create the Employee business object using the Table Creation wizard. Using the wizard, you'll create Name, Email, Hire Date, and Department fields for the Employee business object.

  1. Open the page menu and click Employees.
    Page menu
    Description of the illustration vbcscb_t3_s1.png
  2. In the Collection group of the Components palette, click the Table component and drag and drop it onto the Employees page.
    Dropping a Table component on the Employees page
    Description of the illustration vbcscb_t3_s2.png
  3. In the Data page of the Table Creation wizard, click + New Business Object.
    Data page of the Table Creation wizard
    Description of the illustration vbcscb_t3_s3.png
  4. In the pop-up box, enter Employee as the business object label, and click the OK OK icon.
    Data page of the Table Creation wizard
    Description of the illustration vbcscb_t3_s4.png
  5. In the Mapping page of the Table Creation wizard, click + New Field.
    Mapping page of the Table Creation wizard
    Description of the illustration vbcscb_t3_s5.png
  6. In the pop-up box, enter the following:
    • Default Display Label: Name
    • Field ID: name (automatically populated)
    • Field Data Type: Text Text (selected by default)
    Name field pop-up box
    Description of the illustration vbcscb_t3_s6.png

    Click the OK OK icon to create the field.

    After you click the OK OK icon, the Name field is automatically added to the Selected fields list.

  7. Click + New Field and enter the following in the pop-up box:
    • Default Display Label: Email
    • Field ID: email (automatically populated)
    • Field Data Type: Email Email (selected by default)
    Email field pop-up box
    Description of the illustration vbcscb_t3_s7.png

    Click the OK OK icon to create the field.

  8. Click + New Field and enter the following in the pop-up box:
    • Default Display Label: Hire Date
    • Field ID: hireDate (automatically populated)
    • Field Data Type: Date Date (selected by default)
    Date field pop-up box
    Description of the illustration vbcscb_t3_s8.png

    Click the OK OK icon to create the field.

  9. Click + New Field and enter the following in the pop-up box:
    • Default Display Label: Department
    • Field Data Type: Reference Reference (selected by default)
    • Field ID: ref2Department (automatically populated)
    • Reference Business Object: Department
    • Default Displayed Field: Name
    Reference field pop-up box
    Description of the illustration vbcscb_t3_s9.png

    Click the OK OK icon to create the field. The Mapping page shows the four new fields.

    Mapping page of the Table Creation wizard
    Description of the illustration vbcscb_t3_s9_result.png
  10. Click Next Next.
  11. In the Object Actions page of the Table Creation wizard, leave the Create, Edit, and Delete toggle buttons set to On. Click Off for the Details toggle button.
    Object Actions page of the Table Creation wizard
    Description of the illustration vbcscb_t3_s11.png
  12. Click Next Next.
  13. In the Options page of the Table Creation wizard, enter text like this in the Table Summary text area. 
    The Employees table shows the name, email address, hire date, and department of each employee.

    Click Finish.

    Options page of the Table Creation wizard
    Description of the illustration vbcscb_t3_s13.png

    The Employees page of your application should look like this.

    Employees page with table in Page Designer
    Description of the illustration vbcscb_t3_s13_result.png
  14. Open the page menu to see the new Create Employee and Edit Employee pages created for the Employee business object.
    Page menu
    Description of the illustration vbcscb_t3_s14.png

    Open the new pages and view their design and input component layout. Return to the Employees page when you've finished.

more informationWant to Learn More?