Oracle by Example brandingLaying out Components in Oracle Visual Builder Cloud Service

section 0Before You Begin

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

Make sure that you've created the HR Application application as described in the Create your first application module.

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 learn how to design application pages using Layout and Input components.

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 1Log In

To begin, you'll need the HR Application you created in the Create your first application module.

  1. In your 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 vbcsap_t1_s1.png

section 2Create a New Component

  1. In the Page Designer, open the page menu and select Create Employee.
    Page menu
    Description of the illustration vbcsap_t2_s1.png
  2. 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 the illustration vbcsap_t2_s2.png
  3. 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 the illustration vbcsap_t2_s3.png
  4. 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 the illustration vbcsap_t2_s4.png
  5. If necessary, drag the left and right widths of the fields to adjust their widths to 100%.
    Create Employee page
    Description of the illustration vbcsap_t2_s5.png

section 3Add a Component to Another Page

  1. Open the page menu and click Edit Employee.
    Page menu
    Description of the illustration vbcsap_t3_s1.png
  2. 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 the illustration vbcsap_t3_s2.png

section 4Add a Third Component

  1. Open the page menu and select the Create Department page.
  2. 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 the illustration vbcsap_t4_s1.png

section 5Add One Last Component

  1. Open the page menu and select the Edit Department page.
  2. 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 the illustration vbcsap_t5_s1.png