How to define and invoke a PATCH request in Xano from WeWeb

Introduction

I frequently utilize No Code tools for my professional and personal projects. I document my insights and experiences in my No Code & Low Code blog series. Recently, I've been using two tools extensively: WeWeb and Xano. Each serves a distinct purpose, with WeWeb focusing on front-end development and Xano on the backend.

Last week I was struggling a bit with partial updates (in comparison with passing all values) in my Xano backed. Thanks to Xano support, they helped me with a video with which I figured out what I was missing. I then tried to pass the input from my WeWeb front end to see it working end to end. When I used to build solutions using code, I’d used PATCH a lot, but doing it in these tools was new and hence there was a bit of playing around.

Having gained clarity on the process, I decided to write a brief blog post outlining the steps involved, hoping it might help someone facing a similar situation to what I encountered last week.

Let’s get going 🛹

A bit of context

In the product I’m currently developing, many elements on the screen need to be saved without the necessity of opening the complete details of the object displayed.

A simple example that can help visualize my scenario would be, say I have an Employee table with a lot of columns. At a few points in time, I just want to update only a very few details (like the salary details), sometimes just one (like the status of an employee). From a UI perspective, imagine a list page with 8 different columns. The first column denotes the status of the employee. It will be shown as an icon (🟢,🟠,🟡,🟣, 🔴) which when clicked opens a small modal where each color denotes a status. I can select a status in the modal and close it which in turn should update the status of the employee in the backend.

For text columns, imagine an inline edit. Dropdown columns can be clicked and values can be updated.

In such cases, rather than invoking a PUT request, it’s best to invoke a PATCH which is ideal for partial updates. If you need a refresher on HTTP request methods, here’s a good one from MDN documentation.

Let’s first build the PATCH request in Xano

Time to move to building the API in Xano. For the sake of this article, I created a sample table called “event” and added a handful of records using Xano’s AI feature.

Here is the schema of my table

A few sample records

One of my favorite features in Xano is the automatic building of API endpoints when a table is defined. Here is the set of endpoints that were generated for the event table.

There is a PATCH method that comes by default. Let’s click on it to see how it is defined.

You can perform partial updates with this template too, it requires a few different sets of steps than what we will see below. In our case, I’m going to make an alternate set of steps to use a PATCH request directly instead of an EDIT record.

• Click on any input column and remove the database link. We do this because we don’t need all the input columns. Take a look at the purple box that reads “Remove Database link”, and click on the link. It will show a confirmation modal, click on Confirm. Once done, the Inputs section will be empty.

• 

  Now add a column of type JSON as an input. Below is how I defined it.

  

• On adding the input, let’s move on to the Function section. As a first step, delete the existing EDIT function that came by default.

• Add a new function “Get All Raw Input (Webhook)” as below

• Clicking on the same opens up a configuration window, I’m just retaining the default values.

• 

  As a next step, add the PATCH record function.

• 

  On clicking PATCH record, it will show the list of tables present in the database. We choose the table for which we require the function. In my case, I chose the event table. On choosing the table, we should see a screen as below.

• 

  There are only two fields to need to be filled in, field_value and item. field_value is the value that will be used to fetch the unique record, in my case, it will be the id column of the event table (in the API it is event_id). Against the item field, we choose the input “event_updates”. In short, what we do is provide information to fetch a unique record and the values that need to be updated. This is how we map the input.

This is how I gave the sample data to Run the API.

• On executing Run, the record with id 3 is updated with the value “Saffron Falls” for the location field. All other fields remain untouched which is exactly what we want.

• 

• Let’s now update the category column. Here’s the value that I gave in the Run command.

• 

  On executing the Run command, the category column is updated with Competitive Racing.

• 

That is all as far as the PATCH request setup is concerned in Xano.

Now let’s focus on WeWeb

• As a first step, add the PATCH API to Collections in WeWeb.

Let’s add a few simple screens to Add an Event, List the Events present in the database, and Edit an event. Since the focus of this blog is not creating a User Interface in WeWeb, I’m not delving into the details.

For the Add Event screen, I added a simple form container and a couple of text inputs, select fields, and a button to submit the form. On submit (at the form container level) I invoke the POST request in Xano (This was automatically created by Xano and I did not make any change to it).

Below is how my Add Event screen and the corresponding workflow look like

Workflow on submit of Add Event

For the List Events screen, I added a Table element and mapped the objects that are returned from the GET request in Xano (again, I did not make any changes to the default API that Xano provided). I then map each field to the appropriate column from the table.

The point of interest from this post’s perspective is the on-change events that I invoke from status and category dropdowns. This is where I invoke the PATCH request and pass the event_id and the value of status or category depending on which drop-down was clicked.

Workflow on change of Status column

I used the formula Create Object under the Object category and defined it as 👇

I did a similar workflow for the On change of Category column too.

The Edit Event screen, it’s a duplicate of the Add Event with 2 changes:

• I map the init property to the values from Xano’s Get Individual Event API

• I invoke the PUT request on submit.

• 

  Workflow on submit of Edit Event

Camera, Action, Roll 🎬

I did a quick screen recording where I walked through the above-explained screens and workflows.

Here’s the link to my Loom video.

Conclusion

In this post, we saw how to define a PATCH request in Xano and pass field values from WeWeb. Since this is a mini blog, I just focused on the key parts rather than showing how to build pages in WeWeb.

Hope you found it useful. Ciao until next time!

P.S. I build internal tools & SaaS products for Clients using tools like WeWeb, Xano, toddle, and more. Have an idea that you want to bring to life or need help building software, send me a message on LinkedIn or DM me in X.