Oracle by Example brandingTesting the Oracle Visual Builder Cloud Service Application and Adding Data

section 0Before You Begin

This 10-minute tutorial shows you how to test your application and add sample data in the Test environment and in the Live View of the Page Designer.

Background

The sample data that you enter while testing the application is saved in the Development database, which you can use to check the behavior of your application.

When you stage and then publish your application, you use the Stage and Live databases instead of the Development database. You can transfer data from one database to another.

In this section you'll learn to:

  • Use the Live View of the Page Designer
  • Add sample data in the Live View
  • Switch to the Test Application mode
  • Add sample data in the Test Application mode

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 1Add Data using the Live View

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 Design-Live toggle Design-Live toggle button button. This button lets you switch from the Design view to the Live view of the Page Designer and check the runtime behavior of the application and its components.
    Design-Live toggle button in Page Designer toolbar
    Description of the illustration vbcsta_t1_s1.png

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

  2. Click the Departments tab.
    Departments tab
    Description of the illustration vbcsta_t1_s2.png
  3. To see the Create Department page, click Create.
    Create button on the Departments page
    Description of the illustration vbcsta_t1_s3.png
  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 (*).
    Required check box for Name field
    Description of the illustration vbcsta_t1_s5.png
  6. Click the Name field and enter the following in the Name and Location fields:
    • Name: Administration
    • Location: Select Floor 1 from the list.
    Create Department page in Page Designer
    Description of the illustration vbcsta_t1_s6.png
  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.

    Departments table in Live view
    Description of the illustration vbcsta_t1_s7.png
  8. Click the Design-Live toggle Design-Live toggle button button to return to the Design view.

section 2Create Departments in Test Application Mode

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 Test Application Test Application button to preview the application in Test mode without the Page Designer tools.
    Test Application button
    Description of the illustration vbcsta_t2_s1.png
  2. In the Test environment, click the Departments tab if you aren't already on that page.
    Departments page in Test environment
    Description of the illustration vbcsta_t2_s2.png
  3. Click Create to open the Create Department page.
    Create Department page in Test environment
    Description of the illustration vbcsta_t2_s3.png
  4. On 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.

    Departments page with records
    Description of the illustration vbcsta_t2_s4.png
  5. To close the Test Application mode and return to the Page Designer, click the Back to Designer button in the upper left corner.
    Back to Designer button in Test environment
    Description of the illustration vbcsta_t2_s5.png

section 3Import Sample Data from a CSV File

Instead of adding data through the Create pages of the application, you can also import data to a business object from a CSV file or an XLS spreadsheet.

  1. Open a text editor (such as Notepad), copy the following text into a new text file, and save it as employee.csv. You'll import the data from the employee.csv file to the Employee business object. 
    id,creationDate,lastUpdateDate,createdBy,lastUpdatedBy,name,email,hire_Date,ref2Department
1,,,,,Elizabeth Davis,edavis@example.com,2003-06-17,1
2,,,,,James Miller,jmiller@example.com,2005-09-21,1
3,,,,,Jennifer Garcia,jgarcia@example.com,2001-01-13,2
4,,,,,Mark Williams,mwilliams@example.com,2006-01-03,3
5,,,,,Sarah Brown,sbrown@example.com,2007-05-21,2
6,,,,,David Smith,dsmith@example.com,2005-06-25,1
7,,,,,Karen Johnson,kjohnson@example.com,2006-02-05,2
8,,,,,Richard Wilson,rwilson@example.com,2007-02-07,3
9,,,,,Linda Jones,ljones@example.com,2002-08-17,1
  2. Click the Main Menu Main Menu icon in the top-left corner of the Page Designer.
    Main Menu
    Description of the illustration vbcsta_t3_s2.png
  3. In the menu, click Data Designer.
    Data Designer in Main Menu
    Description of the illustration vbcsta_t3_s3.png
  4. The Data Designer provides tools for managing your business objects and data.
    • The Business Objects page allows you to create business objects and to modify the fields and data in your business objects.
    • The Services page allows you to view details of the external REST services that are consumed by your application and to create business objects from the catalog of Oracle Cloud services that are associated with your Identity Domain.
    • The Data Manager page contains tools for copying data between your development, staging, and live databases and for importing and exporting data files.

    In the Data Designer page, click the Business Objects tile.

    Business Objects in Data Designer
    Description of the illustration vbcsta_t3_s4.png
  5. On the Business Objects page, click the Department business object if it's not already selected, then click the Data tab.
    Department Business Object in Data Designer
    Description of the illustration vbcsta_t3_s5.png
  6. Verify that the six departments you created are present.
    Data tab of Data Designer
    Description of the illustration vbcsta_t3_s6.png
  7. Click the Employee business object. You're on the Data page, which has no content.
    Data tab of Data Designer
    Description of the illustration vbcsta_t3_s7.png
  8. On the Data page of the Employee business object section, click the Import from File Import from File icon.
    Importing data from files in Data Designer
    Description of the illustration vbcsta_t3_s8.png
  9. In the Confirm Import Data dialog box, select the Replace option for Row Handling if it's not already selected. Then click the Upload a file link, browse, select the employee.csv file, and click Import.
    Confirm Import Data dialog box
    Description of the illustration vbcsta_t3_s9.png
  10. Click OK after the file has been successfully imported.
    Successful Import
    Description of the illustration vbcsta_t3_s10.png

    You'll see the imported data in the Data tab.

    Imported data in Data tab
    Description of the illustration vbcsta_t3_s10_result.png
  11. Click the Main Menu Main Menu icon in the top-left corner and select Page Designer from the list.
    Page Designer in Main Menu
    Description of the illustration vbcsta_t3_s11.png
  12. Open the Employees page from the page menu and, if necessary, reload (Ctrl-R) the page.

    The page shows the data you imported from the employee.csv file. The Actions menu on the right lets you edit or delete an employee.

    Employees page with data in Page Designer
    Description of the illustration vbcsta_t3_s12.png
  13. In the toolbar, click the Test Application Test Application button.

    The Employees page shows the imported data.

    Employees page in the Test environment
    Description of the illustration vbcsta_t3_s13.png
  14. The tutorial application is now ready and you can test it with the sample data. For example, you can try out the Actions menu.
    Actions menu in the Test environment
    Description of the illustration vbcsta_t3_s14.png

    Tip: You might need to do a hard refresh and clear the browser cache to see the latest data of the application.

  15. Click Back to Designer.
  16. (Optional) Click the user menu in the top right corner of Oracle Visual Builder Cloud Service and select Sign Out from the menu.
    Actions menu in the Test environment
    Description of the illustration vbcsta_t3_s16.png

    17. After creating and testing an application, you may want to edit the application pages and redesign them, or edit business objects and fields. To learn how, follow the Add components to your pages and Design your business objects modules of the Learning Path.

more informationWant to Learn More?