OIC/Visual Builder Cloud Service/1 → Creating a CRUD web application using VBCS in OIC

6 min readSep 6, 2023

This is a post on Visual Builder Cloud Service, highlighting creating a CRUD Web Application in OIC.

(1) Flow: [a] Start Page → [b] Submit Admission Page → [c] Update Admission Page → [d] Delete Action.

(2) Flow Description: Here we are creating a Web Application using VBCS which will support CRUD (Create, Retrieve, Update, Delete) on a Business Object. For this use case we have selected a scenario involving Admission process and taken Admission Business Object that consists of Student details. In the Web Application there will be a start page with data pertaining to Business Object displayed in tabular structure. There will be separate buttons (eg. Create/Submit, Update, Delete). On button clock for Create and Update, it will navigate the control from Start page to Create/Submit and Update Admission page respectively, where user can according provide necessary details to Create or Update the student details.

(3) Steps:

Open the Visual Builder and Click on the Create New button.
Enter application name as “StudentAdmissionAppl” and select Empty Application template.

Click on the Web Apps tile, “+ Web Application” button.

Application name as “AdmissionWebAppl” and Click on the Create button.

[a] Start Page:

Create the Admission Business Object type to hold the admission application data.
Click on the Business Objects from the left panel, click on the “+ Business Object” button. From the opened popup and enter the Label name as “AdmissionBO” and click on the Create button.

Click on the Fields tab, click on the “+New Field” button, enter “AdmissionType” as a label name and select String as a data type.
Then, click on the create button.

Complete list of new fields to create — Labels & corresponding data type:
AdmissionType-String, FirstName-String, LastName-String, MobileNum-Number, Email-String, Percentage-Number, Rank-Number, AmountPaid-Number, AdmissionDate-Date.

Go back to the web application and open main-start page.
From the Components pallet, inside Collections select Table and drop on the page.

Select the Table on the page, see the properties in the right side panel. Under the Quick Start, select Add Data.
The Add Data action allows to point source of data for Table.
Select the “AdmissionBO” under the Business Objects and select Next button.

Click the Finish button from the last screen. Once done, the page will look like below.

[b] Submit Admission Page:

Select the Table on the page again, see the properties from the right panel. Click on the Quick Start and Add Create Page.

Select the “AdmissionBO” under the Business Objects and select Next button.

Can add addition fields, eg. mobileNum and re-order fields.

Button label : Submit Admission
Page title : Create Student Admission
Page name : {default}

Change the label of each Input box. To change the label, select the input box, select General from right panel and change Label hint.

[c] Update Admission Page:

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.

Select the “AdmissionBO” under the Business Objects and select Next button.

Button label: Update Admission
Page title: Update Student Admission
Page name: {default}

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.

Test:

Test Create operation:

Let’s check if the page does the validation that we had put during the Business Object field level set up. We will try with “Mobile Number” more than 10 digits.