Footballer Form: Read

This is the process we will follow.

READ

• Add a 'read' data source for reading a single footballer record

• Link the key footballer record 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 footballers and drill down into a data entry form showing the footballer master record

• Set the History Menu record summary

• Test that we can lookup footballers and drill down into the footballer form, and that the history menu shows the footballer name

• Add a master/detail grid to show all previous clubs/teams

• Test that we can view all previous clubs/teams whom this player represented

Add a READ Data Source

Open App Studio, open the Data Sources configurator, select the Players 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 Footballer" and click Save.

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

Edit Properties

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

URL

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

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

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

https://football-891b.restdb.io/views/ReadFootballers?ID=

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

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 FootballerID should show after ?ID= but if it does not, then copy this value in: 686400cf78badf6500138270 as this is the ID for Melina Loeck.

This URL should now be:

https://football-891b.restdb.io/views/ReadFootballers?ID=686400cf78badf6500138270

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": "PhotoUrl",
            "title": "Photourl",
            "type": "string",
            "format": null,
            "width": 70,
            "hidden": false,
            "template": "<img src='#: PhotoUrl #' style='width: 64px; height: 64px;' />"
        },
        {
            "field": "PhotoID",
            "title": "Photoid",
            "type": "string",
            "format": null,
            "width": 200,
            "hidden": false,
            "template": null
        },
        {
            "field": "TeamName",
            "title": "Teamname",
            "type": "string",
            "format": null,
            "width": 200,
            "hidden": false,
            "template": null
        },
        {
            "field": "TeamID",
            "title": "Teamid",
            "type": "string",
            "format": null,
            "width": 200,
            "hidden": false,
            "template": null
        },
        {
            "field": "TeamBadgeUrl",
            "title": "Teambadgeurl",
            "type": "string",
            "format": null,
            "width": 70,
            "hidden": false,
            "template": "<img src='#: TeamBadgeUrl #' style='width: 64px; height: 64px;' />"
        },
        {
            "field": "TeamBadgeID",
            "title": "Teambadgeid",
            "type": "string",
            "format": null,
            "width": 200,
            "hidden": false,
            "template": null
        },
        {
            "field": "Position",
            "title": "Position",
            "type": "string",
            "format": null,
            "width": 200,
            "hidden": false,
            "template": null
        },
        {
            "field": "PositionID",
            "title": "Positionid",
            "type": "string",
            "format": null,
            "width": 200,
            "hidden": false,
            "template": null
        },
        {
            "field": "SquadNumber",
            "title": "Squadnumber",
            "type": "string",
            "format": null,
            "width": 200,
            "hidden": false,
            "template": null
        },
        {
            "field": "NationalityName",
            "title": "Nationalityname",
            "type": "string",
            "format": null,
            "width": 200,
            "hidden": false,
            "template": null
        },
        {
            "field": "NationalityID",
            "title": "Nationalityid",
            "type": "string",
            "format": null,
            "width": 200,
            "hidden": false,
            "template": null
        },
        {
            "field": "NationalityFlagUrl",
            "title": "Nationalityflagurl",
            "type": "string",
            "format": null,
            "width": 70,
            "hidden": false,
            "template": "<img src='#: NationalityFlagUrl #' style='width: 64px; height: 64px;' />"
        },
        {
            "field": "NationalityFlagID",
            "title": "Nationalityflagid",
            "type": "string",
            "format": null,
            "width": 200,
            "hidden": false,
            "template": null
        },
        {
            "field": "Biography",
            "title": "Biography",
            "type": "string",
            "format": null,
            "width": 70,
            "hidden": false,
            "template": "<img src='#: Biography #' style='width: 64px; height: 64px;' />"
        }
    ],
    "DataTable": {
        "List": [
            {
                "ID": "686400cf78badf6500138270",
                "Name": "Melina Loeck",
                "PhotoUrl": "https://football-891b.restdb.io/media/686400ce78badf650013826f",
                "PhotoID": "686400ce78badf650013826f",
                "TeamName": "Brighton and Hove Albion",
                "TeamID": "6863e41f78badf6500137d10",
                "TeamBadgeUrl": "https://football-891b.restdb.io/media/6863e41e78badf6500137d0f",
                "TeamBadgeID": "6863e41e78badf6500137d0f",
                "Position": "Goalkeeper",
                "PositionID": "6756e62f050c585400050d8b",
                "SquadNumber": 28,
                "NationalityName": "Swedish",
                "NationalityID": "6863fe6578badf65001381ef",
                "NationalityFlagUrl": "https://football-891b.restdb.io/media/6863fe6578badf65001381ee",
                "NationalityFlagID": "6863fe6578badf65001381ee",
                "Biography": "https://www.brightonandhovealbion.com/player-detail-statistics-goalkeeper/548087"
            }
        ],
        "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/ReadFootballers?ID=686400cf78badf6500138270",
    "Verb": "GET",
    "Success": true,
    "ErrorMessage": null
}

Look at the DataTable -> List to see that it contains 1 footballer 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 "Footballer".

Purpose

Type "View and edit the footballer record"

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 "ball" in the filter to find a football.

Caption

Set the caption to "Footballer". Note that we will configure the history menu to show the footballer 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 football fields in this region.

Designer Video

This is the most complex form in the sample application, so this video demonstrates how to design it by creating panels and dragging fields from the toolbox:

We will add another tab to show a grid of previous clubs:

Once both the Main Top Region and the Previous Clubs tabs have been designed, each tab should respectively look like this:

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 Footballer 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 Footballer 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 Footballer Search lookup form we created previously.

Configure Grid Component

Open App Studio and select the Forms configurator.

Open Footballer Search Form Designer

Open the Footballer Search form in form designer by choosing Edit then Design.

Click on the grid to set the drill down from the footballers grid to the footballer form.

Footballer Name Column

Add a drilldown column.

Choose the Name column and hyperlink this via the ID key column name to the Footballer form:

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.

Footballer Search

Click the Footballer Search nav bar menu to open the lookup/search form:

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

Click any footballer.

Footballer Form

The footballer form should open and show the selected footballer details including their photo, national flag and club badge:

Notice also how the navigation bar now shows the Footballer form as being open?

History Menu

When the history menu appears, we want the name of the footballer 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 Footballer form and click the History Menu tab:

Click this button to open the 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 footballer from the footballer search lookup form, and then click on the History drop down menu. You should see the last footballer you opened at the top of the list?

Previous Clubs

In order to show the previous clubs for the footballer, we will need to create a new data source request, then connect this to our form grid.

Configure the Footballer Club History Data Source Request

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

Create Footballer Club History

Select the RestDb.io/Footballer/Teams folder and add a new data source request:

Name it "Footballer Club History" and add this URL:

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

Parameters

We want only the clubs linked to a footballer, so we need to create a parameter which will be appended to the URL at run-time.

Click the Add Parameter button to add this parameter:

The parameter is added to the list:

Send Request

Test the request. Use 674cb1cb050c58540003e206 as the Footballer-ID field when testing as this is the ID of a footballer who was transferred from one club to another:

The JSON returns 2 footballer clubs.

Wire up the Previous Clubs Grid

We can now point the grid on the Footballer form at this footballer club history data source request.

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

Add Read Data Source

Click on the grid on the Previous Clubs 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 Footballer form, we do not need to see any of the footballer columns in this grid. Here are the properties for each column you should set:

Drill Down

We previously created the Club form so we can drill down into it from this grid. Use the Add button on the Grid tab, Drill Down left tab and set the column name, key column name and form as follows:

Use the Save button to save the drill down.

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 Footballer Search item. Search for Harry Kane, and drill down into his footballer record to open the form.

The Footballer form now shows the previous clubs in the grid:

Drill Down

Test the drill down by hovering over the Club Name:

Click this hyperlink to open the Club form.