Tuesday, April 26, 2022

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 - Load data before the page load in oracle visual builder | vbEnter event in VBCS
  28. VBCS - sample web application | Employee CRUD operation web application
  29. VBCS SDP vs ADP
  30. VBCS - Parent Child Relationship between Business objects
  31. VBCS - Dependent or Cascading Select dropdown
  32. VBCS - Export data to Excel component
  33. VBCS - Call OIC integration from Visual Builder
  34. VBCS - Create Custom Javascript function in Visual Builder

References:


OIC - Database package call to insert Varray size of data | DB package insert in oracle integration

Use Case: Here, we will create a package which is accepting Varray type of elements and then call it and feed customers data from Oracle Integration.

Note: use Varray or nested table to create a valid collection type of the fields. Here we will use Varray types.

Create VARRAY type:

Create or replace TYPE NUMBER_ARRAY IS VARRAY(1000) OF INTEGER;

Create or replace TYPE STRING_ARRAY IS VARRAY(1000) OF VARCHAR2(200);

Create or replace TYPE STRING_ARRAY_ID IS VARRAY(1000) OF VARCHAR2(20);

Package specification:

Create or replace package PKG_CUSTOMERS_MULT AS

PROCEDURE addCustomers(P_Id STRING_ARRAY_ID, P_Name STRING_ARRAY, P_Age NUMBER_ARRAY, P_Address STRING_ARRAY);

END PKG_CUSTOMERS_MULT;

/

PACKAGE BODY:

Create or replace package PKG_CUSTOMERS_MULT AS

PROCEDURE addCustomers(P_Id STRING_ARRAY_ID, P_Name STRING_ARRAY, P_Age NUMBER_ARRAY, P_Address STRING_ARRAY)

IS

BEGIN

FOR i IN P_Id.FIRST .. P_Id.LAST

LOOP

INSERT INTO CUSTOMER1(ID,NAME,AGE,ADDRESS) VALUES(P_Id(i),P_Name(i),P_Age(i),P_Address(i));

END LOOP;

END addCustomers;

END PKG_CUSTOMERS_MULT;

/


Steps in Detail:

Integration flow:


Rest trigger adapter configurarion







Invoke stored procedure steps:




Map rest request to db target package elements.



Note: In the map, for each package Varray field, for each cuatomers, we have to map the item elements individually.

For example, - for P_ID

<P_ID>

   For each customer,

      <P_ID_ITEM>

         Id of each customer

      </P_ID_ITEM>

</P_ID>

Testing:

Input:


Output: DB table:



Featured Post

11g to 12c OSB projects migration points

1. Export 11g OSB code and import in 12c Jdeveloper. Steps to import OSB project in Jdeveloper:   File⇾Import⇾Service Bus Resources⇾ Se...