Club/Team 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 club/team record

• Link the key club 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 club/team using the Update button

Create Custom Variables

In order to update a club/teamrecord, 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 a client-side custom variable called TeamName.

• Add a client-side custom variable called Team-Description.

• Add a client-side custom variable called Team-Badge-URL.

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 Teams folder you created previously, then use the add button menu to create a new request called "Update a Team":

Edit Properties

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

URL

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

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

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

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

Whilst the caret is still blinking after the last character typed, click on the Insert Variable button and select the TeamID variable we created previously. The URL should now show the custom variable appended to the end:

HTTP Verb

The default GET verb/method is not correct for updating a single record using the ReST API and should be set to PATCH for this specific back-end end-point.

The request 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. Open the Body tab and paste in this JSON from the ReST API specification:

{
    "Name": "",
    "Description": "",
    "BadgeURL": ""
}

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 three have been inserted, the body should now look like this:

{
    "Name": "<#TeamName#>",
    "Description": "<#Team-Description#>",
    "BadgeURL": "<#Team-Badge-URL#>"
}

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 club/team 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 Club 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 Club 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 opening the Football Industry group in the navigation bar and selecting the Club/Team item. Drill down into any club to open the form.

Add an X to the end of the Name and Description fields, or indeed click the Club Badge and upload a new image. Then press the Save button. The form record update should be confirmed: