Different Iterate Task Use Cases

This article discusses various scenarios where Iterate Task Action can be used to perform a set of tasks repeatedly.

Use Cases Covered:

  1. Bulk insert records into Database
  2. Bulk update API data
  3. Merging multiple GraphQL API responses data
  4. Inserting multiple attachments to the AirTable Table
  5. Form repeat - Merge control values of each repeat section into single json
  6. Form repeat - Insert each repeat section into DB using iteration

Bulk insert records into Database

This use case discusses how you can insert multiple records of data into your SQL database. We will be working with Supabase which is a PostgreSQL database.

This is how you can set up the Insert Query for the Supabase Table.



The app consists of only 2 controls i.e a tablegrid which contains the records that needs to be inserted into the database table and one button which when clicked will insert all the selected records from the tablegrid to the database table.



Go to the “Insert Records’’ button’s click action and add an Iterate Task action. Select any tablegrid column as input to the Iterate Task, in our case it is the ID column.

Note: If tablegrid is selected as input to the Iterate Task action, it will iterate over all the rows present in the tablegrid. If a tablegrid column is selected as input to the Iterate Task action, it will iterate over only those rows that are selected/checked.



Inside the Iterate Task block, add a JS Code Block. Under the Input Parameters section, create an index variable to store the index value returned by the Iterate Task and also create variables for each Tablegrid column as shown below.

Code

index = index - 1;
output = {
  ID: ids[index],
  FirstName: firstnames[index],
  LastName: lastnames[index],
  Address: addresses[index],
  Email: emails[index],
  Designation: designations[index]
};

Now click on continue and create variables for each of the Tablegrid column respectively.



Now add the PostgreSQL DB Connector you have configured then select the Insert Query and pass the JS Code Block output variables here.



This step is optional, you may add toasts to the success and error branch of the DB Connector.



Finally, run the app and select any of the rows from the TableGrid and click on the “Insert Records” button.



Selected records from tablegrid appear in the Supabase table, once the “Insert Records” button is clicked.

Bulk update API data

This use case discusses how you can send multiple API requests using Iterate Task. To create a free API with custom data will be using our API Generator service: https://apigenerator.dronahq.com/

API Response (before invoking refund request)

[
  {
    "CustomerID": "r_001",
    "FirstName": "Jaren",
    "LastName": "Nolan",
    "Email": "Adelia.Rohan@hotmail.com",
    "Plan": "Starter",
    "RefundAmount": "$0",
    "RefundStatus": "Refunded",
    "RefundReason": "N.A",
    "id": 1
  },
  {
    "CustomerID": "r_002",
    "FirstName": "Amani",
    "LastName": "Doyle",
    "Email": "Kaleb15@hotmail.com",
    "Plan": "Business",
    "RefundAmount": "$300",
    "RefundStatus": "Not Refunded",
    "RefundReason": "N.A",
    "id": 2
  },
  {
    "CustomerID": "r_003",
    "FirstName": "Mireya",
    "LastName": "Lind",
    "Email": "Violet38@yahoo.com",
    "Plan": "Buisness",
    "RefundAmount": "$300",
    "RefundStatus": "Not Refunded",
    "RefundReason": "N.A",
    "id": 3
  },
  {
    "CustomerID": "r_004",
    "FirstName": "Ahmad",
    "LastName": "Kshlerin",
    "Email": "Melissa.Lesch33@gmail.com",
    "Plan": "Business",
    "RefundAmount": "$300",
    "RefundStatus": "Not Refunded",
    "RefundReason": "N.A",
    "id": 4
  },
  {
    "CustomerID": "r_005",
    "FirstName": "Briana",
    "LastName": "Reichert",
    "Email": "Kendrick.Willms17@hotmail.com",
    "Plan": "Enterprise",
    "RefundAmount": "$500",
    "RefundStatus": "Not Refunded",
    "RefundReason": "N.A",
    "id": 5
  },
  {
    "CustomerID": "r_006",
    "FirstName": "Julian",
    "LastName": "Gleason",
    "Email": "Abe_Schulist91@hotmail.com",
    "Plan": "Enterprise",
    "RefundAmount": "$500",
    "RefundStatus": "Not Refunded",
    "RefundReason": "N.A",
    "id": 6
  }
]

This is how you can set up the REST API to process a single refund request.



For this use case, we are going to create an app which will process refunds for the users selected. The app consists of only 3 controls i.e a tablegrid which is binded to the API’s data, one dropdown which contains different reasons for refund and one button which when clicked will trigger the process refund logic.



Go to the “Process Refund’’ button’s click action and add an Iterate Task action. Select any tablegrid column as input to the Iterate Task, in our case it is the CustomerID column.



Inside the Iterate Task block, add a JS Code Block. Under the Input Parameters section, create an index variable to store the index value returned by the Iterate Task and create a variable to store the id column from the Tablegrid as shown below.

Code

output = ids[index-1];

Now click on continue and create a variable id to store the JS Code Block output.



Now add the REST API Connector you have configured and select the PATCH request which will update the refund status of the user. Pass the appropriate values to the connector’s fields as shown below.



After the iterate task block, add the reset control data action and select the tablegrid control.



This step is optional, you may add toasts to the success and error branch of the Rest API Connector.



Finally, run the app and select any number of rows from the TableGrid, select the refund reason and click on the “Process Refund” button.




API Response (after invoking refund request)

[
  {
    "CustomerID": "r_001",
    "FirstName": "Jaren",
    "LastName": "Nolan",
    "Email": "Adelia.Rohan@hotmail.com",
    "Plan": "Starter",
    "RefundAmount": "$0",
    "RefundStatus": "Refunded",
    "RefundReason": "N.A",
    "id": 1
  },
  {
    "CustomerID": "r_002",
    "FirstName": "Amani",
    "LastName": "Doyle",
    "Email": "Kaleb15@hotmail.com",
    "Plan": "Starter",
    "RefundAmount": "$0",
    "RefundStatus": "Refunded",
    "RefundReason": "Requested by customer",
    "id": 2
  },
  {
    "CustomerID": "r_003",
    "FirstName": "Mireya",
    "LastName": "Lind",
    "Email": "Violet38@yahoo.com",
    "Plan": "Starter",
    "RefundAmount": "$0",
    "RefundStatus": "Refunded",
    "RefundReason": "Duplicate",
    "id": 3
  },
  {
    "CustomerID": "r_004",
    "FirstName": "Ahmad",
    "LastName": "Kshlerin",
    "Email": "Melissa.Lesch33@gmail.com",
    "Plan": "Starter",
    "RefundAmount": "$0",
    "RefundStatus": "Refunded",
    "RefundReason": "Duplicate",
    "id": 4
  },
  {
    "CustomerID": "r_005",
    "FirstName": "Briana",
    "LastName": "Reichert",
    "Email": "Kendrick.Willms17@hotmail.com",
    "Plan": "Starter",
    "RefundAmount": "$0",
    "RefundStatus": "Refunded",
    "RefundReason": "Requested by customer",
    "id": 5
  },
  {
    "CustomerID": "r_006",
    "FirstName": "Julian",
    "LastName": "Gleason",
    "Email": "Abe_Schulist91@hotmail.com",
    "Plan": "Starter",
    "RefundAmount": "$0",
    "RefundStatus": "Refunded",
    "RefundReason": "Fraudulent",
    "id": 6
  }
]

Merging multiple GraphQL API responses data

This use case discusses how you can query data from multiple GraphQL APIs and merge those responses into one. To create free GraphQL APIs with custom data will be using our API Generator service: https://apigenerator.dronahq.com/

This is how you can set up the GraphQL API to query data.



The app consists of only 3 controls i.e a tablegrid which will display the merged GraphQL API responses, one multi-select dropdown which contains different GraphQL APIs id and one button which when clicked will fetch data from the GraphQL ids selected, combine them and display it on the tablegrid control.



Go to the “Display Data’’ button’s click action and add an Iterate Task action. Select the dropdown as input to the Iterate Task, in our case it is graphqlids.



Add the GraphQL Connector you have configured and pass the Iterate Task’s value as input to the id field.



Now click on continue and create a variable data which will store the API’s response.



Now add a JS Code Block outside the Iterate Task block, under the input parameters section create a variable data pointing to the GraphQL Connector’s response.

Code

const resValueArr = [];
for(let [itrKey, itrValue] of Object.entries(data)) {
  for(let [resKey, resValue] of Object.entries(itrValue)) {
    resValueArr.push(...resValue);
  }
}
output = resValueArr;

Now click on continue and create a variable data to store the JS Code Block output.



Lastly, add a Set Control Value action which will set the JS Code Block’s output to the tablegrid.



Finally, run the app and select the GraphQL ids you want to load data from, and click on the “Display Data” button.

Inserting multiple attachments to the AirTable Table

This use case discusses how you can insert multiple attachments to the Airtable’s Table. To follow along make sure you have set up your Airtable Connector inside the DronaHQ Studio, if not then read this article.

For this use case, we have created a Table with 2 fields, Email and Attachments. The Email column field type is set to Email type and Attachments column field type is set to Attachment.



Inside the studio, we have taken one textfield for email input, one file upload control for uploading attachment images and one button “Insert Record”.



Go to the “Insert Record’’ button’s click action and add an Iterate Task action. Select the file upload control as input to the Iterate Task, in our case it is attachments.



Inside the Iterate Task block, add a JS Code Block.Under the Input Parameters section, create a variable imgURL which will store the Iterate Task’s value.

Code

output = {
  "url": imgURL
}

Now create a variable which will store the JS Code’s output, in our case it is imgArray.



Add a JS Code block outside the Iterate Task block, create one variable images which will point to the previous JS Code Block’s output.

Code

const imgArray = [];
for(let [key, value] of Object.entries(images)) {
  imgArray.push(value);
}
output = imgArray

Now create a variable which will store the JS Code’s output, in our case it is attachments.



Now add the Airtable Connector and select the Create Row option. Bind the Email field with the Email textfield and Attachments field with the JS Code Block output.



This step is optional, you may add toasts to the success and error branch of the Airtable Connector.



Now run the app, enter the email and upload images using file upload control and click on the “Insert Record” button.



In the Airtable table, you will see the newly added record.



Form Repeat - Merge control values of each repeat section into single json

This article discusses how you can fetch values from controls placed inside the Form Repeat container, create a json out of it and insert that data into a Supabase(PostgreSQL) table.

This is how you can set up the Insert Query for the Supabase Table.



For this use case, we have taken one textfield for email, one form repeat control which contains 2 textfields “Expense Details” and “Amount” and one “Submit” button.



Go to the “Submit’’ button’s click action and add an Iterate Task action and select the form repeat control as input to the Iterate Task.



Inside the Iterate Task block, add a JS Code Block.Under the Input Parameters section, create a variable value which will store the Iterate Task’s value.

Code

output = value;

Now create a variable which will store the JS Code’s output, in our case it is expenseData.



Add a JS Code block outside the Iterate Task block, create one variable expenseData which will point to the previous JS Code Block’s output.

Code

const expense_details = [];
for(let [key, value] of Object.entries(expenseData)) {
  expense_details.push(value);
}
output = expense_details;

Now create a variable which will store the JS Code’s output, in our case it is expense_details.



Now add the PostgreSQL DB Connector you have configured then select the Insert Query, bind the Email field with the Email textfield and Expense_Details field with the JS Code Block output.



This step is optional, you may add toasts to the success and error branch of the DB Connector.



Finally, run the app and click on the “Submit” button.



Textfields data will appear in the Supabase table once the “Submit” button is clicked.



Form Repeat - Insert each repeat section into DB using iteration

This article discusses how you can fetch values from controls placed inside the Form Repeat container and insert those values into a MySQL table

This is how you can set up the Insert Query for the MySQL Table.



For this use case, we have taken one form repeat control which contains 3 textfields “Name”, “Email” and “Designation” and one “Submit” button.



Go to the “Submit’’ button’s click action and add an Iterate Task action and select the form repeat control as input to the Iterate Task.



Inside the Iterate Task block, add a JS Code Block. Under the Input Parameters section, create an index variable to store the index value returned by the Iterate Task and also create variables for all the textfields as shown below.

Code

index = index - 1;
output = {
  name: names[index],
  email: emails[index],
  designation: designations[index]
};

Now click on continue and create variables for each of the textfield values respectively.



Now add the MySQL DB Connector you have configured then select the Insert Query and pass the JS Code Block output variables here.



This step is optional, you may add toasts to the success and error branch of the DB Connector.



Finally, run the app and click on the “Submit” button.



Textfields data will appear in the MySQL table once the “Submit” button is clicked.