Sunday, April 21, 2024

VBCS - task17 - stage the application and import data into the application

Stage the application:

Click the Menu  in the header >> select stage >>select business object data option and click stage >> click Menu again >> select Open stage application 





Import data into your application:

If we need to add more records to our data in the staging database, we follow the below steps:

Have a zip file containing csv files for each business object >> click the business object under the navigator >> click Menu ...>> data Manager >> select staging from the drop down list in the upper right corner >> click import from file >> select zip file and import. >> open the any object like departments >> data tab >> select staging , we can see the imported data.







Note: visual builder provides different databases for the development, staging and live phases of an application. We can use empty database for the staging or live phase, we can transfer data from one to another or we xan import specific data for each.

VBCS - task16 - Enable the web app as a PWA

Usecase: Here we will show how to enable the web app as a PWA.

  1. Once all the web app development work done, as a final step before we stage the app, we can enable it to rub as a Provressive Web App or PWA. 
  2. PWAs are designed to be capable, reliable, and provide a platform specific look and feel.
  3.  When we enable a web app as a PWA, it can be installed ditectly from a browser on a user's device, including Android and iOS mobile devices.

Navigation and steps:

Web apps >> click hrwebapp node >> settings >> PWA >> toggle Enable Progressive web app(PWA).>> review the Manifest setting(app name, short name, theme color) >> under resources >> click create next to the offline fallback page .

App name: to be displayed when we are prompted to install the app.

Short name: The short name is used on the Home screen, launcher, and other places where space is limited.

Offline Fallback page: To add page  that is displayed when the user pefforms an action in the PWA that requires a connection , but the device is offline.







Saturday, April 20, 2024

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

Thursday, April 18, 2024

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.









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...