Insites Docs Developers guide Data and UsersDatabase ItemsManaging Database Items using AJAX (CRUD Operations)

Managing Database Items using AJAX (CRUD Operations)

Last updated on June 26, 2024.

This guide demonstrates how you can create, list, update, and delete database items (Records) using JavaScript and GraphQL.

Important

The actions outlined in this document can be performed using the Instance Admin. For more details, please visit the Managing Database Items documentation.

Prerequisites

To follow the steps in this tutorial, you must understand how to use GraphQL as well as interact with the Fetch API.

Steps

Managing Records using AJAX by implementing the full CRUD cycle is a five-step process:

  • Step 1: Define prerequisites: Table, Form, Page, and javascript functions used in multiple places
  • Step 2: Implement the 'Create' operation
  • Step 3: Implement the 'Read' operation
  • Step 4: Implement the 'Update' operation
  • Step 5: Implement the 'Delete' operation

Step 1: Define prerequisites: Table, Form, Page, and javascript functions used in multiple places

First, create the necessary database table, form, page, and javascript functions.

Create the table:

app/schema/feedback.yml

Then create the form object:

app/forms/feedback.liquid

Important

For example purposes is set to . This means you can edit any record on a live example page. In real-world scenarios, please configure Permissions to prevent users who are not logged in from submitting a form.

Lastly, create the javascript file:

app/assets/Feedback.js

Step 2: Implement the 'Create' operation

To implement a 'Create' operation, start by creating a simple form that works without JavaScript:

app/views/partials/create.liquid

Then, add JavaScript to make it work in the background:

app/assets/Feedback.js

Step 3: Implement the 'Read' operation

To implement a 'Read' operation, first create a GraphQL query to pull out the data:

app/graphql/feedback.graphql

Then you need to create a page that returns JSON with the data:

app/views/pages/feedback_list.json.liquid

You also need some HTML that will contain the data and a button that will trigger data download:

app/views/partials/read.liquid

You also need JavaScript to get the data from the server and render it into the HTML:

app/assets/Feedback.js

Step 4: Implement the 'Update' operation

Implementing an 'Update' operation is similar to the 'Create' operation, with a couple of differences:

  1. Add a hidden input with the set to PUT
  2. Send the ID of the Database Item you want to edit

app/views/partials/update.liquid

JavaScript is also very similar, but it takes ID from the input defined above and puts it into the URL.

app/assets/Feedback.js

Step 5: Implement the 'Delete' operation

To implement a 'Delete' operation, start by creating a and an . After all, it is roughly analogous to an 'Update' operation

Note

Please refer to the documentation on Data Backup and Removal to review data retention and backups on Insites.

app/views/partials/delete.liquid

app/assets/Feedback.js

Next Steps

Congratulations! You now know how to implement CRUD operations for database items. Next, visit the documentation on persisting data with database items for further learning: Persisting Data with Database Items

Have a suggestion for this page?

Didn't quite find what you are looking for or have feedback on how we can make the content better then we would love to hear from you. Please provide us feedback and we will get back to you shortly.