Oracle by Example brandingCreate a Simple Web Application for Charts in Oracle Visual Builder

section 0Before You Begin

This 10-minute tutorial shows you how to create a simple visual application and import business objects for the purpose of creating charts.

Background

Charts enable you to display your data visually, as an alternative to tables.

In this tutorial, you create a simple application and import data from a zip file. You'll use this application as the basis for learning about charts.

What Do You Need?

  • Access to Oracle Visual Builder
  • A supported browser

section 1Create a Web Application

  1. In the web browser, log in to Oracle Visual Builder if necessary.
  2. On the Visual Applications page, click New.
    Description of vbcsch1_cra_s2.png follows
    Description of the illustration vbcsch1_cra_s2.png
  3. In the Create Application dialog box, enter the following.
    • Application Name: Charts Application
    • Description: Charts tutorial application

    The Application ID text field is automatically populated as you type based on the Application Name. The Application template field is set to Empty Application.

  4. Click Finish.

    The application is created and opens on the Welcome page.

    Description of vbcsch1_cra_s4.png follows
    Description of the illustration vbcsch1_cra_s4.png
  5. Click the Web Apps tile, then click + Web Application (or click the + sign at the top of the pane).
  6. In the Create Web Application dialog box, enter chartwebapp in the Id field. Leave the Navigation Style set to the default, None, and then click Create.

    The application opens on the main-start page.


section 2Import Data for Three Business Objects

In this step, you'll import data from a zip file to create three business objects for the application. Instead of creating the business objects and fields one by one and then importing data for them, you'll import the business objects and data all at once.

  1. Click this link and download the chart_application.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.
  2. Click the Business Objects Business Objects icon tab.
  3. Click the Business Objects Menu Menu icon and select Data Manager.
    Description of vbcsch1_imp_s3.png follows
    Description of the illustration vbcsch1_imp_s3.png
  4. Click Import Business Objects.
  5. On the Upload File page of the wizard, click the box and select the chart_application.zip file.
  6. When the upload succeeds, click Next.
    Description of vbcsch1_imp_s6.png follows
    Description of the illustration vbcsch1_imp_s6.png
  7. On the Business Objects page, you'll find that three business objects were created: Region, Sales, and Summary. Click Next.
  8. On the Fields page, you'll need to make some changes. The Region business object is correct as is. Click Sales to display the fields for that object.
  9. In the first row (Region), click Number Number icon in the Type column and change the setting as follows:
    • Type: Reference Reference icon
    • Referenced Business Object: Region
    • Display Field: Name (automatically selected)

    Click OK OK icon.

    Description of vbcsch1_imp_s9.png follows
    Description of the illustration vbcsch1_imp_s9.png
  10. In the third row (Year), click Number Number icon in the Type column. Change the Type from Number to String String icon and click OK OK icon.
  11. Click Summary and change the Region field to type Reference, as you did for Sales.

    Here, the Year field is already set to String because some data values are not numeric.

  12. Click Finish.
  13. In the Applying Changes dialog box, click Close after the data import finishes successfully.
  14. Click the Region business object in the Navigator, then click the Data tab to view the imported data. Do the same for the Sales and Summary business objects. Sales and Summary have the same fields but different data.
  15. In the Business Objects pane, click +, then select Business Object Diagram.
  16. In the Create Business Object Diagram dialog box, enter ChartDiagram in the Diagram name field and click Create.
  17. In the Properties pane, click Select All to see the three business objects you created and their relationships.
    Description of vbcsch1_imp_s17.png follows
    Description of the illustration vbcsch1_imp_s17.png

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