VBCS - task18 - publish the application

Usecase: here, we will see how to publish your application to live when we have successfully tested the staged application. The live application will be visible to users with proper credentials.

Detailed steps:

Cilck menu >> select publish >> Include data from stage >> publish 

In the header, we can see its showing live.

Menu >> open published application.

Also, we can go back to the all application >> locate your application >> select live web app to open the app.

Once the web app is published, we wont be able to make any changes to it, to do that, we will need to create a new version from the application's options menu on the visual application page. This will create a dev version of the app for us to work while the published version stays live. Once we are ready to go live with our updates, need to restage and republish the new version.

Open the live app url to mobile device >> install the app >> we will be prompted to add to our phone home screen as well.

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.

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