Editing an Application in Oracle Visual Builder Cloud Service

 

Before You Begin

In this tutorial, you'll learn how to lay out the pages and components of your application, and how to create a report page.

Time to Complete

Approximately 25 minutes

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.

Scenario

You'll edit the Human Resources (HR) application that you created in the Getting Started with Oracle Visual Builder Cloud Service tutorial, and learn how to:

  • Design the application pages using Layout and Input components

  • Edit properties of the components using Property Inspector

  • Create a report page in your application

You'll edit the HR Application schema to add two new fields, Job and Address, to the Employee business object as shown in the following diagram.

HR Schema Diagram
Description of this image

Context

Before you begin this tutorial, make sure that you've created the HR Application application as described in the Getting Started with Oracle Visual Builder Cloud Service tutorial.

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)

 

Managing Pages of an Application

In this section, you'll learn how to edit the design of the application pages using the Layout and the Input components. You'll also learn how to use the Property Inspector to edit the properties of the components, and how to add a new page to the application.

 

Using the Layout Components

In this section, you'll design the existing Create Employee, Edit Employee, Create Department, and Edit Department application pages using the Layout components.

  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 this image

  3. In the Page Designer, open the page menu and select Create Employee.

    Page menu
    Description of this image

  4. From the Components palette, drag and drop the Two-Column Layout component onto the Create Employee page below the Department field.

    Create Employee page
    Description of this image

  5. Drag and drop the Name field of the Create Employee page into the left column of the Two-Column Layout component.

    Create Employee page
    Description of this image

  6. Similarly, drag and drop the other fields of the page into the left and right columns of the Two-Column Layout component. Move the Email field to the left column, and move the Hire Date and Department fields to the right column.

    Create Employee page
    Description of this image

  7. If necessary, drag the left and right widths of the fields to adjust their widths to 100%.

    Create Employee page
    Description of this image

  8. Open the page menu and click Edit Employee.

    Page menu
    Description of this image

  9. Drag and drop the Two-Column Layout component onto the Edit Employee page and arrange the fields the same way you did for the Create Employee page.

    Edit Employee page
    Description of this image

  10. Open the page menu and select the Create Department page.

  11. Drag and drop a Two-Column Layout component onto the page. Move the Name field to the left column, and move the Location field to the right column.

    Create Department page
    Description of this image

  12. Open the page menu and select the Edit Department page.

  13. Drag and drop a Two-Column Layout component onto the page and arrange the fields the same way you did for the Create Department page.

    Edit Department page
    Description of this image
 

Using the Property Inspector

In this section, you'll use the Property Inspector to edit the properties of Employee business object pages.

You'll configure the Name, Hire Date, and Email input fields as Required fields. You'll also configure the Hire Date field to show more input options in the Date Picker dialog box.

  1. Open the page menu and select the Create Employee page.

  2. Select the Name field.

    Create Employee page
    Description of this image

  3. For a text field, the Property Inspector provides six tabs: Properties, Data, Actions, Responsive, Roles, and Style. Some components have fewer tabs. In the Properties pane, select the Required check box.

    Text Field Property Inspector
    Description of this image

    After you select the Required check box, an asterisk appears before the Name field.

    Create Employee page
    Description of this image

  4. Select the Hire Date field.

    Create Employee page
    Description of this image

  5. In the Properties tab of the Hire Date properties pane, select the Required check box.

    Date Property Inspector
    Description of this image

  6. Click More Date Picker Options.

    Date Picker Options in Date Property Inspector
    Description of this image

  7. Select the Show Today Button, Allow Month Change, and Allow Year Change check boxes.

    Date Picker Options in Date Property Inspector
    Description of this image

  8. Select the Email field.

    Create Employee page
    Description of this image

  9. In the Properties pane, select the Required check box.

    Email Property Inspector
    Description of this image

    After you select the Required check box, an asterisk appears before the Email field.

  10. Click the Create Employee header.

    Create Employee page
    Description of this image

  11. In Page Header Properties, change the Text value to Add Employee.

    Page Header Property Inspector
    Description of this image

    When you update the Text value of the Page Header, you edit the title of the page. The page name in the page menu and other places will remain Create Employee.

    The Create Employee page should look like this.

    Create Employee page
    Description of this image

  12. Open the page menu and click Edit Employee.

  13. Edit the properties of the Name and Hire Date fields of the Edit Employee page the same way you edited them for the Create Employee page (steps 2-7).

    Edit Employee page
    Description of this image

  14. Select the Email field.

    Edit Employee page
    Description of this image

  15. In the Email Properties pane, select the Read-only check box.

    Typically, an email address once assigned to an employee is not changed.

    Email Property Inspector
    Description of this image

  16. Open the page menu and select the Edit Department page.

  17. Select the Name field.

    Edit Department page
    Description of this image

  18. In the Text Field Properties pane, select the Required check box.

    Text Field Property Inspector
    Description of this image

    You already configured the Name field of the Create Department page as Required in the Getting Started with Oracle Visual Builder Cloud Service tutorial.

  19. Click the page header, then click the Responsive tab.

    Responsive tab
    Description of this image

  20. For a page header, the only responsive property you can set for the device canvas areas is whether the component is visible or not. Click the two fields on the page and verify that visibility is the only available component for them, too.

    Responsive tab for Text Field
    Description of this image

  21. Open the page menu and select the Employees page.

  22. Click in the table and view the Responsive properties for the Table component. You can change the table from a standard view to a row view. You can change the visibility of each column and of the table as a whole.

    Responsive tab for Table
    Description of this image

  23. Select Phone Portrait from the Set Properties For drop-down list and notice that most columns are not visible in the canvas area. Deselect the Email and Hire Date options so that only the Name and Department columns are displayed.

    Responsive tab for Phone Portrait
    Description of this image

  24. Click Tablet landscape to return to the canvas view you were using. All the columns are visible again.

    Tablet Landscape tab
    Description of this image
 

Adding a Page to an Application

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

  1. Open the page menu and click New Page.

    Page menu
    Description of this image

  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 image

    Click Next.

  3. Select Department as the page's associated business object.

    Create Page wizard
    Description of this image

  4. Click Create.

  5. In the Department-Employees Report page, open the Components palette if it is not already open.

    Components palette
    Description of this image

  6. Drag and drop a Two-Column Layout component onto the report page.

    Department-Employees Report page
    Description of this image

  7. 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 image

  8. 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 image

    Click the OK icon to save the details.

  9. 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 image

  10. 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 image

    Click the OK icon to save the details.

  11. Drag and drop a Table component onto the report page below the Two-Column Layout component.

    Department-Employees Report page
    Description of this image

  12. In the Data page of the Table Creation wizard, select Employee.

    Data page of Table Creation wizard
    Description of this image

  13. 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 image

  14. 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 image

  15. In the Options page, click the On toggle button of Query.

    Options page of Table Creation wizard
    Description of this image

  16. 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 image

  17. 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 image

  18. Click Finish.

    The Department-Employees Report page should look like this.

    Department-Employees Report page
    Description of this image

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

  19. Open the Page menu and select Departments.

  20. 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 image

  21. In the Actions tab, click + Add Action.

    Actions tab of Table Property Inspector
    Description of this image

  22. Click the predefined action View Department.

    Actions tab of Table Property Inspector
    Description of this image

    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 image

  23. Click the Test Application button in the toolbar.

  24. In the Departments page, click a department Name link to view all employees of the selected department.

    Test Application mode
    Description of this image

    Click Back to Designer to return to the Page Designer.

 

Want to Learn More?