Getting Started with Oracle Visual Builder Cloud Service

1. Click the icon in the top-left corner of the Page Designer, then click Home to go to the Oracle Visual Builder Cloud Service Home page. Click HR Application 1.0 in the Home page.

   

2. If you're using a small screen device such as a tablet or phone, click the corresponding screen type in the Screen Size toolbar to set the design mode width of the application page canvas area.

   The Page Designer automatically repositions items based on the selected canvas area.

   

3. Click the blue area of the page to move the focus away from the tab.

   

4. Right-click the following image file and save it on your local machine. In the next step you'll specify the downloaded image file as the application logo.

   

5. In the Theme-Area Properties pane on the right, click Upload an image.

   

6. In the File Upload dialog box, browse, select the downloaded logo image file, and click Open.

   You may also drag and drop the image file into the COMPANY.LOGO drop area.

   After you upload the image, the Theme-Area Properties pane should look like this. You'll also see the logo on the application canvas.

   

By default, all tabs of the application are assigned the Home icon. In this section you'll learn how to edit the main menu to change the icon of the Employees tab. You'll also remove a menu that your application won't be using.

1. In the Theme-Area Properties pane, click Edit Menu.

   

2. In the Edit Main Menu dialog box, select Employees in the Menu list, and click the Home icon in Icon.

   

3. In the Image Gallery - Icon dialog box, click the Application Menu finger tab, and then click the small People icon.

   

   Click Select.

4. In the Edit Main Menu dialog, click Save.

   

5. In the Theme-Area Properties pane, deselect the Include language menu check box. The language menu allows your users to choose among different languages for the messages in your application. However, you'd need to provide translations yourself, and we're not covering this advanced feature here.

   

In this section you'll learn how to update the default copyright text of the application.

1. In the Theme-Area Properties pane, update the copyright text.

   Replace the existing text with the following.

   Copyright © My Company and/or its affiliates. All rights reserved.

   

   The application page should now look like this.

   

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.

   

2. Click + New Business Object.

   

3. In the pop-up box, enter Department in the Business Object Label field. The Business Object ID field is filled in automatically.

   

4. Click the icon.

   The Department business object is created with several default fields.

   

5. Click + New Field.

   

6. In the pop-up box, enter the following:

   • Default Display Label: Name

   • Field ID: name (automatically populated)

   • Field Data Type: Text (selected by default)

   

   Click the 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

   • Field ID: ref2Location(automatically populated)

   • Lookup Object: Select Create New (if necessary) and enter Locations in the Lookup Label field.

   

8. Click Define Lookup Values.

   

9. In Locations Lookups, click + Add Lookup Value three times and enter the following values one by one. Click the icon after you have entered all three values. If you make a mistake, you can click the icon in the row to remove the value, or drag the icon to change the order.

   • Lookup Label: Floor 1

   • Lookup Label: Floor 2

   • Lookup Label: Floor 3

   

   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.

   

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. Open the page menu and select the Departments page.

   

2. In the Page Designer, click the Components palette.

   

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.

   

4. In the Data page of the Table Creation wizard, click the Department business object.

   

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.

   

6. Click .

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.

   

   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 .

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.

   

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

   

10. Open the page menu to see the new Create Department and Edit Department form pages created for the Department business object.

    

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

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.

   

2. In the Collection group of the Components palette, click the Table component and drag and drop it onto the Employees page.

   

3. In the Data page of the Table Creation wizard, click + New Business Object.

   

4. In the pop-up box, enter Employee as the business object label, and click the icon.

   

5. In the Mapping page of the Table Creation wizard, click + New Field.

   

6. In the pop-up box, enter the following:

   • Default Display Label: Name

   • Field ID: name (automatically populated)

   • Field Data Type: Text (selected by default)

   

   Click the icon to create the field.

   After you click the 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

   

   Click the 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

   

   Click the 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

   • Field ID: ref2Department (automatically populated)

   • Reference Business Object: Department

   • Default Displayed Field: Name

     

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

   

10. Click .

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.

    

12. Click .

13. In the Options page of the Table Creation wizard, enter text like the following in the Table Summary text area.

    The Employees table shows the name, email address, hire date, and department of each employee.
    

    Click Finish.

    

    The Employees page of your application should look like this.

    

14. Open the page menu to see the new Create Employee and Edit Employee pages created for the Employee business object.

    

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

Use the Live View to test the runtime behavior of the application in the Page Designer itself. You can also edit the properties of the components in the Live view without switching to the Design view.

1. In the toolbar, click the button.

   

   Tip: On a Windows machine, you can toggle between the Live view and Design view by pressing the Ctrl key.

2. Click the Departments tab.

   

3. To see the Create Department page, click Create.

   

4. In the Create Department page, press the Ctrl key on the keyboard and click the Name text box, then release the Ctrl key. A dotted line appears around the Name label and field, and the Text Field property sheet is displayed.

5. In the Properties pane of the Name text field, select the Required check box. The Name text field label now has an asterisk (*).

   

6. Click the Name field and enter the following in the Name and Location fields:

   • Name: Administration

   • Location: Select Floor 1 from the list.

   

7. Click Save and Close to return to the Departments page. A success message appears briefly.

   The Departments page table now shows the record you have entered.

   

8. Click the button to return to the Design view.

Use the Test Application mode to test the runtime behavior of the entire application and add the sample data.

1. In the toolbar, click the icon.

   

2. In the Test environment, click the Departments tab if you aren't already on that page.

   

3. Click Create to open the Create Department page.

   

4. In the Create Department page, enter the following one by one. For each, click Save and Close, then click Create again. A success message appears briefly after each entry.

   Name	Location
   Marketing	Floor 2
   Purchasing	Floor 3
   Human Resources	Floor 1
   IT	Floor 2
   Sales	Floor 3

   When you've finished, the Departments page looks like this.

   

5. To close the Test Application mode and return to the Page Designer, click the Back to Designer button in the upper left corner.