Oracle Visual Builder Hands-on Lab - BYOL [HOL2752]
This project is maintained by venkspr
Build a complete web application using visual builder. In this lab we will be going over the basics of how start a new project and create a web-app using the visual builder setup wizard. Once the application is setup, we will be import some sample data and go through the process of creating a product catalog listing page.
Lets get started by logging into visual builder account and creating a new application. Use your oracle trial account. **Please use google chrome to develop the application **
**If you couldn’t signup for Oracle Trial Account please use the following enviornment **
oowlabenv
Important : If you using a shared the instance, please use the following convention to preventing confusion between applications.
**Application Name: (FirstName)(Last Initial) eg. JohnS **
Upon click on web application, you will now the ability to choose the default web application navigation template. Please select “Tabbed” under Navigation Style
Lets change the labels to
Step 7: Clicking on run should launch an additional browser tab with the basic app. It should look something like this
One of the first step in the project will be to load the business data that the application relies on to get started with the data model. In our case, we are going to load the product categories and product list as a data import into Visual Builder. This will create the necessary business objects, which can then be used in the UI layer.
The data manager should open up at this point. The screen will look something like this.
Click through the business objects import wizard.
Step 1 :
Step 2:
Step 3:
The business objects with the name Products should now be created. Click on the business object and observe the following sections
We will now add a list view to the products page to display the products that we just imported into the application as business object.
We will now set the scroll policy of the list view. This is to limit the number of records the listview fetches from the rest endpoint. This is important when working with large data sets.
For scroll policy fetch size, set a value of 25
Don’t set any value for scroll policy max count
Set scroll policy options scoller to
[[document.documentElement]]
Now click on the quick start icon and then click on the add data wizard
**Ensure that you select the following fields since they are required for the subsequent steps **
This will ensure that the price field is displayed as a currency instead of a number
This will display a rating gauge instead of a number for rating.
By default the image size for the products is 32 pixels. We want the image size to be larger. Click on image from the page structure and set the width and height of the image to 100
Congragulations ! You have build your first page. Click on run button to see how the page is rendered.
We would now like to add some screens to allow us to modify/edit the values being displayed in the list. Following are the steps to create an edit page.
Visual builder will automatically build a new page with the required logic and routing to create a seamless editing flow.
Observe the edit product page that was generated by Visual Builder
At this point there are now additional steps. You are ready to edit the contents of the list view.
There should be a Edit Products Button on top the page.
First click on one of the products to select it and then click on edit products button to reveal the edit products page.
Observe that Visual Builder is smart in picking up the appropriate control to display based on the data type. Make some edits and hit save. You should be take back to the products page and the page should get refreshed with the new values.
Now we will add a create products page, which will allow us to add new products to the product listing.
Upon saving you should be taken back to the products listing page. Observe that the product you just added is now visible in the product listing page.
You should now see a delete button on the screen. First select a list item and then hit delete to delete the item.
By default the listview stretches to take the whole width of the screen. We want to reduce the width of the listview to improve the user experience. There are a few options here
Lets get started by reducing the width.
Set the class of Flex-Row to “oj-md-6”
Now the width of the product list should shrink to 50% of the screen width.
Changing the layout to card view
The layout of the list view should change from a vertical layout to a card layout as shown in the screen shot below.
Congratulations, you have completed lab 3 Click here to goto Lab 2