VBCS - task15 - access data from an external REST service using service connection - Define by endpoint option

Usecase: we will show how to access data from an external REST service using service connection - Define by endpoint option.

Highlevel steps:

1. Create a service connection to an external rest endpoint
2. Create a type and variable from the rest endpoint
3. Add fields to the employees edit page to display country data
4. Bind the created country avatar, input fields to the created country type variables.
5. Assign data to variables
6. Test the employee's country details

Implementation steps:

Step1: create a service connection to an external rest endpoint

Web apps >> Services >> click + service connection >> wizard will show 3 options >> select define by endpoint >> select method, provide URL and select action >> create backend

Here, we have mentioned below details:

Method: get

URL: https://restcountries.com/v2/alpha/{code}

action: Get one

In the backend spwcfication step >> enter backend name : countries, select authentication if any. Contion type as Dynamic the service supports CORS. >> next

In create service connection page, provide service name and title and click test

Provide value >> click send request >> save as example response >> create

Step2: create a type and variable from the rest endpoint:

Types tab >> click + type >> select from endpoint >> expand services >> countries >>select GET /alpha/{code} endpoint >>next >> select the fields to display from the response. >> finish

Right click on the newly created countryType >> select create variable 

Step3: add fields to the employee's edit page to display country data 

We will change the edit employee page to show information about an employee's country.

Web applications >> open the main-editemplyee page >>> drag and drop heading component from component pallet to the page   at the end of the form layout. >> change the text field value to country info and move the slider H1to H6. >> drag and drop form layout from component pallet.  >> now add avatar and input text fields for timezone and region

Step4:Bind the created country avatar, input text fields to the countryType variable

Go to the page designer >> select avatar >> click data tab >> src field >> select the created country type variable and flag >> sameway for region and timezone and src >> add the variables

Step5: assign data to the variable

Select country field data >> add on value event that triggers an action chain >>>> from where we use rest call action and select the endpoint service >> assign input parameter >> expand employee under page and map country to code. >> drag and drop assign variable >> select countrytypevar >> which maps to callrest response  body

Step6:  test

Go to preview and test with country data IN or IE ETC.

VBCS - task14 - Access data from an external REST service

Usecase: Here, we will see how to use visual Builder to access data from an external REST service.

So far, we have created business objects to store data in an embedded database and accessed that data through REST endpoints that were automatically created for us. But business objects are not the only option for data access, in fact, we can connect to any REST enabled data source by creating a service connection.

The create connection wizward provides following 3 options to connect REST endpoints:

1. Select from Catalog: when we have access to an oracle cloud applications or oracle integration instance. We can use the seelct from catalog option to access endpoints exposed by these oracle services.

https://soalicious.blogspot.com/2022/05/vbcs-call-oic-integration-from-visual.html

2. Define by Specification: when we have access to a swagger or oracle ADF file that describes a service.

3. Define by Endpoint: when we know the URL of an external REST endpoint.

https://soalicious.blogspot.com/2024/04/vbcs-task15-access-data-from-external.html

VBCS - task13 - change the app's deafult page

 Usecase: Here, we will change the application's deafult home page from departments to employees.

Web apps >> click main node >> click settings >> set default page

VBCS - task12 - add a button to delete a department

 Usecase: Here we will add a button to delete a department row using quick start.

Select the main-departments page in web apps >> click the page designer tab >> select table >> clcik quick start in table's properties pane >> click add delete action >>select department under business objects>> finish >> delete department button is added in the toolbar on the main-departments page >> go to preview >> select a department row and click delete department and save

VBCS - task11 - add a page to edit business object like department's details

 Here, we will add an edit page that lets user to change a department's name and location 

Select the main-departments page in web apps >> click the page designer tab >> select table >> clcik quick start in table's properties pane >> add edit page >>select delartment and location >> finish >> edit department button is added in the toolbar on the main-departments page >> go to preview >> select a department tow and click edit department and save.

VBCS - task10 - Add navigation between pages in a webapp | Action chain

Here, we will see how to setup navigation between pages in a web app.

We can do this by addig buttons that perfom specific actions when we click then. This sequence of actions is called an action chain in visual builder. 

Usecase: create an action chain to navigate from departments page to employees page:

Click web applications >> click main-departments page >> select button from component pallet and drop to the page beside create department  >>click button and change level field to Show Employees >> go to events tab and click + event listener >> select on 'ojAction' >> an empty action chain will open >> drag "Navigate to Page" action and drop to the canvas and select the page >> click preview and test.