Xano Plugin, Productivity, and Backend Pagination

Hello 👋

What's new in WeWeb?

• a native integration with Xano, 🧩
• seven productivity features to help you build faster, 🚀
• an improved Paginator element to enable backend pagination (and why that's important) ⏭

🧩 Native Integration with Xano

The team developed a new Xano data source plugin which allows you to access all the API endpoints of all your Xano instances.

To add the Xano data source in WeWeb, go to Plugins > Data sources :

To generate or find your API key in Xano, go to Account > Developer Access :

Once you have added your Xano API key to the plugin, you will be invited to select which Xano instance you want to work with:

In the example above, we have two instances in our Xano workspace.

Once you've selected a Xano instance, you will be able to add a Collection:

When you create the Collection, you will be invited to choose the API group and endpoint you want to use in WeWeb:

In the example above, we want to GET all the cars that are listed in the fleet table of our Electreazy API group.

🔥 Pro Tip for Airtable Users🔥

It's fairly common for Airtable enthusiasts to switch to backends like Xano or Supabase when scaling web-apps that require state-of-the-art security and performance standards.

WeWeb's new Xano plugin facilitates the switch from Airtable to Xano.

Step 1 – You can use Xano's import function to import Airtable tables. The import will keep the same field names and references between tables:

Step 2 – In WeWeb, you can then change the data source of your Collection from Airtable to Xano.

Your Collection Lists and Collection List Items will remain unchanged on the page because WeWeb will automatically recognize the data structure:

🏎 Seven Updates to Help You Build Faster

Last week, the WeWeb team added seven new functionalities to help you build faster.

1- Added a "clear" button to the Formula search input

2- You can now signup / login to WeWeb with Google credentials

3- You can create folders to organize Collections, Workflows, Variables, and Formulas:

4- When creating a Workflow, the trigger "on click" is now selected by default

5- When starting a drag & drop from the "+" menu while in preview mode, the editor will now automatically switch to edit mode

6- Added the option for developers to replace existing components in the page while developing a component

7- Copy / paste Actions in or between Workflows:

🔥 Pro Tip 🔥

If you frequently find yourself copy/pasting Actions, you might want to breakdown recurring Actions into Global Workflows instead:

🧰 New Custom Settings for Pagination

It is now possible to enable "Custom pagination" on the Paginator element.

BEFORE

You could only add pagination to your Collection in WeWeb.

So if you had a collection with 100 items for example, you could choose to display only 10 per page and use the Paginator element to allow users to navigate 10 items at a time.

However, the entire 100 items from the Collection would be loaded into the user's browser, even if only 10 items were displayed on the page. That's how frontend pagination works.

Frontend pagination is the recommended practice when working with small amounts of data because the frontend is quick to switch between pages.

Learn more about adding frontend pagination in WeWeb.

NOW

You can add pagination to your backend and configure WeWeb's Paginator element accordingly.

Why would you do that?

Let's say you have a table with 1,000,000 items. You definitely don't want to load all those items in the frontend.

When working with a large amount of data, it is best to paginate your data at backend level so that you only load say 20 items at a time in the frontend.

Backend pagination is slightly slower than frontend pagination because the frontend needs to fetch data from the backend when the user clicks on the "Next" or "Previous" navigation.

However, the initial page load will be faster because you won't be downloading huge datasets into your users' browsers.

How do you add pagination in your backend?

To walk you through some of the logic, we've prepared a tutorial on how to add a paginated Xano Collection in WeWeb.

However, how you add pagination to a table in your backend is specific to your backend. You'll need to figure that out on your side.

Once you have added a Collection in WeWeb that is paginated in your backend, you can enable Custom pagination in the specific settings of WeWeb's Paginator element:

🚀 Other Improvements

• You can now add workflows on Sections

• Bind properties to current breakpoint

In the example below, we display the sidebar at all times on desktop but, on mobile and tablet, we change the display based on user interaction:

• New trigger for Map element: "On map click"

• "Required" field is now bindable in most inputs

• Added the "event" variable template in most workflows

• Need to write the project / workspace name before deleting it (so you don't delete projects by mistake!)

• Added an option for developers to display more dev info in the editor

• Added "On backdrop click" trigger to the modal section. It is now possible to close a modal / sidebar by clicking outside of it:

🪲 Bug fixes

• All filter / formula popups now placed correctly

• Hide active-link state when element is not a link

• Sandbox tutorial project now created in the correct workspace

• Bound design system colors now work properly in the published project

Ok, that's it for now!

Have a great week 😊

PS: have a question? Ask the Community