Updating data with no-code backend REST API
In this step, we will update existing data using the no-code backend REST API.
This would allow users of the app to mark an individual task as 'done'.
![Tasks screen](/assets/image/tutorial/sample_app_tasks.png)
Go to TODOLISTS service, open the Tasks model, switch to the Integration tab.
![Tasks model, update code](/assets/image/tutorial/task_integration_update.png)
Copy JavaScript code from the Update (PATCH) tab.
![Copy to clipboard](/assets/image/tutorial/copy_to_clipboard.png)
Go back to sample code and open the file src/components/Tasks/Tasks.js. Locate the function updateTask().
// Update Task
const updateTask = (taskId, taskDone) => {
// ** INSERT UPDATE CODE HERE **
// ** INSERT UPDATE CODE ENDS **
}
Paste the JavaScript code from earlier inside the marked area.
// Update Task
const updateTask = (taskId, taskDone) => {
// ** INSERT UPDATE CODE HERE **
fetch("[YOUR LIGHTSWITCH API ENDPOINT]" + "/**** INSERT id HERE ****/", {
headers: {
"Authorization": "Bearer " + "/**** INSERT token.value HERE ****/",
"Content-type": "application/json"
},
method: "PATCH",
body: JSON.stringify({
/********** REPLACE ***********
description: "sample string",
done: true,
listid: id
*******************************/
})
})
.then(response => response.json())
.then(json => {
if (!json.success)
throw new Error(json.message)
})
.catch((error) => {
// handle error
alert(error.message)
})
// ** INSERT UPDATE CODE ENDS **
}
Append taskId variable to the URL.
fetch("[YOUR LIGHTSWITCH API ENDPOINT]" + taskId, {
Update the Authorization header to include the authorization token. If you don't see the authorization header in sample code, make sure you've configured permissions as described in configuring permissions.
"Authorization": "Bearer " + auth.token?.value,
Next, we will update the body of the request, passing in user input for the Done field.
body: JSON.stringify({
done: taskDone
})
Next, we will handle the response.
.then(json => {
// ***** UPDATED ***** //
// indicate that the action is complete
setLoading(false)
if (!json.success)
throw new Error(json.message)
// update state to reflect the new change
setTasks(tasks.map(function(task) { return task.id === taskId ? {...task, done: taskDone} : task; }))
// ***** UPDATED ***** //
})
The final output should look something like this.
// Update Task
const updateTask = (taskId, taskDone) => {
setLoading(true)
// ** INSERT UPDATE CODE HERE **
// ***** UPDATED ***** //
// added url param + taskId
fetch("[YOUR LIGHTSWITCH API ENDPOINT]" + taskId, {
headers: {
"Authorization": "Bearer " + auth.token?.value,
"Content-type": "application/json"
},
method: "PATCH",
body: JSON.stringify({
done: taskDone
})
})
.then(response => response.json())
.then(json => {
// ***** UPDATED ***** //
// indicate that the action is complete
setLoading(false)
if (!json.success)
throw new Error(json.message)
// ***** UPDATED ***** //
// update state to reflect the new change
setTasks(tasks.map(function(task) { return task.id === taskId ? {...task, done: taskDone} : task; }))
})
.catch((error) => {
// ***** UPDATED ***** //
// indicate that the action is complete
setLoading(false)
// handle error
alert(error.message)
})
// ** INSERT UPDATE CODE ENDS **
}
Save your code and go back to the app. You should now be able to flag a task as done.
![Sample app - task marked as done](/assets/image/tutorial/app_update_tasks.png)