Task: Request Data from Server

The prior example configured the front end to signal to the user that the application is making a request that may take some time to complete. In this task, we will write code that executes in the front end to request data from the back end.

1. At the bottom of the "show_tasks" function, add the following code:

    //retrieve the store data using the local server_request function to request the Google App Script function "get_stores" retrieve the employee data.
    let response=await server_request({
        mode:"get_tasks"
    })

    if(response.status==="success"){
        tag("tasks_panel").innerHTML=JSON.stringify(response)
    }else{
        tag("tasks_panel").innerHTML="Unable to get store list: " + response.message + "."
    }

2. Save the file and choose "Daily Tasks" from the application menu. Notice that the message shown indicates that we are not communicating with the most recent version of the server code.

3. Deploy your current server-side code.

In the Google Apps Script editor. Choose "Deploy...New Deployment"
Enter a description of your changes, then click "Deploy"
Copy the "Deployment ID" then update and save "config.js" in VS Code.

4. Choose "Daily Tasks" from the application menu. See that data from Airtable is displayed in the browser.

5. As currently configured, the "server_request" function, which is defined atop the "system.js" file, uses a "console.log" statement to write all responses to the browser console.

To view the browser console in Chrome or Edge, press ctrl+shift+j (Windows) or cmd+shift+j (Mac)
To view the browser console in Firefox, press ctrl+shift+k (Windows) or cmd+shift+k (Mac)
To view the browser console in Safari, press cmd+opt+c

server-request

Task: Request Data from Server

Next