Using App Connect Form Repeater with Update Record Forms

Intro

Form repeater can be used in update record forms in order to easily update nested data to your database table.

Similar to our Insert Data tutorial - we will show you how to update a user and its contacts - so make sure to check it first, before continuing here.
The user will be stored in the main table, while its contacts will be stored in a sub table.

Overview

We created an update record page with a list of records an a form:

Our dynamic list gets its data from a database query / API action which returns a nested query:


And our form is a standard Update Record form, which gets its data from a Data Detail region, on click of the dynamic list records. It also contains a hidden input for sending the record ID to the update server action:

In our form we also have a Form Repeat, which we are going to use to edit the nested data and send it to the database update action:

Form Repeater Setup

We want to use the repeat with the nested data (contacts) returned by our main record (user). Select the Form Repeat:

Remove the default value 1 and click the dynamic data picker:

Then we select the contacts nested data, available under the data detail:

Our form repeat now has the dynamic data selected. We need to add the data for each record in the inputs inside it:

Select the first input and add new dynamic attribute:

Select Input > Value:

And select a binding from under the form repeat in the data picker:

In our case this is the contact name:

We do the same for the rest of the inputs and save our page:

Server Side Setup

Open the Server Connect panel and create a new API Action:

We call it contact_update.
Then we select input and click the browse button for the linked page option:

Browse to your update record page and select it:

Then select the form from the dropdown and click the import button:

You can see your form inputs imported under $_POST:

Add a new step in your API Action:

Select Database Update:

And open the database update options:

Open the table dropdown and select the main table - users:

Make sure to select the correct POST variabless for your database table fields:

Then open the add column dropdown and select the sub table - contacts:

Select dynamic data for the sub table:

We select the table repeat array under POST:

Setup your update conditions:

And pick the hidden input storing your main record ID:

Click OK when you are done:

Back on the update record page - select your form and convert it to a Server Connect form:

Then select a server action:

And select the update server action we just created:

Save your page and you are done. You can preview the results in your browser. The nested contacts data is loaded in the table repeater and you can edit it, together with the main record:

2 Likes

Thank you very much for this useful tutorial. I am having a doubt that if my main table record is already inserted and 1 record is inserted in my nested table. Now if I want to insert another record in my nested table (by use of ‘Add’ button in the form) and update something in my main table record, how to handle both insert and update in such a case?