# 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](https://weweb.io) and [Xano](https://xano.com). 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](https://developer.mozilla.org/en-US/docs/Web/HTTP/Methods) from MDN documentation.

<div data-node-type="callout">
<div data-node-type="callout-emoji">💡</div>
<div data-node-type="callout-text">Since this is a mini blog, I plan to just to get on the core of the article title 😁</div>
</div>

## 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

![](https://cdn.hashnode.com/res/hashnode/image/upload/v1740309658252/7d890e22-564c-4c2e-bec4-143077cb7386.png align="center")

A few sample records

![](https://cdn.hashnode.com/res/hashnode/image/upload/v1740309706004/4b21cdf8-a95d-40eb-941a-3fe2257f0168.png align="center")

![](https://cdn.hashnode.com/res/hashnode/image/upload/v1740309727678/3aff2e68-f40c-4853-80ec-24125401eb3c.png align="center")

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.

![](https://cdn.hashnode.com/res/hashnode/image/upload/v1740310009249/07763c05-5403-4a3c-b2c6-47b676926440.png align="center")

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

![](https://cdn.hashnode.com/res/hashnode/image/upload/v1740310079370/c8fa41c2-98ce-49e1-bd45-54aa3a168c0b.png align="center")

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.
    
* ![](https://cdn.hashnode.com/res/hashnode/image/upload/v1740310323325/66a1524b-dfc9-4389-a30d-e73b10e4a757.png align="center")
    
    Now add a **column of type JSON as an input**. Below is how I defined it.
    
    ![](https://cdn.hashnode.com/res/hashnode/image/upload/v1740310629749/fade5392-a473-413c-84f2-ddb517236c52.png align="center")
    
* 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
    

![](https://cdn.hashnode.com/res/hashnode/image/upload/v1740310943211/5d581477-c71b-4ac2-8201-0e87e4b8afc6.png align="center")

* Clicking on the same opens up a configuration window, I’m just retaining the default values.
    
* ![](https://cdn.hashnode.com/res/hashnode/image/upload/v1740314397138/5375b05f-1db1-4277-b65e-56e6b030e844.png align="center")
    
    As a next step, add the **PATCH record** function.
    
* ![](https://cdn.hashnode.com/res/hashnode/image/upload/v1740314589073/572cc3b4-0f08-43dc-8f82-7c05e50723f4.png align="center")
    
    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.
    
* ![](https://cdn.hashnode.com/res/hashnode/image/upload/v1740314813506/8718d410-af04-444c-a462-0f90a7ebd09d.png align="center")
    
    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.
    

<div data-node-type="callout">
<div data-node-type="callout-emoji">💡</div>
<div data-node-type="callout-text">Make a note of the sub-path or the field_value mapping. x1 holds the entire raw input. We need to navigate to event_updates and then to event_id</div>
</div>

![](https://cdn.hashnode.com/res/hashnode/image/upload/v1740315938489/5e0e5a64-97fe-4e1c-80f7-2d22cdbc279a.png align="center")

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

![](https://cdn.hashnode.com/res/hashnode/image/upload/v1740316057929/b0b2eea9-43da-4bd9-a75c-d69a3365b0a0.png align="center")

* 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.
    
* ![](https://cdn.hashnode.com/res/hashnode/image/upload/v1740316251023/d482a333-e488-475b-91ae-4629a190be18.png align="center")
    
* Let’s now update the **category** column. Here’s the value that I gave in the Run command.
    
* ![](https://cdn.hashnode.com/res/hashnode/image/upload/v1740316421541/fe537643-ab82-4641-aded-c13b038c3597.png align="center")
    
    On executing the Run command, the **category** column is updated with **Competitive Racing**.
    
* ![](https://cdn.hashnode.com/res/hashnode/image/upload/v1740316557791/8d4aa6cc-62a5-427c-9643-4fd6c30d79c0.png align="center")
    

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.
    

![](https://cdn.hashnode.com/res/hashnode/image/upload/v1740318792996/47758359-320f-404c-bfd5-f8077765eaa9.png align="center")

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

![](https://cdn.hashnode.com/res/hashnode/image/upload/v1740382239672/e4247825-88cb-4d57-ae42-cef29a856104.png align="center")

Workflow **on submit** of **Add Event**

![](https://cdn.hashnode.com/res/hashnode/image/upload/v1740383152661/fdc346ac-0775-4d54-98b4-c8b60e6ca148.png align="center")

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.

![](https://cdn.hashnode.com/res/hashnode/image/upload/v1740382335518/9f881556-5ff8-4ff0-a3fb-26f3e8e63abc.png align="center")

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

![](https://cdn.hashnode.com/res/hashnode/image/upload/v1740382380265/f19f4157-6d27-4607-914d-771c951fd887.png align="center")

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

![](https://cdn.hashnode.com/res/hashnode/image/upload/v1740382432328/3ac20a5a-df17-4a9c-81b2-e164e89502c8.png align="center")

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.
    
* ![](https://cdn.hashnode.com/res/hashnode/image/upload/v1740382604925/3ecbc2dc-85e7-4038-b2b1-82ed2a4f9deb.png align="center")
    
    Workflow **on submit** of **Edit Event**
    

![](https://cdn.hashnode.com/res/hashnode/image/upload/v1740383102434/f4387c62-6ab5-4497-8447-e78f687b82bc.png align="center")

## 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](https://www.loom.com/share/b1d85d18e6084661880e5522aacabe0c?sid=3f66fe9f-b282-4eb7-9200-3d2b06c37655).

## 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*](https://linkedin.com/in/sambhavi-dhanabalan) *on LinkedIn or* [*DM*](https://x.com/saminsolitude) *me in X.*