linegraph

5 main building blocks of the new Visual Builder Cloud Service

In may 2018 Oracle introduced the new version of Visual Builder Cloud Service. This version is not just aimed at the Citizen Developer, in the end an experienced JavaScript can do nice things with it.

In this blog I will have a look at 5 of the 6 main building blocks you build a VBCS applications with:

  1. REST service connections
  2. Flows and Pages
  3. Variables
  4. Action Chains
  5. UI Components

5 main building blocks of the new Visual Builder Cloud Service Picture1

Putting all of this in one blog is a lot, so this is a lengthy one. The final result can be found here.

With VBCS you can create a lot using Drag and Drop! But in the end you have to be aware that it is all Javascipt, HTML5 and CSS you are creating. And it is all build on JET!

Before we can start with these concepts, I create a New Application.

5 main building blocks of the new Visual Builder Cloud Service NewVBCSApplication

Rest Service Connection

I start with creating some endpoints for a publicly available REST API, https://docs.openaq.org/ An API with Air quality measurements

This API contains several endpoints, the graph I am going to create uses the measurements API. As I am from the Netherlands, I use data from the Netherlands in this blog.

First I create the Service Connection based on the Cities endpoint.

1. Create Service Connection by Service Endpoint
5 main building blocks of the new Visual Builder Cloud Service SelectDefineByEndpoint

2. Specify “URL”: https://api.openaq.org/v1/cities

5 main building blocks of the new Visual Builder Cloud Service SpecifyEndpoint

3. Service Base URL is populated with https://api.openaq.org/v1/, give Service proper name

5 main building blocks of the new Visual Builder Cloud Service NameService

4. For Request > URL Parameters Add the Static Parameter “country” with value “NL”

5 main building blocks of the new Visual Builder Cloud Service ParameterCountryNL

5. Test the endpoint and Copy to Response Body

5 main building blocks of the new Visual Builder Cloud Service TestServiceConnection

6. Create the endpoint

5 main building blocks of the new Visual Builder Cloud Service Endpoints

Create flow and first Page

I will create a Web Application that contains the main Flow and main-start Page.

5 main building blocks of the new Visual Builder Cloud Service NewWebApplication

5 main building blocks of the new Visual Builder Cloud Service NewWebApp

On the main-start Page I drop a Table UI Component.

5 main building blocks of the new Visual Builder Cloud Service DropTable

I have marked yellow the Table UI component, the Collapse/Expand Property Inspector and Quick start button.

For this Table we Add Data, which is available on the Quick start Tab. Select the cities Service Endpoint.

5 main building blocks of the new Visual Builder Cloud Service SelectEndpoint

As the country is hardcoded, I won’t display it in the table. I reorder the columns with drag and drop. City I select as Primary Key.

5 main building blocks of the new Visual Builder Cloud Service ChooseColumns

In the layout editor the Data from the Service endpoint is displayed. In the code you will see that an Oracle JET oj-table component is used.

5 main building blocks of the new Visual Builder Cloud Service TableData

You can also run the Application:

5 main building blocks of the new Visual Builder Cloud Service Table

Next we add a Page for the Line-graph and drag an Oracle JET Line Chart on it.

5 main building blocks of the new Visual Builder Cloud Service NewLineGraph

Variables and Types

The responses from a Rest endpoints are stored in Variables, UI components and Action Chains use Variables.

When you have a look at the Line Chart code, it contains two Arrays: Groups and Series. The Groups Array is an Array of Strings ( [‘Group A’,’Group B’] ), the Series array is an Array of Objects ( [{name:’Series 1′,items:[41,34]},{name:’Series 2′,items:[55,30]},…] ). The Serie Object consists of a String (name) and a numeric Array (items).

For the line Graph I create two Types in the main Flow.

  1. a Type with a structure that can hold the result data of a REST call
  2. a Type with a structure that can be mapped to a JET line graph

A getCitiesResponse type was already created by VBCS for the response of the REST call. This is the final result I want:

5 main building blocks of the new Visual Builder Cloud Service Types

Action Chain

I create an Action chain that will do these steps:

  • Show notification with City selected
  • Call measurement REST endpoint and map to linegraphDatatype
  • Map linegraphDatatype to linegraphType using JavaScript
  • Navigate to page line-graph page

When I open the Actions Tab for main-start Page, I see that a Action-Chain was already created. This Action-Chain saves the Primary Key of the row selected in my city Table.

I now create the mentioned Action Chain. In this ActionChain I create a variable and assign the page variable with the selected City as Default.

 5 main building blocks of the new Visual Builder Cloud Service AddChainVariable

Next I drop a Fire Notification Action on the +-sign below  Start.

I set the Display Mode to transinet and specify the Message as

{{ “AirQuality data for ” + $chain.variables.selectedCity + ” is being retrieved.” }}

5 main building blocks of the new Visual Builder Cloud Service AddFN

The measurement REST endpoint is called with a Call Rest Endpoint Action. selectedCity from the Action Chain is mapped to the city parameter of this Action.

5 main building blocks of the new Visual Builder Cloud Service MapParameter

The Result of this Action has to be mapped to linegraphData variable using Asign Variables Action.

5 main building blocks of the new Visual Builder Cloud Service MapRestMeas

This linegraphData array I need to convert to my linegraph object. For this I will call a peace of javascript. First I create a function in the main Flow javascript.

5 main building blocks of the new Visual Builder Cloud Service Javascript

The complete peace of javascript can be found in the Application Export that is attached to this blog.

This javascript function can be called with a Call Module Function Action, VBCS recognizes the function added in the javascript. The linegraphData variable needs to be mapped to the chartData parameter.

5 main building blocks of the new Visual Builder Cloud Service MapArray

The result from the javascript function needs to be mapped to the linegraph variable using an Assign Variables Action.

5 main building blocks of the new Visual Builder Cloud Service Assignlinegraph

Finally I navigate to the main-graph Page using a Navigate Action.

A quick way to call this Action Chain (and get the linegraph) is by calling it from the already existing Action Chain to handle the selection of a row in the Cities table. I add a Call Action Chain Action

UI Components

The linegraph variable is now ready to be used by our graph. In the Data Tab of the Chart we set the Groups and Series.

5 main building blocks of the new Visual Builder Cloud Service ChartData

To get a readable layout for the date-axis, I enable the x-axis as time-axis-type:

5 main building blocks of the new Visual Builder Cloud Service

Everything together

The final graph for Amsterdam:

5 main building blocks of the new Visual Builder Cloud Service Graph

Amsterdam pm25 graph

The VBCS export can be downloaded here

One Response

  1. vilas June 21, 2021