Manage Appwrite data with Appsmith

Manage Appwrite data with Appsmith

Knight's photo
Knight

Today, I going to share a quick CRUD app that builds with Appsmith to manage Appwrite data.

Appsmith is an open-source framework to build internal tools.

[

Appsmith | Build & self-host internal tools

Quickly build any custom business software with pre-built UI widgets that connect to any DB, GraphQL or REST API, controlling everything with Javascript.

UnionJOSEPH PETTY, FOUNDERGreenflux

](appsmith.com)

Appwrite is a self-hosted backend server docker container. It's like an open-source backend for your personal use.

[

Appwrite - Open-Source End-to-End Backend Server

Appwrite provides web and mobile developers with a set of easy-to-use and integrate REST APIs to manage their core backend needs.

Appwrite Light Logo

](appwrite.io)

The final results of the app:

  1. 1.Listing of all the records
  2. 2.New record button, which will open a modal to enter a new record.
  3. 3.Record detail with the update button; this will allow updating the record
  4. 4.Delete button to delete a record.
  5. 5.A display image field

Before building the interface on Appsmith, I recommend getting all the API endpoints for Appwrite ready; a common practice I have is to test all the API endpoints on Paw first. It would help if you had your project id and API key ready for the header.

Get all the records
GET https:///v1/database/collections//documents

Create a new record
POST https:///v1/database/collections//documents with json data body

Update a record
PATCH https:///v1/database/collections//documents/ with json data body

Delete a record
DELETE https:///v1/database/collections//documents/

After testing all the endpoints and making sure it works, let's start to build the interface on Appsmith. One important rule for working on Appsmith is Naming.
You name each of your API data resources with the proper name and what it does, for example, apiGetImages , apiAddImage, apiUpdateImage, this allows you to each reference. You name each input with the function as well, newRecordTitleInput , updateRecordTitleInput, newRecordBtn, deleteRecordBtn etc. With all these naming conventions, it helps a lot when you are building the app.

Listing Record
Add the Get all records API Datasources; after successful running the API, there will be a table widget showing on the right; click on it to add as the first widget to your page. Next, edit the table, and you can select how to configure each column; you can rename the column or change the type of the column.

For example, I have a URI column; I change the type of column to image, allowing me to display images in the table list.

Add Record
Next, drag a button out to create an "Add Button", select the button and set up the onClick action to show a modal. Test with click on the button, and an empty modal with two buttons should show now. Next, edit the modal with the required field to create a new record. For example, I create a title field and URL field.

Now let's swap back to the Datasources page and create add new record Datasources; the data body should be using the input you just created on the modal.

Once the Datasources added, go back to configure the add button on the modal, click on the onClick action, select to run this Add record Datasources, click the little JS icon beside it to add more function when the button click. Finally, it should close the modal and refresh the listing.

Update Record
Once the added record is successful, let's create an update process. Please create a form with the input again, this is pretty similar to what we did for the modal to add a record, but the default value for the input will be using the selected record on the listing; you can access the value through {{.selectedRow.}}. Test with a randomly selected record on the tables to see that if the field value reflect. Once its works, configure the update button. Repeat what we have done for the Add Record Datasources as well, create an Update Record Datasources and the body should be a reference to the input that shows the selected row value. Remember to refresh the table listing once the Update Record Datasources complete.

Delete Record
Last, configure the delete button. Create a Delete Record Datasources, repeat the same process like Add and Update and make sure once delete is successful, table listing should be refreshed.

Show Record
Since one of the attributes is a URL, add an image field that references the selected row and shows it as an image on the fly.

That's all; we had built a simple CRUD app on Appsmith that manage the Appwrite data.

nocode