Club/Team Form: Read

This is the process we will follow.

READ

• Add a 'read' data source for reading a single club/team record

• Link the key club/teamrecord identifier to this ReST API end-point if necessary

• Create a data entry form

• Assign this 'read' data source to the data entry form

• Design this form and drag fields from this data source

• Add this form to the navigation bar

• Configure drill down to the lookup form grid component

• Test that we can lookup clubs/teams and drill down into a data entry form showing the club master record

• Set the History Menu record summary

• Test that we can lookup clubs and drill down into the club/team form, and that the history menu shows the club name

• Add a master/detail grid to show all footballers who play for this club/team

• Test that we can view all footballers who belong to this club/team

Add a READ Data Source

Open App Studio, open the Data Sources configurator, select the Teams folder you created previously, then use the add button menu to create a new request.

The Add New Request modal popup form shows asking you to name the request. Type a meaningful name such as "Read a Club/Team" and click Save.

The request will be added to your tree view beneath the Teams folder:

Edit Properties

Edit the properties in the Details tab as following by referencing this list of ReST API end-points.

URL

https://restdb.trisys.co.uk/ReadFootballClub

Now it is known from the documentation that this ReST API end-point has a club/team identifier property ?ID=.

We therefore type this parameter list into the URL so that it reads:

https://restdb.trisys.co.uk/ReadNationality?ID=

Whilst the caret is still blinking after the last character typed, click on the Insert Variable button and select this variable: TeamID

The URL should now show the custom variable appended to the end:

HTTP Verb

The default GET verb/method is usually correct for reading a single record from a ReST API and is correct for this specific back-end end-point.

Authorisation

Previously we set up security credentials at the Football folder level, so we can leave this to be set to "Inherit from parent".

We do not need to change anything else.

Send Request

Click this button on the Details tab to send the request to the ReST API.

You will be prompted to confirm the URL. The value of the custom variable TeamID should show after ?ID= but if it does not, then copy this value in: 686f8e0e78badf6500145951 as this is the ID for Bournemouth.

This URL should now be:

https://football-891b.restdb.io/views/ReadFootballClub?ID=686f8e0e78badf6500145951

Press the Confirm Request URL button.

The request should run quickly and select the Results tab and show the JSON top left tab displaying the full JSON returned from the ReST API:

{
    "Columns": [
        {
            "field": "ID",
            "title": "Id",
            "type": "string",
            "format": null,
            "width": 70,
            "hidden": false,
            "template": null
        },
        {
            "field": "Name",
            "title": "Name",
            "type": "string",
            "format": null,
            "width": 200,
            "hidden": false,
            "template": null
        },
        {
            "field": "Description",
            "title": "Description",
            "type": "string",
            "format": null,
            "width": 70,
            "hidden": false,
            "template": "<img src='#: Description #' style='width: 64px; height: 64px;' />"
        },
        {
            "field": "Badge",
            "title": "Badge",
            "type": "string",
            "format": null,
            "width": 200,
            "hidden": false,
            "template": null
        },
        {
            "field": "BadgeUrl",
            "title": "Badgeurl",
            "type": "string",
            "format": null,
            "width": 70,
            "hidden": false,
            "template": "<img src='#: BadgeUrl #' style='width: 64px; height: 64px;' />"
        }
    ],
    "DataTable": {
        "List": [
            {
                "ID": "686f8e0e78badf6500145951",
                "Name": "Bournemouth",
                "Description": "https://www.premierleague.com/en/clubs/91/bournemouth/overview",
                "Badge": "686f8e0e78badf6500145950",
                "BadgeUrl": "https://football-891b.restdb.io/media/686f8e0e78badf6500145950"
            }
        ],
        "DynamicColumns": null,
        "TotalRecordCount": 0,
        "TotalPageCount": 0,
        "FirstRowNumber": 0,
        "LastRowNumber": 0,
        "PageNumber": 1,
        "RecordsPerPage": 1,
        "SortColumnName": null,
        "SortAscending": true,
        "AICriteria": null,
        "Success": false,
        "ErrorMessage": null
    },
    "URL": "https://football-891b.restdb.io/views/ReadFootballClub?ID=686f8e0e78badf6500145951",
    "Verb": "GET",
    "Success": true,
    "ErrorMessage": null
}

Look at the DataTable -> List to see that it contains 1 club/team record.

Our data source request has now been created and configured, so we can now close this configurator.

Create a Data Entry Form

Open App Studio, then open the Forms configurator.

Add

Click the Add button to open the modal popup form.

Name

Type the name "Club". You do not need the word "Form" to follow it.

Purpose

Type "Football Club/Team form"

Type

This must be set to "Data Entry".

Icon

Use the far right button to choose a suitable icon for the form. Use the text "build" in the filter to find a building.

Caption

Set the caption to "Club/Team". Note that we will configure the history menu to show the club/team name, not this caption.

Description

The description will be automatically generated which is fine for now.

Data Sources

Click the Data Sources tab as this is where we will add the READ data source we created earlier:

There are 4 CRUD data source lines. Click this database icon for the Read data source:

This modal popup form appears to allow you to select the previously created data source request. Navigate through the folder hierarchy until you locate this data source request:

Click the Select button to choose this data source.

The popup will close and the selected Read data source request is now added to the list of data sources for this data entry form:

If you ever need to remove a data source request from the list, you can use the X button.

It is recommended that you now click the Apply button on this form, in order to persist the form properties before designing your form. Your new form should now appear in the list of forms, and the Read data source request you added should be shown in the properties list:

Form Design

Click one of the Edit buttons, either the grid row or properties panel. The form modal popup will display. Click the Design button:

The form designer will open.

Tabs

The tabs toolbar is the selected tool by default. Each data entry form is designed as a master/detail meaning that the master record is shown at the top, and any further details about linked entities is shown below in a series of tabs like this:

The Main Top Region refers to the master record on the top of the form.

We will design the club/team fields in this region.

Edit Panel

Click the down arrow in the Row 1, Column 1 panel and choose the Edit Panel option:

This opens this modal popup:

For this simple form, we will hide the title and border by unchecking these properties:

Click the Apply button.

Configure Layout

We want to show the club badge on the form, so we will configure the layout to create another column to the right of these fields to span the 3 rows we created. Click this button:

This will open this modal popup to modify the form tab layout:

Use the up arrow on the Columns field to increase the number of columns to 2, then set the first column width to 7 and the second to 5:

Fields

Click on the fields panel in the toolbar to show the available fields. These fields are those connected to the Read data source request we added earlier. Drag these fields as follows:

Club Badge

Click the drop down menu on the right panel to edit it, and make the following changes in the modal popup:

We set the title of the panel to "Club Badge", set the icon to be a building. Click the Apply button.

Save Form

Now save the form design using this button:

We have now completed the design of our data entry form to read a record.

We will now add this to the navigation bar.

Navigation Bar

When we add this form to the navigation bar, we will be able to test it.

Open App Studio and select the Navigation Bar configurator and select the Football Industry folder you created previously.

Add Form

Click the Add Form button to open the Add New Form Menu Item modal popup where you should select the Club form you created earlier.

Click the Save button which will close the popup and show the new form in the nav bar menu:

Properties

Check or set these properties.

Visible

Because this is a data entry form, we only want it to be visible in the nav bar when the form is open and showing a record, so this should be unchecked.

Entity Form

This is a data entry form which models entities, so this should be checked.

Apply & Close

Click the Apply & Close button to persist the navigation bar and refresh the nav bar.

Configure Drill Down

The navigation bar should not show any change from the last time you saw it because the Club/Team form will only appear on it when the form is opened.

In order to test this data entry form, we need to enable drill down from the Clubs/Teams lookup form we created previously.

Configure Grid Component

Open App Studio and select the Forms configurator.

Open Clubs/Teams Form Designer

Open the Clubs form in form designer by choosing Edit then Design.

Click on the Grid component to open this modal popup form:

Select the Grid tab and click the Drill Down left menu option. Click the Add button which will open this modal popup:

Choose Name as the Column Name.

Make sure that the Hyperlink is checked.

Ensure that Key Column Name is the ID i.e. the identifier of the club/team record.

Select the Club form in the Form field. This is the data entry form we created earlier.

Click the Save button which will close the popup and show the drill down hyperlink details:

Click the Apply button, and then Save the form design.

Test Data Entry Form

Open the Football Industry group on the navigation bar.

Clubs/Teams

Click the Clubs/Teams nav bar menu to open the lookup form:

If you hover your mouse over any of the clubs/teams, you should see that it becomes highlighted. This proves that the drill down configuration has been applied.

Click any club.

Club/Team Form

The club/team form should open and show the selected club details including their badge:

Notice also how the navigation bar now shows the Club/Team form as being open?

History Menu

When the history menu appears, we want the name of the club/team to appear, not the name of the form for example:

Configuring Record Summary

Open App Studio and select the Forms configurator. Edit the properties of the Club form and click the History Menu tab:

Click this button to open this modal popup:

Choose the Name field and click the Save button to persist this setting and close the popup.

Record Summary

The record summary should now show {Name} indicating that the Name field will be displayed in the History Menu:

Apply

Click the Apply button to persist this.

Test Record Summary

Open another club/team from the clubs/teams lookup form, and then click on the History drop down menu. You should see the last club you opened at the top of the list?

Football Players

We will now design the Club form and add a grid component to the first tab.

Open App Studio and select the Forms configurator.

Open Club Form Designer

Open the Club form in form designer by choosing Edit then Design.

Edit Tabs

Select the Tabs panel in the Tools panel. Select the second tab and use the tab properties button:

Edit the tab properties then Apply it.

Drag Grid

Drag the grid from the components toolbar onto the first panel:

We cannot configure the grid yet because we have not yet configured the data source we created here to show a list of footballers.

Instead, we need to Save the form design to persist our design.

Configure the Footballers Data Source Request

In order to display a list of footballers on our Club form, we need to configure the data source request connected to the appropriate ReST API.

Select this data source in this configurator:

Parameters

Because we want this data source request to be re-used throughout the application, we are going to use optional parameters linked to custom variables. Only if a custom variable value is not empty will it be appended to the URL at run-time.

We previously created the TeamID custom variable and we know that this ReST API can return footballers belonging to a particular club/team.

Click the Add Parameter button to add this parameter:

Select the Field TeamID, then assign that to the Custom Variable TeamID then click the Save button.

The parameter is added to the list:

Fields

We previously configured the fields here.

Wire up the Footballers Grid

We can now point the grid on the Club form at this footballers data source request.

Open App Studio and select the Forms configurator. Open the Club form, edit it, and Design it to open the forms designer.

Add Read Data Source

Click on the grid on the National Team Players tab and open the Component Properties: Grid modal popup and click on the Data Sources tab.

Use the Add button to choose this data source request.

The popup form should now show that a Read data source request is associated with the grid:

Grid Columns

Click on the Grid tab.

Population Trigger

Select "Record Loaded" in the drop down combo:

Columns

Click on the left tab Columns, and order the columns, hiding some, as you would like to see them.

Because this grid is on a Club form, we do not need to see any of the team columns in this grid. Here are the properties for each column you should set:

Drill Down

Leave this for now as until we create the footballer form, we have nothing to drill into!

Apply

Apply the changes to these properties.

Save

Save the form design to persist the configuration.

Test

You can now test your configuration by opening the Football Industry group in the navigation bar and selecting the Clubs/Teams item. Drill down into any club to open the form.

The Club/Team form now shows the Footballer Players in the grid:

We will revisit this form to configure drill-down once we have completed all CRUD configuration and created the footballer forms.