VBCS - Sample WEB application | Employee CRUD operation web application

Use case:

1. Create a web application
2. Create an Employee business object
3. Page to list all the employees.
4. Page to on board new employee
5. Page to view all employee details
6. Page to update an employee
7. Page to delete an employee

Steps in detail with screenshots:

Home >> Visual Builder

New Application

Provide application name >> Finish

Navigation hamburger >> Business Objects

Business Object

Provide Business Object Name

By default,  we have 5 fields:

Id, CreatedBy, CreationDate, LastUpdatedBy,LastUpdatedDate

Created new field: FirstName, LastName, Age, EmailAddress

Create web application

See the structure of the web apps.

Take Table component

Go to Quick Start

Add Data to Business object

Select Employee BO.

Add fields to show in the employee list.

Add create Page

Select same BO.

Select fields to create for onboard new employee.

Add edit page

Select Employee BO.

Add fields that need to be updated.

Add Detail Page.

Select Employee BO.

Select fields to show details

Add delete action

Select Employee BO.

Finish

The final page looks like below:

All the pages created under main folder.

Lets go to Preview and test .

Click On board

Add an employee

Employee created.

Same way added another employee.

The page looks little messed up so modified the page formats.

Select one employee row and click update employee.

Update the employee fields.

You can see the employee fields have been modified.

Clcik on Employee detail.

See the employee details.

Select employee and delete employee.

The employee gets deleted successfully.

Go to the Business Object >> Data and see all the current employee data.