Task: Write to Airtable

In this task, we will configure the front end to send a request to update data in Airtable.

1. Examine the newly generated HTML and notice that each "Done" button calls the "record_task" function, passing a reference to itself.

2. Update the "record_task" function with the following code:

async function record_task(button){
    const task_id=button.id.split("-")[1]

    tag(task_id).innerHTML='<i class="fas fa-spinner fa-pulse"></i>'
    const response=await server_request({
        mode:"record_task_done",
        task:task_id,
        store:button.dataset.store
    })
    if(response.status==="success"){
            tag(task_id).innerHTML='<i class="fa-solid fa-check"></i>'
    }else{
        message({
            message:"Unable to get store list: " + response.message + ".",
            title:"Error",
            kind:"error",
            seconds:8
        })
    }

}

3. Check the functionality of the "Done" button

Save the file.
The app will re-render.
Click one of the Done buttons.
Because the server code has not been updated, you get an error message.

4. Simulate a web call for server development:

Open the browser console and find the entry that reads "const payload=...".
Copy the entire statement
Edit the "debug.gs" file in the Google Apps Script editor
Replace the "const payload=..." statement at the top of the file with the version on the clipboard
Click the run button to execute the "test_web_request" function. This will allow you to debug the server-side request with the information sent from the front-end.

5. Examine the log statement that begins with "at record_task_done."

Compare parameters listed here to the block of information sent from the "server_request" function in the front end.
Notice that all information sent is in the params variable on the server

6. In the Google Apps Script editor, update the "record_task_done" function in the "app.gs" file as follows:

function record_task_done(params){
  const d = new Date()

  const record= {
    "fields": {
      "task": [params.task],
      "employee": [params.auth.id],
      "store": [params.store],
      "date": d.getFullYear() + "-" + (d.getMonth()+1) + "-" + d.getDate()
    }
  }

  const response=insert_airtable_record(base_id, api_key, "Activity", record)
  if(response.error){
    console.log(response.error)
    console.log("params.params.quantity",params.quantity)
    return {status:"failure",message:response.error}
  }else{
    console.log(response)
    return {"status":"success","records":response.records}
  }
}

7. Select "debug.gs" and click "Run" to simulate the web call again.

Notice the error indicating that the activity table does not exist.

update-airtable

Task: Write to Airtable

Next