Getting started with the Xano Connector plugin for Bubble

As the no code world expands rapidly, Xano and Bubble are leading the way with platforms that enable non technical folks to build software products and make a meaningful difference in the world.
In this video, we cover the basic steps to getting started with the Xano Connector plugin to learn how to easily extend your Bubble app with the powerful functionality of a Xano backend.
Learn more about both tools here:
Xano: bit.ly/3UxRnwc
Bubble: bit.ly/3Uu32we
0:00 The Xano Connector
41:54 Virtual data types

[@nategell]

Eli!! This is a BIG game changer. I've been setting this up manually, so you've just saved me soooo much time!

[@magnuspro9048]

Eli! You just save our world. Thanks a million from Magnus Pro team

[@EliBeachy]

Awesome! Glad to hear it!

[@juancamilovasquez129]

Wow this is great ! 🎉 thanks Eli !!!

[@EliBeachy]

Thanks Juan!

[@bryangaurano2967]

Awesome!!

[@wealthyman5420]

Thank you.

[@MrTheFrenchCOYOTE]

Great content, great help for noobs such as me :) , I would be interested in a demo for some POST queries , and also a demo of your frame plugin. Great job again

[@pepecortez3534]

Thank you man this is a very helpful video. Will be great to have a pay version of the plug in that both logs in the bubble and xano user using AuthO. Or a way to sync both user databases.

[@JosinaldoBezerra]

Great content. I suggest a new video with the last version of xano connector.

[@luc-er8fm]

I did exactly as you did, but the first time I got the error “missing param: field_value”. Then I thought that the parameters in the plugin and the parameters in my API endpoint might be different, so I made them the same as in your video (this shouldn't change anything) and then I tried again and I got the error “Unable to locate request”. I really can't find out why. I would appreciate it if you help or if someone who sees this can help me, because I really want to use this plugin 😅

[@svndrc97]

Hey Eli, thanks for developing this great plugin 🙏🏼 Question: I have a simple XanoQuery which gives me all related messages for a chat. Each message has several fields. One of those fields is a list of table references of which I get a file url and a file name which I put as an addon to the response. Now when I do run & debug I do get the response that I want (which includes a nested object). However, if I manually input that response in the bubble api connector, the XanoQuery element is not able to parse the data. When I go into the bubble inspector I do see all the data inside the raw json body of the XanoQuery Element though but I dont get it as "Data" that I can work with. I have the same issue with other queries when my desired response contains objects. Has anyone had this experience too and knows a solution to this?

[@user-oj5cx3gw8i]

Hi Eli. Can You make an actualized tutorial XANO - BUBBLE for Inventory App ? Thanks from Argentina

[@charleswood1082]

Hi Eli, great video. I have an app in bubble and I used the api connector to connect to Xano. It looks like your data queries go a lot faster than mine. So I just downloaded your Xano connector. I would like to convert everything to your connector. Is that something you could help me with?

[@endrefyl]

Hi again! I am having some problem with multiple calls from bubble to xano with the new "load data" parameter. It seems like it do 1-3 calls each time the parameter is set to "yes", even though it is just active for about a second. Is there any advice on i.e. conditionally manage this?

[@EIUeparseneau]

Could you record a tutorial showing ways to modify a single Xano record? That would be very helpful.

[@lucasteixeiraoliveira8223]

Hey Eli! Where did you get this signup/login UI template?

[@TechAuditTV]

This was awesome! So glad I found this plugin as my site relies HEAVILY on APIs. My question is how do I get around empty values? For example, my repeating groups look to the URL parameters to know what value to pass back to Xano (such as a search query or a filter selection. I have default values set on Xano's inputs in the case nothing is passed back but still get nothing sent to data unless I have a value passed from Bubble. Does that make sense?

[@TechAuditTV]

I should clarify, it actually doesn't matter if it's a required input or not in Xano's settings. If I use the "get data from page URL" to pass the value, but no parameter exists, it breaks the repeating group and no data appears. With the Bubble API connector there are normally default values passed back to Xano. In my case, should I also be adding defaults via the "Add Parameter" box on the API connector?

[@EliBeachy]

@@TechAuditTV If I understand correctly, I would add a default value from Bubble's side. So do your Get data from URL: defaulting to null. I think that should solve the issue if you have your Xano endpoint set up to manage null input values. I would also look at the request history on the Xano endpoint to see what input values you have coming in from Bubble on those calls.

[@TechAuditTV]

@@EliBeachy Thanks for reply Eli! There are some small complications to that approach that would be hard to illustrate in the comment section. I went ahead and moved this chat over to the Xano Community and I pinged you there with the details!

[@princenocode]

Hello Eli , I'm impressed with the work you've done with Bubble's Xano Connector plugin. I wanted to know what to do if I have multiple API groups in Xano?

[@EliBeachy]

You can set the API group directly on any of the Xano elements on the page and the calls made from that element will go to the specified group.

[@princenocode]

@@EliBeachy I've always created several groups of Xano APIs to make maintenance easier. With the plugin I can only access one group. It would be useful if I could add several groups or do it dynamically.

[@bsoftbruno]

Hi Eli. First of all, thank you very much for making this plugin available to us. I am encountering the error Xano Connector error: this URL is not correct (Invalid URL: undefined) undefined The call to Xano's API is normal, but it generates this error and fails to show the data on the screen. I have already checked your video and my codes many times. What do you think could be going on?

[@bsoftbruno]

Hi Eli. I`m sorry, I found the error. I was setting data source with Get data from external API, and correct is Xanoquery`s,data. Tks

[@endrefyl]

Hi, and thanks for this awesome tutorial and plugin! A real game changer imo! I have tried to read up on xano, but can't seem to get a full understanding on how to handle "privacy" in the xano end (like privacy in Bubble). Is there a way to generally define privacy in xano like in Bubble? Best regards, Endre

[@galdx_]

i also have this question... in the video he shows that it is possible to ask for an user authentication. i believe that this would be needed for each api call that has a field that should be private. would appreciate to have a feeling of how much faster a marketplace app would be by implementing xano (eg. airbnb type)...

[@endrefyl]

@@galdx_ That is correct! Authenticate the api, and have additional conditions where needed in the flow. Xano through the browser (with the Xano plugin) is superfast and Xano is also fast to work with when you get some Practice. I use reusable elements with custom flows in Bubble to trigger the calls, so when you do a good pre-job, building in Bubble frontend is almost as fast as «usual». But it takes some time to get the overview. As a test I made 20000 tings in a Xano table and the server hit 29% capacity over a period of 1 minute (looping/recursive).

[@nathanielstummann20]

is it possible to do POST with this?

[@MichaelLovell-gt2ro]

Eli, I'm a total newby with Xano (and Bubble) and this was super simple to follow. Thank you! One challenge I'm having is that an account is created but the first and last name values aren't being passed. My endpoint inputs and user table headers are: {email: "", password: "", first_name: "", last_name: ""} The request history suggests the following input naming convention is required. {email: "", password: "", name_last: "", name_first: ""} Is it a requirement to rename the endpoint inputs and user table headers to "name_first" "name_last"?

[@EIUeparseneau]

Yes, it is a requirement to name the variables as he did.

[@japarize]

I have the smae issue. Did you find out the solution ?

[@lebohangephraimmahlabe4349]

@@japarize Hey, I had the same problem. When you create your user database fields use "name_last" and "name_first" (just like in the video), this is a requirement. Also do not forget to change these under your Auth API (auth/me and auth/signup). I was using "firstname" and "lastname" and it did not work. Hope this works for you; it did for me.

[@JayMutzafi]

@EliBeachy What if my xano call returns a text value, not JSON? I can't get this to work based on this tutorial. If do use a text Data type in the element nothing seems to happen and I can't seem to create (or don't know how) a Data type in API connector. If I try to do enter parameter manually it won't let me save unless I do use JSON but if I select a text data type it won't let me manually enter anything, nor can I initialize the call.

[@EliBeachy]

You can access a plain text response by setting the return type to text. Make sure to upgrade to the latest version of the plugin.

[@felipecavalcante4349]

Good afternoon. Excellent resources!!! Is this app free? I am from Brazil

[@goodgamingtvph]

Hey sir Eli beachy, is this plugin element query dont recognize a field list? coz when I use xano query element for repeating group it doesn't display, its all empty, but then I remove that field list inside that Table, data is displaying on the repeating group

[@chriswitti4238]

experienced the same

[@EliBeachy]

This should be fixed in the current version

[@EliBeachy]

This should be fixed in the current version

[@amartyagupta8255]

Make a video on xano security

[@EIUeparseneau]

Looks like a fantastic plugin. I'm having success adding a new user to Xano, but it only brings over the email and password. It does not bring over the first and last name. Any suggestions? I'm also curious if it should be limited to first and last name? I have other fields I would like to create at the time a new user is signed up, but they're not showing in the workflow action. Perhaps my error would solve both of these issues at once.

[@EIUeparseneau]

I just tested renaming my variable to exactly name_first as you did and that worked. I had it as first-name. I suppose that means I should be making a new POST action to bring in the remaining information about the user, e.g. their phone number, date of birth, etc.

[@EliBeachy]

@@EIUeparseneau Yes, that's correct. We just updated the plugin with a new Xano Action element that lets you set up custom POST requests or a GET to retrieve additional user information as well.

[@rbitente]

Hello Eli How I can send in the parameter of Authorization Token in the query ?

[@EliBeachy]

Rafael, use the 'Set the Xano auth token' action and the plugin will automatically pass the authentication token in the query request

[@felipecavalcante4349]

Boa tarde. Excelentes recursos!!! Esse aplicativo é gratuito?

[@bryanf.988]

If you don't mind me playing devil's advocate here, but I can see how useful this is from a Xano user auth perspective. However my use case would be from a Xero query and Xero GET perspective, which from what I can tell still requires using some parts of the API connector to setup, and some of the object setup I would have setup in Xano anyway had this plugin not existed. Just wondering why I should then consider moving any of my existing workflows from the Bubble API connector setup to this plugin? Does it have a speed advantage over Bubble's calls? My biggest hurdle at the moment is being able to combine a dynamic sort, dynamic filter, and page item/per page override when querying a bunch of records in Xano. If you could find an easier way of setting that up with your plugin, versus just emulating the same JSON code we'd setup in Xano in Bubble, that would be a sure fire way to convert me over. You've done tremendous work no doubt with getting this plugin going and I'm all for it! Just need to see the material benefit at this stage to get me in on it now! :)

[@EliBeachy]

Hey Bryan! Absolutely play devil's advocate anytime :) In all honesty, it may be easier to use your current workflow setup. The primary goal of the plugin is to facilitate a much simpler way to manage user authentication in Bubble. We provide the authToken as a state on the XanoAuth element so you can use it simply for user auth and build all your calls in the API connector. However, the XanoQuery and XanoGet elements provide a couple of substantial benefits over the API connector: #1, Your data is retrieved much faster since we are calling Xano directly from the browser. The API connector will route through Bubble's servers to retrieve the data. #2, There are actions to refresh the data (and data is refreshed faster - see 1 above) without having to hack around the refresh using dummy parameters in the API call. #3, This is a big one for me. When using the API connector you have a different data type for each call you setup. So if you setup a call to retrieve a list of users from Xano and a call to retrieve a single user from Xano, there is no way to tell Bubble that the user object in the list call and the user object in the single call are the same thing. This is particularly frustrating when you have a repeating group populated with the list call and you can't send them to a popup that is set to be populated with the single item call event though its the same data. However, with the plugin, you set up a single 'user' object in the API connector and then you can specify that object as the data type whether you are retrieving data from the XanoQuery or XanoGet element. Interesting point you make about facilitating an easier construct of the JSON body. Xano has so much flexibility that we really have to leave the JSON body as a free text input so people can have full control over the data they send in the request. However, I could see a separate element/action that would help build construct the JSON body for those who would like that. Feel free to reach out via email with any suggestions on how you would see that working if we decide to add an element like that.

[@bryanf.988]

@@EliBeachy Great writeup! Regarding #1 that's fantastic to hear! Always love speed optimizations #2 would be interesting to figure out how to apply to my use case. I do use a dummy refresh parameter at the moment, I've got 3 different elements (dashboard data, sales data, contact data - each one has it's own unique call to retrieve data from Xano) When I do an update action in my app, I update the dummy refresh parameter, and my understanding of Bubble, is when each element is displayed and Bubble notes if a parameter is different, it will trigger the API call again. This is performant in a way cause I'm not displaying the other elements (i.e not displaying dashboard when viewing sales data) so there's no unnecessary load of refreshing data that doesn't need to be displayed yet until I need to. With using the Refresh Data action you've mentioned, I can't see how I can get around this. I'd assume I'd just refresh data across all 3 datasets when an update action happens, but not sure if that would cause unnecessary load on my Bubble server if I only ever need to view 1 dataset at a time. Any workarounds for that? #3 I probably need to spend more time understanding this, but in my addled head, it's just a matter of just using a list response by default, and then using :first item for when needing to pull a single object. In terms of ideas(if I may), I reckon having your plugin setup the JSON automatically for entries per page, get page and sorting is pretty doable. There is not much dynamic parts there as compared to dynamic filtering which would be pretty hard to setup in an easy to use format. Also would love (ideas based on the ListShifter plugin by Keith) if your plugin could do pre-fetch of data (ideally the prev pg and next page of a dataset) and a dynamic pagination system similar to that plugin. That would be super cool!

[@EliBeachy]

Hey Bryan, sounds like you're comfortable with the setup you currently have. If you ever want to experiment with the plugin, I go over the pagination, etc in detail in the video and I would suggest setting up a test app to give it a try to see first hand how it works :)

[@ygorcitoyen3383]

Hi Eli, Thank you very much for sharing this. That seems awesome. I have this error while following the login (or signup) process. I double-checked every steps and still do not figure out what is going wrong. "The plugin Xano Connector / action Log the user in via Xano Auth trew the following erro : ReferenceError: xano is not defined at Eval (PLUGIN_1667758971605x316889048071536640/Xano-Connector-element_action--Xano-Auth-Log-the-user-in-via-.js:11:5)" Would you be able to help ? Thanks a lot, Leo

[@prprprince6341]

I was having the same issue. I had to all the API connector first and then it worked. Watch this video: kzbin.info/www/bejne/n2i7q62iqcZqaaM

[@EliBeachy]

Make sure you are on the latest version of the plugin. This error should be resolved