Oracle by Example brandingCreate a Web Application in Visual Builder Studio

section 0Before You Begin

This 15-minute tutorial shows how to create a web application in the visual application project that you created in the previous tutorial, Create a Project for Visual Applications in Visual Builder Studio. It also shows how to populate the web application with business objects.

Background

Web and mobile applications in VB Studio take shape within the Designer, a rich graphical user interface that lets you design and develop your application by dragging and dropping components on a page. Each component depends on a business object for its data. A business object is just a resource -- like a purchase order or invoice -- that has fields to hold your application's data. It is similar to a database table, as it provides the structure for your data; in fact, business objects are stored in a database. Your application accesses these business objects through their REST endpoints.

In this tutorial, you'll create the Employee, Department, and Location business objects for the HR web application. Each business object has its own set of fields as shown here:

Description of vbsca_dbdiagram.png follows
Description of the illustration vbsca_dbdiagram.png

Once you have your business objects, you'll use them to build the HR web application in which every employee belongs to a department, and every department has a location. Your goal is to allow your users to add employee names and their departments, and to change that data when necessary.

Note: Although this tutorial shows you how to build an application using a business object, you can also build applications based on REST services or on databases like Oracle Database Cloud Service. The basic principles of creating applications are the same, no matter what form your data takes.

What Do You Need?

  • Access to VB Studio
  • A supported browser (Google Chrome is recommended)
  • Completion of the previous tutorial

section 1Create a web application

Let's add your first web app to the HR Visual Application that you created in the previous tutorial. A visual application is a container for all your web and mobile applications. In this tutorial, we'll add a single web app to your visual application, but you could have more than one, even both web and mobile apps in the same visual application.

  1. On the Project Home page, click HR Visual Application under Workspaces.

    The visual application opens on the Designer's Welcome page.

    Description of visual_app_welcome.png follows
    Description of the illustration visual_app_welcome.png

    The Welcome page contains a set of tiles in three groups: Connect to Data, Create Apps, and Add Artifacts.

    On the far left are icons representing Mobile Applications, Web Applications, Services, Business Objects, Components, Processes, Source View, and Git Panel.

    Take note of the header elements:

    Description of header.png follows
    Description of the illustration header.png

    On the left is the name of your current workspace HR Visual Application; next to it is the project's Git repository and the branch currently associated with your workspace tutorial-hr-project.git / hrbranch. Click each option to see other actions that you can perform from here. Clicking Go to Project Page icon will take you back to the Project Home page.

    Elements on the right let you perform various other actions. For example, you can undo your most recent change, redo a change after clicking Undo, or search the Git repository for a file. In this series, we'll mostly use the options to preview a page and publish changes.

  2. We want to create a web application, so under Create Apps, let's click the Web Apps tile.

    The Web Apps pane opens in the navigator.

    Description of web_apps.png follows
    Description of the illustration web_apps.png
  3. Click + Web Application (or click the + sign at the top of the pane).
  4. In the Create Web Application window, enter hrwebapp as the Application Name. (You can specify uppercase as well as lowercase characters in the application name, but the name is converted to lowercase.) Leave the Navigation Style set to the default, None, and click Create.

    The application opens on the main-start page, which is automatically created for you. This is also the default name assigned to your application's home page. (If you run into the This dot says that you have made some changes message, ignore it; we'll explore Git changes in a later tutorial.)

    Description of designer.png follows
    Description of the illustration designer.png

    What you see under the main-start tab is your application's main work area. Just under main-start are several other tabs: Page Designer, Actions, Event Listeners, and so on. By default, the page opens in the Page Designer, showing the Components and the Structure tabs. To design your pages, you'll drag components from the Components palette to the canvas. Once you add components, the Structure view provides a structural view of the components on the canvas.

    On the far right is the Properties pane, which lets you view or edit a component's properties. When the entire page is selected (as it is now), the Properties pane shows the Page view, where you can choose a preferred page layout. Click Properties (the vertical tab located along the right-most edge of your browser) to hide the properties pane and expand your work area.

    In the Web Apps pane, expand the hrwebapp node, then the Flows and main nodes to get a tree view of your web application.

section 2Import a Location Business Object From a File

Let's create our first business object and get data for it by importing a CSV file. Every business object needs data associated with it, and there are many ways to do that, as you'll see. 

  1. Click Business Objects Business Objects icon in the navigator.
  2. Click + Business Object.
  3. In the New Business Object dialog box, enter Location in the Label field and click Create. Location is also filled in automatically as the Name value. When you create a business object, specify the singular form of the noun.
  4. Click Fields for the new Location business object. Every business object you create has five default fields: an id, plus fields that provide information on who created and updated the object and when.
    Description of location_bo_fields.png follows
    Description of the illustration location_bo_fields.png
  5. Click + Field to add a field specific to this business object. This is a very simple business object, so we'll only add one new field.
  6. In the pop-up box, enter:
    • Label: Name
    • Field Name: name (automatically populated)
    • Type: String String (selected by default)

    Click Create Field.

    Description of location_bo_name_field.png follows
    Description of the illustration location_bo_name_field.png
  7. In the Name field's properties, select Required under Constraints.
    Description of location_bo_name_required.png follows
    Description of the illustration location_bo_name_required.png

    A check mark is displayed in the Required column for the Name field.

  8. Click this link and save the Location.csv file to your file system. This file contains data representing four locations for the application.
  9. In the Business Objects pane, click Menu Menu icon and select Data Manager. The Data Manager is what you use to import data from a variety of sources.
    Description of location_bo_data_manager.png follows
    Description of the illustration location_bo_data_manager.png
  10. Click Import from File.
    Description of location_bo_data_manager_import.png follows
    Description of the illustration location_bo_data_manager_import.png
  11. In the Import Data dialog box, click the upload box, browse to select Location.csv, and click Import. When the import succeeds, click Close.
    Description of location_bo_import.png follows
    Description of the illustration location_bo_import.png
  12. In the Business Objects pane, click Location, then Data to view the locations that were added.
    Description of location_bo_data.png follows
    Description of the illustration location_bo_data.png

    In the next step, we'll associate these locations with the departments that are located on these floors.

section 3Create a Department Business Object

Let's now create the Department business object, which will have fields to show a department's name and location. We'll set up the department's Location field to pull in data from the Location business object we created in the previous step, but we won't import data for the Department business object in this step.

  1. In the Business Objects pane, click the + sign, then select Business Object.
    Description of department_bo.png follows
    Description of the illustration department_bo.png
  2. In the New Business Object dialog box, enter Department in the Label field and click Create. Department is also filled in automatically as the Name value.
  3. Click Fields, then + Field.
  4. In the pop-up box, enter:
    • Label: Name
    • Field Name: name (automatically populated)
    • Type: String String icon (selected by default)

    Click Create Field.

  5. In the Name field's properties, select Required under Constraints.

    A check mark is displayed in the Required column for the Name field.

  6. Click + Field again. In the pop-up box, enter or select:
    • Label: Location
    • Field Name: location (automatically populated)
    • Type: Reference Reference icon
    • Referenced Business Object: Location
    • Display Field: Name (automatically populated)

    Click Create Field.

    Description of department_bo_reference.png follows
    Description of the illustration department_bo_reference.png

    A Reference Type field refers to the key (the Id field) of another business object and links two business objects together. When you create a department now, you'll be able to select its Location (one of the floors). The Display Field indicates that Name (not Id) will be displayed.

section 4Create an Employee Business Object

In this step, we'll create the last business object we need, the Employee object, which contains employee names and identifying data. The Employee object also has a Reference type field that refers to the Department object.

  1. In the Business Objects pane, click the + sign and select Business Object.
  2. In the New Business Object dialog box, enter Employee in the Label field and click Create. Employee is also filled in automatically as the Name value.
  3. Click Fields, then + Field.
  4. In the pop-up box, enter:
    • Label: Name
    • Field Name: name (automatically populated)
    • Type: String String icon (selected by default)

    Click Create Field.

  5. In the Name field's properties, select Required under Constraints.
  6. Click + Field again, then enter or select:
    • Label: Department
    • Field Name: department (automatically populated)
    • Type: Reference Reference icon
    • Referenced Business Object: Department
    • Display Field: Name (automatically populated)

    Click Create Field.

  7. Click + Field again, then enter or select:
    • Label: Hire Date
    • Field Name: hireDate (automatically populated)
    • Type: Date Date icon

    Click Create Field.

  8. Click + Field again, then enter or select:
    • Label: Email
    • Field Name: email (automatically populated)
    • Type: Email Email icon

    Click Create Field.

  9. Click Endpoints to view the Resource APIs and REST endpoints created for the Employee business object. Because Employee refers to Department, you'll see endpoints for both objects if you expand the departmentObject node.
    Description of employee_bo_endpoints.png follows
    Description of the illustration employee_bo_endpoints.png
  10. Click the getall_Employee endpoint to see an endpoint viewer, where you can perform operations on the endpoint. For example, you can use the Test tab to test requests and view responses with specified parameter values.
    Description of employee_bo_endpoints_getall.png follows
    Description of the illustration employee_bo_endpoints_getall.png

    Click Back to Table icon Endpoints to return to the main Endpoints page.

  11. Expand the Resource APIs node to see the URLs for accessing the metadata and data for the business object, then minimize it again.

section 5Create a Business Object Diagram

Now that we have our business objects, let's create a diagram that provides a visual representation of business objects and their relationships.

  1. In the Business Objects pane, click Diagrams, then + Business Object Diagram.
    Description of bo_diagram.png follows
    Description of the illustration bo_diagram.png
  2. In the Create Business Object Diagram dialog box, enter HRDiagram in the Diagram name field and click Create.

    An empty diagram page opens.

  3. In the Properties pane, click Select All to see the three business objects you created and their relationships.
    Description of bo_diagram_selectall.png follows
    Description of the illustration bo_diagram_selectall.png

    The diagram looks just like the graphic in the Before You Begin section.

    So far, you've imported data only for the Location object. You'll add data for the Department and Employee business objects in later tutorials.