CRUD walkthrough using Xano

[Aloy]

Hey there, I could really use a walkthrough of how to set up basic CRUD using Xano. I’m a bubbler by background, so apologize in advance if I refer to it’s language a bit. I have started trying to learn WeWeb by recreating a bubble app we use as an internal tool to manage a business function.

Starting simply by creating a database in Xano called Resources that holds info about resources that can be consumed in the BOM (bill of Material) of making a product. XANO was EZPeezy, worked great. Here is an image of the product database.

I pre populated some data on the Xano side. Then set up a page/UX that lists the records in the database and has buttons to hide/show a form for entering new, and a delete button for deleting individual records. Again, EZPeezy on the WeWeb UX design side.
See each here:

and here:

Relative to CRUD, setting up to READ from Xano was easy. No issues getting that to work. But unable to figure out ADD, EDIT or DELETE.

For ADD, my new resources form, collects all of the input fields. And when I try to trigger an action to add a record to the database, unlike in Joyce’s video with airtable, no option to “add a record” shows up. When I try using an api and pasting in the url for add a record, I get this:

For the life of me, I cannot figure out what to put in the key field. Nor can I even find the input fields from the form.

For DELETE records, I have the same issue. no action item with this option and calling the URL/API leads me to the same odd Key/result fields that I can’t navigate when I just want to delete the “current record” from the repeating group.

For EDIT, I would like to allow the user to edit in place the fields with boxes around them. (description and cpu). In bubble, we just selected “bind to active record” and it worked. Is there a proper weweb alternative to “bind to active record”?

SORRY for the length of all this! Appreciate if you can point me to a tutorial that can help me figure this out.

[Joyce]

Hi @Aloy

No problem at all. On the contrary, it’s great that you took the time to provide the context!

Indeed, we are currently working on a Xano datasource plugin that will have the “add a record” action. This will make it easier to add Collections and setup CRUDs with Xano. We expect we can release this later this month.

In the meantime, you have to use the REST API datasource to send data to Xano like you started doing.

Here’s a tutorial that might help you with this. If you prefer a video format, the full video is at the top of that page

Basically, the way it works is that, for each column in your Xano table, you “Add item” in WeWeb.

The “Key” is the name of the column in the table, for example “supplier” or “CPU”, bearing in mind that the key name is case sensitive.

The “Value” is the value you want to send to Xano in that column. You can bind this value to the variables that are on your page.

Does that help?

[Aloy]

Great, thanks. working through the tutorial. QQ…the last line of the instruction to set up the api says this,

• Type in “items” as the result key. Note that this is specific to how Xano returns the data. Other APIs may require a different result key.

If other APIs require a different key, how would I know that? where would I find the right value to enter into this field?

[Aloy]

Hey Joyce. Still struggling here but understand my issue better. Tutorial helped. I didn’t understand that I needed to hand type the value of the " Key" field. Nor that the value in the input fields was found under that VAR tab, not the collections tab.

So, got that now. But the issue that remains for me is that the VAR tab isn’t showing all of the input fields I need to connect to. Specifically it doesn’t look like it is showing any of the fields that are input short answer fields. In the picture below you can see that in my New Resource section I have 4 fields to choose from.

But I also need the other two called Input_name and Input_description. They don’t show up in the VAR tab.

Any workaround for this? Am I looking in the wrong spot?

[Joyce]

Mmm not sure what’s going on here. Could you share a link to your editor so we can have a closer look?

[Aloy]

Hey Joyce,
I think I figured out this bit above. If you use the template the basic form template element, it puts in a field type with the little typewriter, so the element looks like Input_name and Input_description above. Those do not show up as variables. If I deleted them and re add a new element of type short answer, those appear with the ‘four square’ grid and show up in variable lists.
So, now I see them to bind. My form looks like this:

I can bind them to the post api call like this now:

But as you can see I still get an error “400” when running a test action. Any guidance on what a 400 error is and how to troubleshoot?

Happy to share my editor. How do I do that? Just post a url here?

[Joyce]

Ok great! Well done!

I’ll look into the form template element. It might be an element we need to update on our side.

Here’s an article we wrote on how to troubleshoot workflows.

Basically, if you open response then data in the payload below the error message, you will be able to read the error message from Xano.

To share the editor, yes, you can just post the URL of your project in editing mode here or send it to me in a direct message

[Aloy]

I get an error code 400. But the guide doesn’t list what the error codes are, other than the one referenced in the example. Is there a list which would tell me what the various error code mean? I will dm you the url.

[Joyce]

Hi @Aloy,

Good point, I will add a short introduction to error codes in the documentation.

Basically:

• 100s: Informational code that indicates the request initiated by the browser is continuing.
• 200s: Success code that indicates the browser request was received, understood, and processed by the server.
• 300s: Redirection code that indicates a new resource has been substituted for the requested resource, e.g. a page is no longer under one url but under another.
• 400s: Client error code that indicates there was a problem with the request
• 500s: Server error code that indicates the request was accepted but there was an error on the server that prevented the fulfillment of the request.

Looking at your project, when I first tested the workflow, I got this response:

As you can see, the detailed response tells me there’s an “invalid email format”

So I did two things:

1. I checked that the input value in your form was of type “Email” (it was)
2. I checked that the value you were passing in your API call was the correct input field (it wasn’t)
   
   

As you can see above, the Field was bound to the incorrect variable. So I made sure it was bound to the email input variable, then checked all the other fields and found the city, state, and zip code were bound to unknown variables and updated those.

Now the workflow works.

Does this make sense?

I know workflows and API requests can be confusing at first so please don’t hesitate to tell me if anything is unclear!

I will update the user documentation with your feedback

[Aloy]

Ahhh, I see. I didn’t read the whole error log. THANK YOU!

[Aloy]

Ahhh, one more. When I tried to connect the delete api, I get an error message that doesn’t have an error code. It says network error.

I’ve confirmed that the pasted URL matches the Xano link for the delete api, but I’m not really sure what else to check relative to a network error. Any advice on this one?

[Joyce]

Hi @Aloy,

You need to make sure you remove the {contact_id} placeholder at the end of the API endpoint:

Instead, you’ll want to bind the API endpoint without the placeholder and bind the contact id to the selected item id in WeWeb:

You don’t need any headers for this API call.

However, I would recommend adding authentication to this endpoint in Xano if you don’t want anyone to be able to delete contacts from your app:

If you do that, you will need to add Authentication headers in your API call in WeWeb.

[Aloy]

Ahh, that’s how you do it. It didn’t occur to me look in editing the actual URL. Cool.
On authentication, that is next up for me. Once I finish getting CRUD done/understood, then I will go back and add authentication as my next exercise in learning this. I just have Update left.
thanks

[Aloy]

OK, hopefully last one for the crud exercise…Updating.
I did the following:

1. changed one of my fields that I want editable by the user to an input field (Input_phone#).
2. Created the workflow and successfully linked it to the get call using your URL editing trick. Seems to work.
3. Then tied field in xano (phone) to form field in the flexbox (Input_phone#). I got the 400 error. Got excited because I thought I knew how to fix this. But…tricky part here is that in Weweb, field shows as a ‘phone number’, a type which Xano doesn’t have, so I have data field set up as an integer. This integer=>phone number appears to work fine on the Read Collection as I can see the initial value. But I don’t see a value in the link field when trying to update. Is there a best practice to store phone numbers to sync with xano?

Related…see here…value shows up as “” even though it should read a number 831245xxxx.

So at the moment unable to update the phone number ‘on change’ and suspect it must be in me misunderstanding the field set up for phone numbers between weweb and xano.

[Aloy]

Oh and tried with a text/short answer field as well (company name). Added a new short answer form element named “editable_company” and set initial value = to the collection company name. But “editable_company” doesn’t show up in the list of variables, so can’t connect it on update POST action.

[Joyce]

Hi @Aloy

Not sure I understand. Did you find a solution in the meantime?

Just tried the workflow and it worked great with the “Phone” input type:

Did you change something in Xano?

[Aloy]

Hi Joyce. Yes, kind of found a half-way solution, but very unsatisfying. I stopped it from erroring by changing the field in XANO to an integer and having weweb pass the phone number as an integer. Doesn’t really work long term as I can’t get it to format like a phone number in the UX, nor store in xano as a xano phone number field. But least I doing that allowed me to be able to at least create the record without an error.
I see others have written JS to be able to apply formatting to phone numbers and then I suppose store the number as a text field. But my ideal long term solution would be to allow no-coders to select phone number as a field type, just like in Xano and to have both integrations and ux display work like a phone number.

[Joyce]

@Aloy

I see others have written JS to be able to apply formatting to phone numbers and then I suppose store the number as a text field. But my ideal long term solution would be to allow no-coders to select phone number as a field type, just like in Xano and to have both integrations and ux display work like a phone number.

Great point! I’ve added your feedback to our user research file to help the product team prioritize next features and improvements