Using a Data Connector

Data Connectors can be called in server events to interact with a web service.

To call a Data Connector it must first be added to the entity's Data Connectors View. If a Data Connector is added to a Form, server events in the Form's Pages and Controls can also call the Data Connector.

A Data Connector can be added by dragging it into the Data Connectors View from the Entity Tree, or by clicking on Add Data Connector in the Data Connectors View and selecting the Data Connector from a list.

Once added, functions defined in the Data Connector can be called in server event scripts.

Functions in Data Connectors created in the Verj.io Studio can be called using the syntax: connectors.dataconnectors.<data_connector_name>.<function>(...).
Functions in Data Connectors downloaded from the Resource Hub can be called using the syntax: connectors.verjio.<data_connector_name>.<function>(...).

In the following example car details are added to a Field by calling a carDetailsLookup Data Connector created in the Verj.io Studio. The getCarDetails(...) function of carDetailsLookup accepts a car registration number and returns the car's details:

fields.car_details.value = connectors.dataconnectors.carDetailsLookup.getCarDetails(fields.car_reg.value);

Steps

Step number

These steps show how the Data Connector created in the Creating You Own Data Connector and the Configuring a Data Connector Tutorials can be used in a Form.

If you haven't already, complete the Steps in the Developing with Themes Tutorial and the above Tutorials before starting these Steps.

Switch to your verjioTutorials Workspace if you haven’t already:

Click File > Switch Workspace.
Select verjioTutorials
Click OK.

Create a new Form called usingDataConnectors in a usingDataConnectors Folder in the dataConnectorBasics Project:

Right-click on the dataConnectorBasics Project and select New > Folder and name it usingDataConnectors.
Right-click on the usingDataConnectors Folder and select New > Form and name it usingDataConnectors.

At this point your dataConnectorBasics Project should look like this in the Entity Tree:

Add the coinToss Data Connector to the usingDataConnectors Form's Data Connectors View:

Click on the Data Connectors View in the usingDataConnectors Form.
Drag the coinToss Data Connector from the Entity Tree into the Data Connectors View.

The Data Connectors View should look like this:

Create a result Field to store the result of the coin toss:

In the Fields view, click New and name the new Field result.
Change the Label text property to It's... in the result Field's Properties View.

The result Field's Properties View should look like this:

Create a main section for Page_1 in the usingDataConnectors Form:

Select Page_1 from the Pages View.
Add a Main by dragging it from the Palette into the Outline View as a child of the Page_1 Page Control.
Add a Bootstrap Container as a child of the Main.
Add a Heading as a child of the Main Bootstrap Container and write Coin Toss in the Create New Control dialog.
Add a Panel underneath the Heading and set its Layout Type property to Bootstrap Field.
Drag the result Field from the Fields View to the Outline View as a child of the Panel.
Check Display only in the result Field Control's Properties View.
Add a Button underneath result and write Flip Again in the Create New Control dialog.

At this point, your Outline view should look like this:

Flip the coin when Page_1 loads:

Select Page_1 from the Pages View.
In the Properties View click on the Before Page property button.
In the resulting Configure dialog, click Create New Script and name it flipCoin.

In the new script paste the following code:

// Use the flip() function added to the coinToss Data Connector simulate a coin toss.
fields.result.value = connectors.dataconnectors.coinToss.flip();

Save the script.

Flip the coin when the Flip Again button is clicked:

Click on the Flip Again Button Control to select it.
In the Properties View click on the On Click property button.
Click Add Script and select the flipCoin script in the resulting dialog and click OK.
Click OK.

Test the Form in your browser:

Press the Save All button in the main toolbar.
Click the Test button in the main toolbar and press Submit in the resulting dialog.
The Page will load presenting the result of the first coin toss.
Click the Flip Again button. The result of the next coin toss will be shown.

More samples, tutorials and demos