Add record strategy with Xano

Ask us anything How do I?
1

Hi there,

I have question about the best strategy for creating a new item from Weweb to Xano, based on some specific requirements.

I have a two pages that are working perfectly:

  • list of products: I can select a record a go to the details page
  • product details: I can fetch the specific product data from Xano and update it using the POST xano-endpoint/products/{product_id} endpoint.

On the list of products I have a button: new product.
Now my question comes in to play.

What is the best strategy to use when I preferably don’t want to use a modal to add the new record, but just want to use the existing product details page. I am thinking about the following alternatives:

After new product button click:

  • navigate to the product details page without product_id. Empty form is shown, I fill in the form and submit it. The workflow behind the form has a conditional that checks if product Id is present. If it is use POST xano-endpoint/products/{product_id} if not use POST xano-endpoint/products. Disadvantage of this is the sort of duplicate configuration of both Xano requests. This could be overcome by changing the xano function stack to combine update and create record in one api endpoint (having a nullable input: project_id). And I don’t know if Xano fetch product (by id) hits an error not receiving the ID, so I may need to make changes there to support this or only fetch the collection on page load when product id is present.
  • add (empty) record to xano, and immediately redirect to product details page fetching the newly created record. After that it just follows the existing worklow to update the product. Disadvantage is that when I want to cancel the record creation, I have to implement a cleanup procedure to delete “empty” records.
  • opposite to my requirement I will use a modal after all, to add a product with limited details (only name) after that I redirect to the details page to be able fill in the rest of the details. The page will have a cancel button to go back to overview and there will be a delete button to be able to cancel/remove the new product completely.
  • Other option like…

Interested to see which strategy you all would use. Thanks

2

I think you can create a workflow to separate concerns using a true/false. I do this all the time to split an add endpoint vs an edit endpoint both using the same workflow.

1 Like
3

If you need or want help, I’m happy to jump on a brief call.

4

Can I use a dynamic page base_url/product/{product_id} used to show details of a fetched record also as the page to create new item with passing the product_id like base_url/product/.

Plan is to only fetch the collection from xano, when product_id is not empty.

5

Yup. You’d just need to separate your edit vs review functionality

1 Like
6

I decided to go with modals (or drawers if you like) to add new records. I’m also using these modals as a multi-page sections and I’m able to quickly add this functionality to any screen I want (you might want to add products from other pages as well). I also have a variable f.e. last_added_product in which added record id is stored and can be used on any page you need (to fetch XANO f.e to get product details, to bind added product to other entity an so on). I use these solution almost every time. Your logic is simpler, easier to maintain and it follows best practices for REST APIs.

1 Like