Clubs/Teams Lookup Form

A football club may in fact have numerous teams e.g. men and women, reserves, junior, even a pool or darts team 😂. To keep things simple in this sample database, there is a one-to-one relationship between a club and a team i.e. they are synonymous. In fact, the restdb.io sample table is called Teams.

We know from the ReST API what the end points and associated security keys we need to get started. We will always start by reading the data, then displaying it, before moving on to editing, creating and finally deleting data.

Custom Variables for Security Keys

We have already set this up here.

Custom Variables for Key Fields

Data source requests will return a data table of rows with fields. Each row will typically have an identifier for example in this sample the Club/Team ID. This will be a long random string of characters or numbers generated by the back-end database when records are created.

In order to handle the selection of rows, we need to create a custom variable which will be dynamically set when the end-user selects a specific record in a form or a grid or a field. We will assign this variable to the key field in the data source request.

Because we know that the restdb.io Rest API request will return teams, we will create a custom variable called "TeamID" which we will assign to the field later.

Add TeamID

Open App Studio, then open the custom variables configurator.

Select the Client in the drop down this time before using the Add button to create the custom variable TeamID.

We do not need any more custom variables to display and select clubs/teams in the lookup form, however we will when we need to design a data entry form in order to map fields to the ReST API body.

Read List

The next thing is to create the data source request to integrate the list of clubs/teams pulled from the ReST API.

Data Source Configurator

Open App Studio, then open the data source configurator.

Create a data source, and a sub-folder hierarchy like this:

RestDB.io/Football/Teams

This unambiguously defines that we have a restdb.io data source inside which we have the Football industry depicted as a folder. We then define a sub folder for Teams which will be where all the CRUD request methods for clubs/teams will be created.

Security

We previously set the security keys for the Football folder here so we do not need to do this again.

Teams Folder

Now that we have API security at the database level, we need to ensure that all requests inherit the same security. This is done by selecting the Teams folder beneath, clicking into the Authorisation tab and setting the Authorisation drop down combo to "Inherit from parent".

Every data source request we create in this folder will now inherit the security keys specified at the database level.

Create a Data Source Request

We can now create a data source request to read a list of teams from the ReST API.

Add Request

Click the add button menu item Request to create the following data source request:

RestDB.io/Football/Teams/Clubs with Badges

Edit Request Properties

Edit the new request properties to set the URL to be:

https://football-891b.restdb.io/views/FootballClubs

It should look like this:

Send Request

You should now test the request by clicking the Send Request button. You will be prompted to confirm the URL being requested.

Results

After the ReST API request has been sent, the Results tab will be selected and the JSON tab will show the columns and this data:

We can see that the clubs/teams data from the ReST API is being returned, including the badges as URL images. This is because our restdb.io view is able to map its media files onto a two-dimensional table for easy consumption by client-side applications.

Fields

If we scroll back up to the top and click the left Fields tab, we should see a list of the fields accompanying the data.

Clicking on the top right Fields tab will show these Available Fields in a vertical list to the left:

Fields can be re-ordered using the left drag icon, or removed using the right delete button.

Selecting any field will show its corresponding properties to the right. Selecting the Name field and scrolling down should reveal the sample values:

These are useful to confirm that fields are returning the expected data.

Image URL

When returning images, you should configure the type of field so that it displays correctly in form components such as grids.

Select the BadgeUrl field and set it's Type to "Image URL".

Key Field for Drill Down

Another important field to configure is the unique identifier or "Key" field. This is usually a long random string or number. We need to set the ID field to be the Key as well as assign it to the custom variable we created earlier:

This facilitates a process known as 'drill-down' where the end-user selected a hyperlinked column in a row and drills down into it by opening up the data entry form.

Note that we can now simply close the the data source configurator form as all changes are automatically persisted so we can move onto creating the lookup form.

Clubs/Teams Lookup Form

Now that we have the custom variables and data source request to facilitate listing clubs/teams, we need to create a lookup form upon which to display a grid showing all clubs.

Create Form

Open App Studio then select the Forms configurator.

Add

Use the Add button to create a new form called "Clubs" or "Club Lookup". In the form properties make sure that this form is of type "Lookup". You do not need to assign a data source to the form as we will do this in the form designer when we add a Grid component.

Design

Open form designer from the form properties popup, and drag a grid component into the first panel on the Main Top Region tab so that it looks like this:

Click on the Grid to open the component properties for the grid. Select the Data Sources tab:

Use the Add button to select the data source request you created above.

After selection, the Read data source request should appear like this:

Grid Configuration

Select the Grid tab to configure the grid to display the data.

Population

In the Population left tab, set the Population Trigger to Form Loaded. This tells the grid to load the data as soon as the form is displayed.

Columns

In the Columns left tab, the fields previously retrieved from the ReST API are displayed in the order you designed. You can re-order these by using the up/down arrows or delete a column.

Note that in the world of data, the term field is used, yet in grids, the word column is used. This is why the grid uses the column nomenclature instead of field.

Note that the ID key column is showing the custom variable you assigned to it previously:

For the BadgeUrl column, this should remember that it was configured as a Image URL Type. Set the Image Size to be 32 x 32 so that it looks the correct size when displayed. Also set the Caption, visibility and Width of the BadgeUrl column:

Drill Down

We will not configure the drill down tab until after we have created the data entry form in the next section.

Apply

Apply the grid properties, then Save the form design to persist the form for later use.

Navigation Bar

We can now add this lookup form to the navigation bar from where it can be opened by the end-user.

Open App Studio then select the Navigation Bar configurator.

Football Industry

The group called "Football Industry" was already created here.

Clubs/Teams

When the Football Industry group is selected, add a form using the Add Form button. This will popup a modal dialogue where you can select your newly created Clubs form. Clicking Save will show the new Clubs/Teams form menu:

Select Visible, and change the Icon to a building. Then press the Apply & Close button.

Test

You can now test your configuration by opening the Football Industry group in the navigation bar and selecting the Clubs/Teams item.

You should now see the lookup form with the data from the ReST API displayed in a grid:

Test that column filtering and sorting works as expected.

We are now ready to create a data entry form configured for creating, reading, updating and deleting cub/team records.