Thursday, 25 July 2019

Create a simple Web application: Visual Builder Cloud Service(VBCS)

Oracle Visual Builder Cloud Service (VBCS) 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.

A business object is a resource, such as an invoice or purchase order. Like a database table, a business object provides the structure for data used with business processes. Business objects are stored in a database.


Use Case for this article

In this use case, we'll create a simple Loan Application as below:
  • Create a VBCS application
  • Create a Business Object for example Loan Business Object
  • Create a Page to List all Loan details
  • Create a Page to apply for the Loan
  • Create a Page to update the existing Loan
  • Delete the existing Loan
Post completion of this article, the main page will look like below


Let's get started with the actual implementation and see how to achieve this.

Create a VBCS application
  • Open the Visual Builder and Click on the Create New button from the right corner. Enter below details and click the Finish button to create a new application
    • Application Name: Enter application name as DemoApplication
    • Application Id: Application id will be populated automatically based on application name however same can be edited
    • Description: Enter the description as "This is demo application"
    • Application template: Select Empty Application template
  • Click on the Web Apps tile, + Web Application  button. On the application popup, enter the Application name as "LoanApplication" and Click on the Create button
  • Once application created, it will open the web app screen which will show the multiple panels as shown in the below screen shot

Create a Business Object for example Loan Business Object
  • Let's first create the Loan Business Object type to store the loan application data. To do so, Click on the Business Objects from the left panel, click on the + Business Object button. From the opened popup, enter the Label name as "LoanBO" and click on the Create button
  • Move to the Fields tab, click on the +New Field button, enter "LoanType" as a label name and select String as a data type. Once done click on the create button
  • Repeat the same steps and create variables as below:
Variable Name
Data Type
FirstName
String
LastName
String
Email
Email
Amount
Integer
Tenure
Integer


Create a page to the List of Loan details
  • Go back to the web application and open main-start page. From the Components pallet, search the Table and drop on the page
  • Select the Table on the page, see the properties in the right panel. Click on the Quick Start and Add Data. The Add Data action will allow to map source of data for Table. In our case, we'll show all the data which resides in our "LoanBO" Business Object
  • Post clicking on the Add Data, a new popup will get open. Select the LoanBO under the Business Objects and select Next button
  • Select below fields from left panel and click on Next button
    • firstName
    • lastName
    • email
    • loanType
    • tenure
    • amount
  • Click the Finish button from the last screen. Once finished, the page will look like below

Create a page to apply for the Loan
  • Select the Table on the page again, see the properties from the right panel. Click on the Quick Start and Add Create Page. The Add Create Page action will allow to create page to push data into the Business Objects. In our case, we'll use LoanBO Business Object to create a page
  • Post clicking on the Add Create Page, a new popup will get open. Select the LoanBO under the Business Objects and select Next button

  • Select below fields from left panel, Change the Button label to "Apply For Loan",Change Page title to "Apply Loan" and click on Finish button
    • firstName
    • lastName
    • email
    • loanType
    • tenure
    • amount
  • Once finished a new page will be created and will be shown as below
  • Change the label of each Input box. To change the label, select the input box, select General from right panel and change Label hint

Once finished a new page will be created automatically with name main-create-loan-bo and notice the "Apply For Loan" button on the main page main-start which will take to the page to apply the loan.

Create a page to update the existing Loan
  • Go back to the main-start page and select the Table. See the properties from the right panel. Click on the Quick Start and Add Edit Page. The Add Edit Page action will allow to edit the existing record of the Business Objects In our case, we'll use LoanBO Business Object to edit  a record
  • Post clicking on the Add Edit Page, a new popup will get open. Select the LoanBO under the Business Objects and select Next button
  • Select the LoanBO under the Business Objects and select Next button
  • Select below fields from left panel, Change the Button label to "Update", Change Page title to "Update Loan Details" and click on Finish button
    • firstName
    • lastName
    • email
    • loanType
    • tenure
    • amount

Once finished, a new page will be created automatically with name main-edit-loan-bo and notice the "Update" button on the main page main-start which will take to the page to edit the loan details.


Delete the existing Loan
  • Go back to the main-start page and select the Table. See the properties from the right panel. Click on the Quick Start and Add Delete Action. The Add Delete Action action will allow to delete the existing record of the Business Objects In our case, we'll use LoanBO Business Object to delete the record.
  • Post clicking on the Add Delete Action, a new popup will get open. Select the LoanBO under the Business Objects and select Finish button
Once finished notice a new button Delete Loan will be shown on the main page main-start. This will help to delete the existing loan details.


The application is complete as desired. Now start playing with the application.

  • To play with the application, click on the the Run button from the top panel


  • It will take us to the new window where the main page will be loaded as shown in the below screen shot. Since there is no loan as of now, hence the Loan Details table will be empty. Click on the Apply For Loan button


  • It will take to the new page where we can fill the loan  details. Once filled, click on the Apply button. You can see the record will be pushed into the LoanBO once applied


You can see the loan record details will be pushed into the LoanBO Business Object

  • Once clicked on the Apply button, it will redirected to the main page and Loan Details table will show the record which we submitted.


  • To update the loan details, select the loan detail record and click on the Update button which will take to the Update Loan Details page. Update the record and click on the Save button


  • The updated record will be shown on the Loan Details table
  • To delete the loan detail, select the record and click on the Delete Loan button. Once deleted the page will be refreshed automatically.



This is how the sample application can be designed in VBCS.

No comments:

Post a Comment