Creating a Simple Application in Oracle Visual Builder Cloud Service

Before You Begin

This is the first tutorial in the Visualizing Data module. It takes approximately 15 minutes to complete.

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 create a simple application and import data. You'll use this application to as the basis for learning about charts and gauges.

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.

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)

Create an Application

In this step, you will create a simple application with three pages.

1. In the web browser, log in to Oracle Visual Builder Cloud Service.
2. On the Home page, click New Application and select Web.
3. In the Application Name page of the Create Application wizard, enter the following values:
   • Application Name: Charts Application
   • Description: Charts and gauges tutorial application

   The Application ID text field is automatically populated based on the Application Name.

   

   Click Next.
4. In the Application Template page of the Create Application wizard, select the Oracle Applications Cloud UI template (the default) and click Next.

   

5. In the Application Navigation page of the Create Application wizard, create the application tabs. By default, one tab with Home as its label is available. Replace the Home text in the Label field with Summary to rename the tab label. Click + Tab to create another label field and enter Sales Regions as the label.  Click + Tab to create a third label field and enter Sales Objectives as the label.

   

6. Click Finish. Your Charts Application is now created and opens in the Page Designer.

Add Business Objects

In this step, you'll use Data Palette of the Data Designer to create three business objects. These will be used by the charts and gauges you create in the other tutorials in this module.

1. If necessary, click the Main Menu icon in the top-left corner and select Page Designer.

   

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

   

3. Click + New Business Object.

   

4. In the pop-up box, enter Region.

   

5. Click the icon. The Region business object is created with some fields.

   

6. Click + New Field. In the pop-up box, enter the following details:
   • 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. In the pop-up box, enter or select the following details:
   • Default Display Label: Population
   • Field ID: population (automatically populated)
   • Field Data Type: Number

   

   Click the icon to create the field.
8. Click + New Business Object and create a Sales business object in the same way you created the Region business object (steps 3-5).
9. Click + New Field. In the pop-up box, enter the following details:
   • Default Display Label: Region
   • Field Data Type: Reference
   • Field ID: ref2Region (automatically populated)
   • Reference Business Object: Region (automatically populated)
   • Default Displayed Field: Name

   

   Click the icon to create the field.
10. Click + New Field. In the pop-up box, enter the following details:
    • Default Display Label: Year
    • Field ID: year (automatically populated)
    • Field Data Type: Number

    

    Click the icon to create the field.
11. Click + New Field. In the pop-up box, enter the following details:
    • Default Display Label: Sales
    • Field ID: sales (automatically populated)
    • Field Data Type: Currency

    

    Click the icon to create the field.
12. Click + New Business Object and create a Summary business object in the same way you created the Region business object (steps 3-5).
13. Click + New Field. In the pop-up box, enter the following details:
    • Default Display Label: Region
    • Field Data Type: Reference
    • Field ID: ref2Region (automatically populated)
    • Reference Business Object: Region (automatically populated)
    • Default Displayed Field: Name

    

    Click the icon to create the field.
14. Click + New Field. In the pop-up box, enter the following details:
    • Default Display Label: Year
    • Field ID: year (automatically populated)
    • Field Data Type: Text (selected by default)

    

    Click the icon to create the field.
15. Click + New Field. In the pop-up box, enter the following details:
    • Default Display Label: Sales
    • Field ID: sales (automatically populated)
    • Field Data Type: Currency

    

    Click the icon to create the field. You have now created the business objects and can import data.

Import Data

In this step, you will import data from a zip file to all business objects of the application.

Before you start, download the chart_cpplication.zip file to your machine. Right-click this link and choose Save As to download the zip file. The zip file contains CSV files for the business objects of the Charts Application. Feel free to review the contents of the zip file.

Note: You cannot add new fields to a schema or edit their properties by importing data from a file. The names and data types of columns in the imported data must match the names and data types of columns in the schema.

1. Click the Main Menu icon in the top-left corner and click Data Designer.

   

2. Click the Data Manager tile.

   

3. Ensure that Development is selected in the Database menu.

   

4. Click Import from File.

   

5. In the Confirm Import Data dialog, click Upload a file, browse, and select the chart_application.zip file.

   

6. Click Import.
7. In the Import from File dialog, click OK.

   

8. You have now imported data to the application, and can create charts and gauges that display that data.