Step 2: Connect to Data

The second step is to connect to a ReST API and test it to show a data set so that you understand the fundamental data-oriented concepts.

It is expected that this step will take no more than 10 minutes of your time.

Open App Studio

Open the administration group in the navigation bar on the left and click on App Studio.

Create a Data Source

Create a data source request which connects to a ReST API to return a data set.

Open Data Sources Configurator

The Data Sources configurator is located in the middle of the Data group in App Studio:

When it is clicked, it opens a modal popup dialogue showing a list of all data sources in your application:

The only data source should be the demo data set provided with the sample app.

Add New Data Source

Click the plus drop down menu and choose Data Source:

You will be prompted to supply the name of your new data source:

Type the name and use the Save button add the new data source to the tree view list:

The new data source will be selected on the left and the properties are shown on the right.

Add Folder

Add a new folder beneath the data source so that all your data source requests are grouped for easier maintenance:

You will be prompted for the name of your new folder. Perhaps use the name of your first lookup form you created in step 1. Press the Save button:

Your new folder will be created beneath your new data source in the left tree view with the folder properties on the right:

Add a new Request

Create a new data source request using the same add button menu:

You will be prompted to enter the name of your new data source request:

Give it a suitable name and press Save:

Your new request will now be selected in the left tree view and its properties are shown on the right.

Specify the URL

We now need to paste in the ReST API endpoint into the URL text box.

The default for testing is https://app.flexiva.co.uk/usercontrols/app-studio/data-source/astronomy.json

This returns an astronomical data set which is enough to demonstrate the principles of data source request consumption. It also requires no authentication credentials which are documented here.

[
  {
    "_id": "6857ae6878badf650012ae96",
    "ID": 2,
    "Object_Name": "Andromeda Galaxy",
    "Type": "Galaxy",
    "Constellation": "Andromeda",
    "Distance_LY": 2540000,
    "Magnitude": 3.44,
    "Coordinates_RA": "00h 42m 44s",
    "Coordinates_Dec": "+41° 16' 09\"",
    "Discovery_Year": "964",
    "Image_URL": "https://cdn.esahubble.org/archives/images/thumb300y/heic1112e.jpg",
    "Image": []
  },
  ......
]

Send Request

We can now test the ReST API endpoint by sending the request to pull the data set. When the Send Request button is pressed, the following prompt is displayed.

This allows designers to override request URL's with injected parameters. In this instance, confirm this by pressing the Confirm Request URL button.

JSON

The Results tab should now be selected and the left docked tabs should be visible. The JSON should be displayed showing the raw data set returned from the ReST API.

Analysing Results

The first section of this JSON are the columns/fields which were returned, and scrolling down to the DataTable reveals a list of data items.

Fields

Clicking on this left docked tab shows all of the fields in the request which were returned.

Table

Clicking on this left docked tab shows all of the data in the request represented in table format.

Grid

Clicking on this left docked tab shows all of the fields in the request represented in a data grid. This is a close representation of how your new lookup form grid will show this data when we design it later.

Fields

The field tab is where the extracted list of fields from the request results can be manipulated for presentation in components and forms.

Available Fields

This is a list of all fields returned from the request. They are ordered as they were returned from the ReST API however they can be re-ordered by using the left drag icon of each item. The right delete button removed the field from the list. Selecting any field shows its properties to the right.

Field Properties

These are the properties of the selected field. The Image_URL field should be set to be of Type Image URL as this will allow us to view the image in the grid later. Try dragging this field upwards to reposition it when you design the grid.

Close

Close the configurator as we have now completed adding a new data source request.

The next step will be to consume this data in a lookup form.