VBCS - Understand actions and action chains

1. An action chain is made up of one or more individual actions, each of which represents a single asynchronous unit of work. Action chains are triggered by events.
2. An action chain, like a variable, has a scope: 
1. it can be defined at the application level : You can call an application-scoped action chain from any page.
2.  the page level.  You can call a page-scoped action chain only from the page on which it is defined.
3. To create an action chain, you can define your own actions and can also use predefined actions. Actions within a particular chain run serially, and multiple action chains can run concurrently. Action chains simplify the coordination of asynchronous activities.
4. A single event may simultaneously trigger multiple action chains. For example, the page enter event may trigger multiple data fetch action chains simultaneously.
5. An action is a specific function that performs a task. In JavaScript terms, an action is a Promise factory. An action can exist only within an action chain, not independently.
6. An example of an action chain is one that makes a REST call (first action), then takes the result of that and stores that in a variable (second action).
7. Action chains have a well-defined context and contract: an action chain orchestrates its underlying actions, coordinating state flow and the execution path. The action chain can define input parameters and local variables that are only available in that context.
8. Visual builder comes with a set of builtin or predefined actions  for an action chain used for example, navigation or assigning variable values, we can use if and switch actions that take an expression and offer multiple different chain continuations depending on the result

Action chains are defined at the application or page level and triggered by a specific event, such as onValueChange (for a variable), or vbEnter. An event may include a payload, which can then be used within the action chain. A payload may be passed into an action chain through the input parameters. The Visual Builder user interface can help you create action chains automatically (with appropriate input parameters) based on a particular event.

VBCS - Understand variables

1. A variable is the basic buildig block for managing client state. It is of specific type and exists in a specific scope.
2. A variable type can be primitive(string, boolean, number, etc), a structured(an array or object), dynamic type(any) or a builtin type(service data provider or array data provider).
3. It stores intermidiate state on the client between the visual  builder user interface and the rest services. Components are principally bound to these variables and the behavior of the variables is governed by actions.
4. Intial value of a variable is determined using the defaultValue property set on the variable.
5. When a variable value changes, a variable emits an event, this event may trigger an action chain. 
6. Constants are a type of variable of the constants namespace and are used to store values tgat do not need to change  over time such as company name or measurement conversion value.
7. We can use a variable to pass a parameter between the pages. We can mark a page variable as an input, specifying how it becomes part of the contract in order to navigate to that page.

A Scope defines the lifecycle of a variable and teh framework automatically creates and destroys tge variable depending on the semantics of the scope.

Page scope: state is accessible only wihin the context of the specified page.

Application scope: state is accessible in all parts of the application and in all pages.

Flow scope: state is accessbile in all pages contained in the current flow.

Action chain scope: state is accessible in the current action chain.

A variable triggers >> onValueChanged event whenever it is modified. >> the event can trigger a user defined action chain

VBCS - typical visual application workflow

• A visual application is a collection of resources that you use to develop web (and mobile) apps. 
• It includes metadata in JSON files that describe data sources (business objects and services) as well as the HTML and JavaScript files of your web (and mobile) apps.
• To develop your application, you define its data sources and design an interface for users to work with.
•  Visual Builder does not impose any specific order for building your application. How you proceed is personal preference and determined by the way you planned your application. If you already know the data sources that you will use, or the structure of objects that you have, you might want to start by defining the service connections and business objects. However you decide to proceed, you always start with a visual application.

High-level description of the tasks that you typically perform when building your application:

1. Create a new visual application
2. Create servicr connections
3. Create business objects
4. Add web (and mobile) apps
5. Develop the web (and mobile ) apps
6. Secure the application
7. Stage and test the application
8. Import real data and check schema
9. Publish the application

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.