Footballer Form: Update

This is the process we will follow.

UPDATE

• Create custom variables for each field

• Add an 'update' data source for updating a single footballer record

• Link the key footballer record identifier to this ReST API end-point if necessary

• Map the custom variables mapped to the form fields to the data source body fields

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

• Configure the update button

• Test that we can update a footballer using the Update button

Create Custom Variables

In order to update a footballer record, we need to create custom variables for each form field so that we can send these to the ReST API.

Open the App Studio, then select the Custom Variables configurator.

Add the following client-side custom variables:

• Footballer-Name

• Footballer-PositionID

• Footballer-TeamID

• Footballer-SquadNumber

• Footballer-Biography

• Footballer-PhotoURL

The new custom variables should now be displayed:

We will need to link these new custom variables to each form field, but first we will use them in a new data source to update the record.

Add an UPDATE 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 "Update 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 by referencing this list of ReST API end-points.

URL

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/UpdateFootballer?ID=

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

Then change the HTTP Verb to PATCH. The configurator should now look like this:

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.

Body

When we are updating or creating data, we will be sending the data in the body of the request, so we configure this before sending the request to test it, using the new custom variables. Here is the empty Body tab:

We will always use the JSON body format as this gives us maximum control.

From the ReST API specification, we know that this endpoint expects data in this format:

{
    "name": "",
    "squadNumber": 0,
    "biography": "",
    "PhotoURL": "",
    "PositionID": "",
    "NationalityID": "",
    "TeamID": ""
}

Our job is to now associate each field with the appropriate custom variable.

Put the carat inside each double quotation and use the Insert Variable button to select the respective custom variables setup above.

After all have been inserted, the body should now look like this:

{
    "name": "<#Footballer-Name#>",
    "squadNumber": <#Footballer-SquadNumber#>,
    "biography": "<#Footballer-Biography#>",
    "PhotoURL": "<#Footballer-PhotoURL#>",
    "PositionID": "<#Footballer-PositionID#>",
    "NationalityID": "<#Nationality-ID#>",
    "TeamID": "<#Footballer-TeamID#>"
}

Send Request

It is best practice to now click this button on the Details tab to send the request to the ReST API.

The problem however is that we would have to update an existing record in order to test this.

The best way of course to test this is to use the actual footballer form we created here, and link that form to this data source request, then we can test it.

Edit Form

Open App Studio, open the Forms configurator, then select the Footballer form:

Click the Edit button to open the form properties modal popup.

Data Sources

Click the Data Sources tab. There are 4 CRUD data sources lines. Click this database icon to assign the Update 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, then click the Select button.

This Update data source request should now appear in the list of assigned data source requests:

Now click the Apply button on this form, in order to persist the form properties before designing your form. The Update 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, and select the Main Top Region tab:

Fields

Click on each of these fields in turn and assign the appropriate custom variable you added previously:

Save Form

Now save the form design using this button:

The form fields are now assigned to the new custom variables used in the body of the new data source request to update the record.

We will now configure the update button on the form.

Configure Update Button

Open App Studio, open the Forms configurator, then select the Footballer form and click the edit button. Then click the CRUD tab:

There are four mechanisms to control: Create, Read, Update and Delete.

Create

A new record can only be created from the app toolbar using the Add drop down menu:

Use this configurator to add any form to this list.

Read

Reading form data is always visible when a form is opened and a record is loaded.

Update

The update button lives together with the delete button top right on the form:

It can be hidden, its caption set and its icon set using these controls:

Delete

The delete button lives together with the update button top right on the form. It can be hidden, its caption set and its icon set using these same controls.

Apply

Apply any changes to persist them before testing.

Test

You can now test your configuration by clicking on the History drop down menu and selecting a footballer to open the form.

Add an X to the end of the Name field. Then press the Save button. The form record update should be confirmed: