Creating an Application in Oracle Visual Builder Cloud Service

Before You Begin

This 10-minute tutorial shows you how to create a basic application in Oracle Visual Builder Cloud Service.

Background

Oracle Visual Builder Cloud Service is a visual development tool for creating web and mobile applications by simply dragging and dropping user interface (UI) components onto a page. You can create business objects with the click of a button, and you can add data by importing CSV files or XLS spreadsheets to your application. You don't need any programming experience to develop an application.

In this series of tutorials, you'll create a Human Resources (HR) application to list all employees and departments of your organization. Using the application, you can add, edit, or remove employees and departments from the database.

In this tutorial, you'll learn how to create the HR Application web application. You'll edit the properties of the application to add the application logo, modify tab icons, remove an unused menu, and update the copyright text.

The images in this tutorial show the standalone version of Oracle Visual Builder Cloud Service. If you are using the Oracle Integration Cloud version, you'll 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 the Web Application

In this section you'll learn how to create a web application with multiple tabs in Oracle Visual Builder Cloud Service.

1. In the web browser, log in to Oracle Visual Builder Cloud Service.
2. If you wish, click the video icon and take an interactive tour of the features of Oracle Visual Builder Cloud Service.



3. On the Landing page, click + New Web Application.
4. On the first page of the Create Application wizard, enter the following values:
   • Application Name: HR Application
   • Description: Tutorial application
   The Application ID text field is automatically populated based on the Application Name.

   

   There may be a delay before the Application ID is validated. After all the fields are populated, click Next.

5. On the next page, select the Oracle Applications Cloud UI template, and then click Next.

   

6. On the last page of the wizard, create the application tabs. By default, your application is populated with one tab, labeled Home. Replace the Home text in the Label field with Employees to rename the tab label. Click + Tab to create another tab and enter Departments as the label.

   

7. Click Finish.

Your HR Application is now created and opens in the Page Designer. If this is your first time here, you'll see a short tour that points out areas in the Page Designer that you'll use frequently. Click Next to continue to the next page of the tour or click Exit Tour to close it.



The Page Designer has a toolbar at the top and three main areas. On the left is the palette area, where the Components palette is displayed by default. In the center is the canvas, into which you can drag and drop components from the Components palette. On the right is the Property Inspector. You can click the Edit button on the right end of the toolbar to show or hide the Property Inspector.

Add the Application Logo

1. Click the Main Menu icon in the top-left corner of the Page Designer, then click Home to go to the Oracle Visual Builder Cloud Service Home page. Click HR Application 1.0 in the Home page.

   

2. If you're using a small-screen device such as a tablet or phone, click the corresponding screen type in the Screen Size toolbar to set the design mode width of the application page canvas area. The Page Designer automatically repositions items based on the selected canvas area.

   

3. Click the blue area of the page to move the focus away from the tab.

   

4. Right-click this image file and save it on your local machine. In the next step you'll specify the downloaded image file as the application logo.
5. In the Theme-Area Properties pane on the right, click Upload an image.

   

6. In the File Upload dialog box, browse, select the downloaded logo image file, and click Open.

   You may also drag and drop the image file into the COMPANY.LOGO drop area.

   After you upload the image, the Theme-Area Properties pane should look like this. You'll also see the logo on the application canvas.

   

Edit the Application Tab Icons

By default, all tabs of the application are assigned the Home icon. In this section you'll learn how to edit the main menu to change the icon of the Employees tab.

1. In the Theme-Area Properties pane, click Edit Menu.

   

2. In the Edit Main Menu dialog box, select Employees in the Menu list, and click the Home icon in Icon.

   

3. In the Image Gallery - Icon dialog box, click the Application Menu finger tab, and then click the small People icon. Click Select.

   

4. In the Edit Main Menu dialog, click Save.

   

Remove the Language Menu and Update the Copyright Text

1. In the Theme-Area Properties pane, deselect the Include language menu check box. The language menu allows your users to choose among different languages for the messages in your application. However, you'd need to provide translations yourself, and we're not covering this advanced feature here.

   

2. Also in the Theme-Area Properties pane, update the copyright text. Replace the existing text with the following.

   Copyright © My Company and/or its affiliates. All rights reserved.
   

   

   The application page should now look like this.

   

Want to Learn More?

• Using Oracle Visual Builder Cloud Service in the Oracle Help Center
• About the Components of Oracle Visual Builder Cloud Service in Using Oracle Visual Builder Cloud Service
• Known Issues for Oracle Visual Builder Cloud Service in the Oracle Help Center