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.

VBCS page links

All VBCS POCs links below:

1. VBCS overview
2. VBCS - typical visual application workflow
   
3. VBCS - Understand variables
   
4. VBCS - Understand actions and action chains
   
5. VBCS - access and secure business objects
   
6. VBCS - important parts or tools under Navigator
   
7. VBCS - constituents of a web application
   
8. VBCS - provisioning visual builder instance
   
9. VBCS - task1 - Create a web application
10. VBCS - task2 - Create business objects and import data.
    
11. VBCS - task3 - create a business objects diagram
    
12. VBCS - task4 - How to check and test Business Object rest endpoints
    
13. VBCS - task5 - Use main-start page to display one business object like departments
    
14. VBCS - task6 - add a page to create object instance like departments using add create page quick start
    
15. VBCS - task7 - add a page to display business object like employees
    
16. VBCS - task8 - add a page to create employee business object
    
17. VBCS - task9 - change the name of the main-start page
    
18. VBCS - task10 - Add navigation between pages in a webapp | Action chain
    
19. VBCS - task11 - add a page to edit business object like department's details
    
20. VBCS - task12 - add a button to delete a department
    
21. VBCS - task13 - change the app's deafult page
    
22. VBCS - task14 - Access data from an external REST service
    
23. VBCS - task15 - access data from an external REST service using service connection - Define by endpoint option
    
24. VBCS - task16 - Enable the web app as a PWA
    
25. VBCS - task17 - stage the application and import data into the application
    
26. VBCS - task18 - publish the application
    
27. VBCS - sample web application | Employee CRUD operation web application
28. VBCS SDP vs ADP
29. VBCS - Parent Child Relationship between Business objects
30. VBCS - Dependent or Cascading Select dropdown
31. VBCS - Export data to Excel component
32. VBCS - Call OIC integration from Visual Builder
33. VBCS - Create Custom Javascript function in Visual Builder

References:

https://apexapps.oracle.com/pls/apex/dbpm/r/livelabs/view-workshop?wid=763